1，html页面

<!DOCTYPEhtml><htmllang="en"ng-app="myApp"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><title>Document</title><scriptsrc="http://cdn.bootcss.com/angular.js/1.5.3/angular.js"></script><scriptsrc="http://cdn.bootcss.com/angular.js/1.5.3/angular-route.js"></script><scriptsrc="../modules/mainModule.js"></script><scriptsrc="../router/route.js"></script><scriptsrc="../controllers/mainControllers.js"></script><scriptsrc="../controllers/tab01.controller.js"></script><scriptsrc="../controllers/tab02.controller.js"></script><linkrel="stylesheet"href="../public/css/main.css"></head><bodyng-controller="mainCtrl"><divid="wrap"><header><h2>{{name}}</h2></header><divid="content"><ng-view><!--自定义指令directive----自定义标签自定义属性组件--><!--嵌套的视图--></ng-view></div><divid="tabbox"><ul><li><ahref="#/tab1">选项卡1</a></li><li><ahref="#/tab2:maxiaotian">选项卡2</a></li></ul></div></div></body></html>

注：路由之间的传参，可以使用方法：在路由的虚拟路径后面加上“：参数”，例如“<a href="#tab02:xiaoming"></a> ”,该方法是遵循的restful API的设计规范。


3,controller文件夹下的mainController.js、tab01.controller.js、tab02.controller.js文件

main.controller("mainCtrl",["$scope",'$interval',function($scope,$interval){$scope.name="--平凡的世界--"//varcount=0;//$interval(function(){//count++//console.log(count)//},1000);}])//$timeout$interval

main.controller("myTab01",["$scope","$timeout",function($scope,$timeout){//...}])

main.controller("myTab02",["$scope",function(){//...}])

3,配置路由:

3.1，因为要用到angular的路由，所以要依赖注入路由服务 在modules文件下的mainModule.js文件

varmain=angular.module("myapp",[$ngRouter]);

3.2，配置路由文件router.js

//$routeProvider提供路由服务//$locationProvider路由里地址栏服务main.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){$routeProvider.when("/tab1",{//地址栏访问tab1路径的时候跳转掉../view/tab01.html页面templateUrl:"../view/tab01.html",controller:"myTab01"}).when("/tab2:num",{//地址栏访问tab1路径的时候跳转掉../view/tab01.html页面templateUrl:"../view/tab02.html",controller:"myTab02"}).otherwise({redirectTo:"/tab1"})}])


angular的路由有两种：ng-router和ui-router。两者的区别：ng-router只能嵌套单页面、ui-router可以嵌套多视图页面；

一个项目架构包括：m(module数据层)、v(view视图层)、c(controller控制器层)、filter(过滤器：放置自己写的自定义过滤器js文件)、public(公共资源层)、router(路由层)、node_modules(用于安装)、server(服务)；