一、AngularJs框架简介：
AngularJs是一种能够轻松实现一个应用开发的JS框架，其较为突出的特点是：模块化、数据的双向绑定和依赖注入等等。
模块化：AngularJs中存在模块的概念，即每个模块必须由一个控制器来控制，控制器在应用中具有唯一一个名称；
双向绑定：将控制器中赋值给变量的数据通过一个通道（$scope）实现视图（view）和控制器（controller）之间的连接，视图在修改数据时会立刻更新$scope,同样的$scope发生改变时也会立刻重新渲染视图；
依赖注入：类似于C语言中文件外的函数在本文件中使用前，必须先声明一样，每一个控制器中所要用到的服务（可以理解为函数）都要在开头作为参数声明；
二、路由
$route服务是AngularJs中的一个服务，作用是声明容器和其对应的控制器的对应关系，由于容器的存在，配合路由，使得应用实际上变成一个单页面应用程序，在一个HTML页面中声明所有控制器，并为程序设置一个个容器，不同的容器调用不同的控制器实现不同功能，切换容器达到切换功能的效果，页面上显示为页面的切换。
三、框架的搭建
首先，在一个HTML文件中声明你的应用:
<html ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>My AngularJS App</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css"> <script src="lib/angular/angular.min.js"></script> <script src="lib/angular/angular-ui-router.min.js"></script> <script src="js/app.js"></script> <script src="module/mainCtrl.js"></script> <script src="module/tab.index/indexCtrl.js"></script> <script src="hjx/homeCtrl.js"></script> <script src="hjx/backgroundCtrl.js"></script> </head> <body ng-controller="MainCtrl"> <div ui-view></div> </body> </html>
用ng-app命令声明app名字为myAPP，然后像其他HTML文件一样，声明引用的演示文件、脚本文件等，最后再声明各模块的控制器文件；这里必须先引入angularjs.min.js文件，再引用angular-ui-router.min.js文件，后者依赖前者；
为这个HTML文件声明控制器，名为MainCtrl；在里层的一个div标签中声明视图的容器，接下来的每个视图都将放在这个div标签中。
然后，配置路由：
1 var myApp = angular.module("myApp", ['ui.router']); 2 myApp.config(function ($stateProvider, $urlRouterProvider) { 3 $urlRouterProvider.otherwise('background'); 4 //$stateProvider.otherwise("home"); 5 $stateProvider 6 .state("home", { 7 url: "/home", 8 templateUrl: "hjx/home.html", 9 controller: 'homeCtrl' 10 }) 11 .state("background", { 12 url: "/background", 13 templateUrl: "hjx/background.html", 14 controller: 'BackgroundCtrl' 15 }) 16 .state("tabs", { 17 url: "/tabs", 18 templateUrl: "module/tabs.html" 19 }) 20 .state("tabs.index", { 21 url:"/index", 22 templateUrl: "module/tab.index/index.html", 23 controller:'IndexCtrl' 24 }) 25 .state("tabs.view", { 26 url:"/view", 27 templateUrl: "module/tab.view/view.html" 28 }) 29 .state("single", { 30 url:"/single", 31 templateUrl: "module/single/single.html" 32 }); 33 //$stateProvider.otherwise("home"); 34 });
使用APP.config()函数为应用配置路由，这里注入$stateProvider和$urlRouterProvider服务，需要说明的是，按照AngularJs的教程只用$stateProvider来配置路由无法成功，报注入错误的错误信息，所以引入$urlRouterProvider服务，当没有选择任何视图时，跳转到$urlRouterProvider.otherwise('background')所指明的视图中。路由的配置语法，跟switch语句很像，当状态（state）满足任一状态时，显示对应的视图，并调用对应视图的控制器，从而实现页面跳转，实则为状态的跳转。
url：URL中显示的路径
templateUrl：模板（视图）路径
controller：模板（视图）对应的控制器
- 为什么在这里指明了控制器，状态跟换时会自动找到对应的控制器进行调用呢？
因为在index.html文件中，已经引用了此文件，也就是在引用一加载的时候，应用已经知道这个控制器了，在需要的时候，这个控制器就会被调用。
- 路由配置有顺序的概念吗？
没有，只有对应关系，没有先后关系，模板对应控制器，对应显示的路径。就像switch语句中每个case没有先后，但每一个case对应一段需要执行的代码。
- “$urlRouterProvider.otherwise('background');”语句可以写后面吗？
可以，就好比switch语句的default可以写前面也可以写后面。
最后，写各个视图：
自己写的各个视图可以按照功能模块分成一个个文件夹，每一个写好的控制器，都有唯一的一个名字。并且为了方便，会直接在index.html文件中引用。
值得提一下的是，为了能够方便地跳转到各个状态，可以在index.html中视图容器外添加一个菜单栏，这样菜单栏不会随着状态的跳转而不见，就方便随意跳转了。这种设计和许多官网的设计是一样的，这说明，这种设计很实用。