angularJs的ui

一:跑通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='/images/loading.gif' data-original="../js/angular1.4.3.js"></script>16 <script type="text/javascript" src='/images/loading.gif' data-original="../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>

看到三个a标签没有,这是切换视图的三种写法.

跑起来后分别单击各个按钮的后果: