[AngularJS]使用Yeoman構建開發AngularJS項目

一. 安裝

第一步：安裝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項目，並簡單開發了一下，建立一個新的頁面並實現了路由跳轉。