angularjs--路由

angularjs--路由

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6     <title>index</title>
 7     <link href="{$Think.const.CSSURL}bootstrap.min.css" rel="stylesheet" type="text/css"/>
 8     <script src="{$Think.const.JS}jquery.min.js" type="text/javascript"></script>
 9     <script src="{$Think.const.JS}bootstrap.min.js" type="text/javascript"></script>
10     <script src="{$Think.const.JS}angular.min.js" type="text/javascript"></script>
11     <script src="{$Think.const.JS}angular-route.min.js" type="text/javascript"></script>
12     <link href="{$Think.const.CSSURL}home/index.css" rel="stylesheet" type="text/css"/>
13 </head>
14 <body ng-app="myApp" class="ng-scope">
15 
16 <script type="text/ng-template" id="home">
17     <h1>{{content}}</h1>
18 </script>
19 
20 <script type="text/ng-template" id="about">
21     <h1>{{content}}</h1>
22 </script>
23 
24 
25 <div>
26     <div id="index">
27         <a href="#/home">Home</a>
28         <a href="#/about">About</a>
29     </div>
30 
31     <div ng-view=""></div>
32 </div>
33 
34 </body>
35 <script>
36     angular.module("myApp",["ngRoute"])
37             .controller("HomeController",function($scope,$route){
38                 $scope.$route = $route;
39                 $scope.content = "Hello,Home!!!";
40             })
41             .controller("AboutController",function ($scope,$route) {
42                 $scope.$route = $route;
43                 $scope.content = "Hello,About!!!";
44             })
45             .config(function($routeProvider){
46                 $routeProvider.
47                 when("/home",{
48                     templateUrl:"home",
49                     controller:"HomeController"
50                 }).
51                 when("/about",{
52                     templateUrl:"about",
53                     controller:"AboutController"
54                 }).
55                 otherwise({
56                     redirectTo:"/home"
57                 })
58             });
59 </script>
60 </html>
posted @ 2017-02-04 13:41  yuge790615  阅读(100)  评论(0)    收藏  举报