摘要：一般前端項目安裝依賴使用。包括，，以及程序主入口文件。然后頁面顯示正常。這樣就實現(xiàn)了使用構(gòu)建一個項目，并簡單開發(fā)了一下，創(chuàng)建一個新的頁面并實現(xiàn)了路由跳轉(zhuǎn)。

首先需要安裝Node.js，然后使用npm安裝所需要的模塊

npm install -g grunt-cli bower yo generator-karma generator-angular

創(chuàng)建一個新的目錄，并在目錄下面運行

yo angular angular-project

angular-project是工程名字
然后會出現(xiàn)如下圖：

根據(jù)需要選擇使用Grunt還是Gulp，和是否需要Sass和Bootstrap。這里選擇了使用Grunt和Bootstrap。
Grunt和Gulp都是項目構(gòu)建工具，不同的是Grunt是基于配置的，而Gulp是基于代碼的。
然后就是安裝過程，生成整個項目的框架，非常方便。

運行工程，Yeoman已經(jīng)使用Grunt配置好了整個項目，只需要在控制臺輸入

grunt serve

瀏覽器就會自動打開窗口，http://localhost:9000，然后就可以看到網(wǎng)頁了。

主要開發(fā)就在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的依賴包。

然后主要的開發(fā)就在app文件夾下，這里依次說明。
app/images：存儲網(wǎng)頁需要的圖片。
app/scripts：前端腳本。包括controllers，services，以及程序主入口app.js文件。
app/styles：CSS樣式文件。
app/views：靜態(tài)頁面文件。
app/404.html：頁面找不到時跳轉(zhuǎn)的頁面。
app/favicon.ico：頁面標題前的圖標。
app/index.html：在這里導(dǎo)入CSS樣式文件和所有腳本文件。

使用Yeoman可以很快的創(chuàng)建頁面對應(yīng)的controller和路由。

angular-ui-router是AngularJS的第三方路由模塊，比自帶的angular-route路由模塊好用，可以更好的實現(xiàn)頁面跳轉(zhuǎn)，嵌套路由。
安裝方法：

bower install angular-ui-router --save

本來是這樣的

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"
      }};
  }]);

yo angular:route Page

可以看到app/scripts/controllers文件夾下多個一個page.js文件，
app/views文件夾下多了一個page.html文件，
app/index.html中增加了一行

index.html需要導(dǎo)入所有腳本文件，Yeoman幫我們自動導(dǎo)入了。

Yeoman還提供了很多自動創(chuàng)建的方法，
yo angular:controller [name]， 自動創(chuàng)建一個controller
yo angular:directive [name]，自動創(chuàng)建directive，directive可以自定義指令
yo angular:service [name]，自動創(chuàng)建一個service，一般在service中向服務(wù)器端發(fā)送請求獲取數(shù)據(jù)
yo angular:filter [name]，自動創(chuàng)建filter，filter實現(xiàn)對數(shù)據(jù)顯示的格式設(shè)置
yo angular:view [name]，自動創(chuàng)建view

修改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", { //此處為頁面名字，可以自定義頁面名字，在路由跳轉(zhuǎn)時使用
    url: "page",   //自定義路由
    templateUrl: "/view/page.html",
    controller: "PageCtrl"
  });

在首頁上創(chuàng)建一個按鈕，跳轉(zhuǎn)到創(chuàng)建的page.html

Go Page

然后在main.js中添加對應(yīng)的按鈕事件

angular.module("angularProjectApp")
  .controller("MainCtrl", ["$scope", "$state", function ($scope, $state) {
    this.awesomeThings = [
      "HTML5 Boilerplate",
      "AngularJS",
      "Karma"
    ];

    $scope.goPage = function () {
      $state.go("page");
    }
  }]);

首先通過依賴注入的方式注入兩個參數(shù)，$scope和$state。
$scope其實是一個對象，存儲當前頁面的數(shù)據(jù)和函數(shù)，可以看作是controller和view之前的橋梁。
$state的作用實現(xiàn)路由跳轉(zhuǎn)，通過$state.go("page")的形式就可以跳轉(zhuǎn)到page頁面。
"page"就是下面代碼第一行的頁面名字。

.state("page", {
    url: "/page", 
    templateUrl: "/view/page.html",
    controller: "PageCtrl"
  });

在命令行運行

grunt serve

發(fā)現(xiàn)此時頁面成了這個樣子

查看控制臺也并沒有報錯，但是main.html的內(nèi)容并沒有出現(xiàn)，檢查發(fā)現(xiàn)需要修改index.html，
將

這是angular-ui-router模塊和angular-route的不同之處。
然后頁面顯示正常。

點擊Go Page，也可以在瀏覽器地址欄直接輸入"http://localhost:9000/#!/page"

頁面跳轉(zhuǎn)到page頁面。

這樣就實現(xiàn)了使用Yeoman構(gòu)建一個AngularJS項目，并簡單開發(fā)了一下，創(chuàng)建一個新的頁面并實現(xiàn)了路由跳轉(zhuǎn)。