angularJs的ui-router总结

时间：2015-09-09 19:07:21 阅读：172 评论：0 收藏：0 [点我收藏+]

标签：

一:跑通ui-router.

技术分享

跑通后的样子:

技术分享

这个不解释了,都是很基本的东西.

二:切换视图:

技术分享

跑起来后的后果:

技术分享

三:如何通过链接切换视图.

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body ng-app="app" ng-controller="ctrl">
 8 <a href="" ui-sref="main">main</a>
 9 <a href="#/main2">main2</a>
10 <a href="" ng-click="gomain3()">main3</a>
11     <div ui-view>
12         <p>ui-view没有被替换掉,你就能看到我了</p>
13     </div>
14 </body>
15 <script type="text/javascript" src="../js/angular1.4.3.js"></script>
16 <script type="text/javascript" src="../js/angular-ui-router.min.js"></script>
17 <script>
18     angular.module(‘app‘,[‘ui.router‘])
19             .config([‘$stateProvider‘,‘$urlRouterProvider‘, function ($stateProvider, $urlRouterProvider) {
20                 $urlRouterProvider.otherwise("/main");
21                 $stateProvider.state(‘main‘,{
22                     url:"/main",
23                     template:‘<div>main1:{{title}}</div>‘,
24                     controller:[‘$scope‘, function ($scope) {
25                         $scope.title=‘hello angular‘;
26                     }]
27                 }).state({
28                     name:"main2",
29                     url:"/main2",
30                     template:‘<div>main2:{{title}}</div>‘,
31                     controller: function ($scope) {
32                         $scope.title="hello angulr main2";
33                     }
34                 }).state("main3",{
35                     url:"/main3",
36                     template:"<div>main3:{{name}}</div>",
37                     controller: function ($scope) {
38                         $scope.name="hello 张三"
39                     }
40                 });
41             }]).controller(‘ctrl‘, function ($scope,$state) {
42                    $scope.gomain3= function () {
43                        $state.go("main3");
44                    }
45             })
46 
47 </script>
48 </html>