一. 安装
第一步：安装npm所需模块
首先需要安装Node.js，然后使用npm安装所需要的模块
npm install -g grunt-cli bower yo generator-karma generator-angular
第二步：创建工程
创建一个新的目录，并在目录下面运行
yo angular angular-project
angular-project是工程名字
然后会出现如下图：
根据需要选择使用Grunt还是Gulp，和是否需要Sass和Bootstrap。这里选择了使用Grunt和Bootstrap。
Grunt和Gulp都是项目构建工具，不同的是Grunt是基于配置的，而Gulp是基于代码的。
然后就是安装过程，生成整个项目的框架，非常方便。
第三步：运行
运行工程，Yeoman已经使用Grunt配置好了整个项目，只需要在控制台输入
grunt serve
浏览器就会自动打开窗口，http://localhost:9000，然后就可以看到网页了。
二. 工程目录
主要开发就在app目录下面，bower_components是安装的依赖包，类似Node.js的node_modules，不同的是Node.js使用npm安装，bower_components使用bower安装。一般前端项目安装依赖使用bower。使用npm安装依赖包时，一个依赖可以有多个版本，而使用bower安装时，同一个依赖不能有多个版本。使用bower安装的依赖包可以在bower.json中看到。
Gruntfile.js是编译工程的文件，这里有很多配置，包括server的配置等，所以这里没有另外搭建后端server。
package.json是后端的依赖包，主要有Grunt的依赖包。
然后主要的开发就在app文件夹下，这里依次说明。
app/images：存储网页需要的图片。
app/scripts：前端脚本。包括controllers，services，以及程序主入口app.js文件。
app/styles：CSS样式文件。
app/views：静态页面文件。
app/404.html：页面找不到时跳转的页面。
app/favicon.ico：页面标题前的图标。
app/index.html：在这里导入CSS样式文件和所有脚本文件。
三. 创建一个页面并配置路由
使用Yeoman可以很快的创建页面对应的controller和路由。
1.安装angular-ui-router
angular-ui-router是AngularJS的第三方路由模块，比自带的angular-route路由模块好用，可以更好的实现页面跳转，嵌套路由。
安装方法：
bower install angular-ui-router --save
2.配置app/scripts/app.js文件
本来是这样的
angular
.module('angularProjectApp',[
'ngAnimate','ngCookies','ngResource','ngRoute','ngSanitize','ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'views/main.html',controller: 'MainCtrl',controllerAs: 'main'
})
.when('/about',{
templateUrl: 'views/about.html',controller: 'AboutCtrl',controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
将"ngRoute"改为"ui.router"，配置路由的格式也修改为
angular
.module('angularProjectApp','ui.router','ngTouch'
])
.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('main',{
url: '/',templateUrl: '/views/main.html',controller: 'MainCtrl'
})
.state('about',{
url: '/about',templateUrl: '/views/about.html',controller: 'AboutCtrl'
}};
}]);
3.创建一个新的页面
yo angular:route Page
可以看到app/scripts/controllers文件夹下多个一个page.js文件，
app/views文件夹下多了一个page.html文件，
app/index.html中增加了一行
<script src="scripts/controllers/page.js"></script>
index.html需要导入所有脚本文件，Yeoman帮我们自动导入了。
Yeoman还提供了很多自动创建的方法，
yo angular:controller [name]， 自动创建一个controller
yo angular:directive [name]，自动创建directive，directive可以自定义指令
yo angular:service [name]，自动创建一个service，一般在service中向服务器端发送请求获取数据
yo angular:filter [name]，自动创建filter，filter实现对数据显示的格式设置
yo angular:view [name]，自动创建view
4.配置路由
$stateProvider
.state('main',{
url: '/',controller: 'MainCtrl'
})
.state('about',{
url: '/about',controller: 'AboutCtrl'
})
.state('page',{ //此处为页面名字，可以自定义页面名字，在路由跳转时使用
url: 'page',//自定义路由
templateUrl: '/view/page.html',controller: 'PageCtrl'
});
5.设置路由跳转
<button type="button" ng-click="goPage()">Go Page</button>
然后在main.js中添加对应的按钮事件
angular.module('angularProjectApp')
.controller('MainCtrl',['$scope','$state',function ($scope,$state) {
this.awesomeThings = [
'HTML5 Boilerplate','AngularJS','Karma'
];
$scope.goPage = function () {
$state.go('page');
}
}]);
首先通过依赖注入的方式注入两个参数，$scope和$state。
$scope其实是一个对象，存储当前页面的数据和函数，可以看作是controller和view之前的桥梁。
$state的作用实现路由跳转，通过$state.go('page')的形式就可以跳转到page页面。
'page'就是下面代码第一行的页面名字。
.state('page',{
url: '/page',templateUrl: '/view/page.html',controller: 'PageCtrl'
});
在命令行运行
grunt serve
发现此时页面成了这个样子
查看控制台也并没有报错，但是main.html的内容并没有出现，检查发现需要修改index.html，
将
<div ng-view=""></div>
<div ui-view=""></div>
这是angular-ui-router模块和angular-route的不同之处。
然后页面显示正常。
点击Go Page，也可以在浏览器地址栏直接输入"http://localhost:9000/#!/page"
