Angular 学习笔记——$rounte
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script> <script> var m1 = angular.module('myApp',['ngRoute']); m1.config(['$routeProvider',function ($routeProvider){ $routeProvider .when('/aaa',{ template:'<p>aaaaaaaaaaaa</p>' }).when('/bbb',{ template:'<p>bbbbbbbbbbb</p>' }).when('/ccc',{ template:'<p>cccccccccccccc</p>' }) }]) m1.controller('Aaa',['$scope',function ($scope){ }]) </script> </head> <body> <div ng-controller="Aaa"> <a href="#aaa">index</a> <a href="#bbb">222222</a> <a href="#ccc">33333</a> <div ng-view></div> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script> <script> var m1 = angular.module('myApp',['ngRoute']); m1.config(['$routeProvider',function ($routeProvider){ $routeProvider .when('/aaa',{ template:'<p>aaaaaaaaaaaa</p>' }).when('/bbb',{ template:'<p>bbbbbbbbbbb</p>' }).when('/ccc',{ template:'<p>cccccccccccccc</p>' }) }]) m1.controller('Aaa',['$scope','$location',function ($scope,$location){ $scope.$location = $location; }]) </script> </head> <body> <div ng-controller="Aaa"> <a href="" ng-click="$location.path('aaa')">index</a> <a href="" ng-click="$location.path('bbb')">222222</a> <a href="" ng-click="$location.path('ccc')">33333</a> <div ng-view></div> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script> <script> var m1 = angular.module('myApp',['ngRoute']); m1.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/aaa/:num',{ template : '<p>首页的内容</p>{{name}}', controller : 'Aaa' }) .when('/bbb',{ template : '<p>学员的内容</p>{{name}}', controller : 'Bbb' }) .when('/ccc',{ template : '<p>课程的内容</p>{{name}}', controller : 'Ccc' }) .otherwise({ redirectTo : '/aaa' }); }]); m1.run(['$rootScope',function($rootScope){ $rootScope.$on('$routeChangeStart',function(event,current,pre){ 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"> <a href="" ng-click="$location.path('aaa/123')">首页</a> <a href="" ng-click="$location.path('bbb')">学员</a> <a href="" ng-click="$location.path('aaa/456')">课程</a> <div ng-view></div> </div> </body> </html>