angularjs 路由 ngRoute tab切换
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script> var m1 = angular.module('myApp',['ngRoute']);//引入插件angular-route.min.js m1.config(['$routeProvider',function($routeProvider){//通过供应商初始化配置 $routeProvider .when('/aaa/:int',{//int对应123,456 templateUrl : 'index01.html', //模版加入到ng-view controller : 'Aaa'//改变name的值 }) .when('/bbb',{ templateUrl : 'a.html', controller : 'Bbb' }) .when('/ccc',{ templateUrl : 'b.html', controller : 'Ccc' }) .otherwise({//初始调用的时候走这里 redirectTo : '/aaa' }); }]); //$location.path切换路径,$location对应controller里面的$scope.$location //m1.run(['$rootScope',function($rootScope){ // $rootScope.$on('$routeChangeStart',function(event,current,pre){//routeChangeStart是ngRoute切换之前执行的, // console.log(event); // console.log(current); // console.log(pre); // }); //}]); m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){ $scope.name = 'hello'; $scope.$location = $location; console.log( $routeParams ); }]); m1.controller('Bbb',['$scope',function($scope){ $scope.name = 'hi'; }]); m1.controller('Ccc',['$scope',function($scope){ $scope.name = '你好'; }]); </script> </head> <body> <div ng-controller="Aaa"> <!--$location.path切换路径,$location对应controller里面的$scope.$location--> <!--<ul style="width:200px;height:300px;float: left;"> <li><a href="" ng-click="$location.path('aaa/123')">首页</a></li> <li><a href="" ng-click="$location.path('bbb')">学员</a></li> <li><a href="" ng-click="$location.path('ccc')">课程</a></li> </ul>--> <ul style="width:200px;height:300px;float: left;"> <li><a href="#/aaa/123">首页</a> </li> <li><a href="#/bbb" >学员</a></li> <li><a href="#/ccc">课程</a></li> </ul> <div style="width:800px;height:300px;float: left;"> <div ng-view></div><!--//切换布局的主题--> </div> </div> </body> </html>