agularJs 路由
angularJs的路由方式：
先定义一个模板ng-app-->然后定义路由的规则（routeProvider）在服务config里-->然后通过不同的URL实现
到单页面加载的所需页面的效果。
以上只是大概流程。
<!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <!-- 这是需要插件引入的：angular-route 注意不同版本的angularJs，插件最好对应上这个版本的号，（如果找不到对应版本，相近版本也可以） --> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script> </head> <body ng-controller="myCon"> <!-- 路由 --> <!-- ng-click="$location.path('/aaa')" 来改变路径 功能与href的哈希值一样 --> <a href="#aaa/123">首页</a> <a href="#bbb/345">aass</a> <a href="#ccc/76567">qqoc</a> <div ng-view></div> <script> // 使用插件ngRoute // 可以实现页面切换的效果 // 还有历史记录的功能，可以返回 var myApp=angular.module("myApp",["ngRoute"]) // config配置是最早就执行的方法，所以在里面写好路由规则 .config(['$routeProvider',function($routeProvider){ $routeProvider /*路由跳转的函数*/ .when("/aaa/:num",{ template: '<p>首页送你温暖</p>{{name}}', /*可以定义一个控制器，来限制作用域*/ controller:"aaa" }) .when("/bbb/:num",{ template: '<p>aass送你高温</p>{{name}}', controller:"bbb" }) .when("/ccc/:num",{ template: '<p>qqoc送你高冷</p>{{name}}', controller:"ccc" }) // 配置其他的路径跳转，可以想成default .otherwise({ // 重定向地址 // 可以理解为设置默认路径 redirectTo:"/aaa" }) }]) // 假设我们需要在每次路由发生变化时，都执行一个函数来验证用户的权限，放置这个功能唯一合理的地方就是run方法 // 不过它是全局的 .run(["$rootScope",function($rootScope){ // $on用于接收event与data // $routeChangeStart这个事件会在路由跳转前触发 $rootScope.$on("$routeChangeStart",function(ev,current,pre){ // 接受三个参数，一个是事件对象，一个是当前对象，一个是之前的对象 console.log(ev); console.log(current); console.log(pre); }) }]) .controller("myCon",["$scope","$routeParams","$location",function($scope,$routeParams,$loaction){ // $scope.$loaction=$loaction; // console.log($loaction); // 服务$routeParams保存了地址栏中的参数，例如{id : 1, name : 'tom'} console.log($routeParams); }]) .controller("aaa",["$scope",function($scope){ $scope.name="za"; }]) .controller("bbb",["$scope",function($scope){ $scope.name="cs"; }]) .controller("ccc",["$scope",function($scope){ $scope.name="vd"; }]) </script> </body> </html>
简化版代码：
这个可以更加简单的知道它的基础使用；
<!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.min.js"></script> <!-- 这是需要插件引入的：angular-route 注意不同版本的angularJs，插件最好对应上这个版本的号，（如果找不到对应版本，相近版本也可以） --> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script> </head> <body> <!-- 路由 --> <a href="#aaa">首页</a> <a href="#bbb">aass</a> <a href="#ccc">qqoc</a> <div ng-view></div> <script> // 使用插件ngRoute // 可以实现页面切换的效果 // 还有历史记录的功能，可以返回 var myApp=angular.module("myApp",["ngRoute"]) // config配置是最早就执行的方法，所以在里面写好路由规则 .config(['$routeProvider',function($routeProvider){ $routeProvider /*路由跳转的函数*/ .when("/aaa",{ template: '<p>首页送你温暖</p>{{name}}' }) .when("/bbb",{ template: '<p>aass送你高温</p>{{name}}' }) .when("/ccc",{ template: '<p>qqoc送你高冷</p>{{name}}' }) }]) </script> </body> </html>
