一. 裝置

第一步：裝置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', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ui.router',
    'ngSanitize',
    '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.設置路由

修正app/scripts/app.js文件

$stateProvider
  .state('main', {
    url: '/',
    templateUrl: '/views/main.html',
    controller: 'MainCtrl'
  })
  .state('about', {
    url: '/about',
    templateUrl: '/views/about.html',
    controller: 'AboutCtrl'
  })
  .state('page', { //此處為頁面名字，能夠自定義頁面名字，在路由跳轉時運用
    url: 'page',   //自定義路由
    templateUrl: '/view/page.html',
    controller: 'PageCtrl'
  });

5.設置路由跳轉

在首頁上建立一個按鈕，跳轉到建立的page.html

<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”

頁面跳轉到page頁面。

如許就完成了運用Yeoman構建一個AngularJS項目，並簡樸開闢了一下，建立一個新的頁面並完成了路由跳轉。