一、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中視圖容器外添加一個菜單欄，這樣菜單欄不會隨着狀態的跳轉而不見，就方便隨意跳轉了。這種設計和許多官網的設計是一樣的，這說明，這種設計很實用。