開發環境
-nodejs版本v6.10.1
-package manager使用bower
-安裝Angular版本1.3.7
-安裝Angular route版本1.3.7
-頁面呈現方式采用SPA(Single-page Application)(另介紹)
-編程模式采用MVC
-開發平臺在window 10
-開發路徑在D:\myWeb
-IDE使用WebStorm 10.0.3
一、在你的計算機安裝node.js及bower(另介紹)
二、初始化bower.json文件(另介紹)
三、現在myWeb文件夾下會多個bower.json檔案
四、安裝angular及angular route(--save的意思是把安裝的信息存到bower.json中)
bower install angular#1.3.7 --save
bower install angular-route#1.3.7 --save
五、現在myWeb文件夾下會多個bower_components文件夾，里面存放著使用bower install安裝的所有components。
六、現在手動新建一個文件夾app來放置我們未來寫的所有程序代碼。
七、假設我們現在要做一個有關訂單管理的功能，該功能的所有代碼我們新建一個文件夾order來存放，并在該文件夾下新建js及views文件夾，分別存放js及html文件；另在order下新建入口頁面index.html。
八、由于是SPA的關系，在order的項目我們設定訪問index.html，該項目下所有用到的js及css都必須在這個頁面引入。先引入angular.js及angular-route.js，前者是angular的核心代碼，后者是路由的核心代碼。
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-route/angular-route.min.js"></script>
九、接著我們在html把菜單加上。
頁面目前顯示
十、開始寫angular
1.定義一個myOrder模塊，myOrder模塊下可以定義自己的controllers、services、factories和directives等。
我們在js目錄下新建app.js來定義模塊。
angular.module('myOrder', [])
2.假定我們在order項目下有兩個頁面，一個是描述order信息，另一個描述vendor信息。
(1)建立order信息的controller及view名稱叫orderList：
由圖中可以看見我們在js下方新建文件夾controller來放置這個模塊下所有的controller，目前只有一個orderListController.js文件，該controller內部有個變量名稱pageName。
angular.module('myOrder')
.controller('orderList', [function () {
var it = this;
it.pageName = 'This is Order List page';
}])
建立order信息的頁面叫orderList.html，頁面代碼只有3行，就是顯示pageName的值。
<div>
{{ctrl.pageName}}
</div>
(2)同樣的方式我們建立vendor信息的controller及view名稱叫vendorList：
angular.module('myOrder')
.controller('vendorList', [function () {
var it = this;
it.pageName = 'This is Vendor List page';
}])
3.現在頁面都建立好了，還差一步設定路由：
首先，angular的route已經抽象成模塊ngRoute，我們使用前需要在我們的myOrder模塊內先引入，并在js文件夾下新建route.js用來設定路由。
angular.module('myOrder', [
'ngRoute'
])
接著在route.js設定orderList、vendorList及默認路由
angular.module('myOrder')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/orderList', {
templateUrl: 'views/orderList.html',
controller: 'orderList as ctrl'
});
$routeProvider.when('/vendor', {
templateUrl: 'views/vendorList.html',
controller: 'vendorList as ctrl'
})
.otherwise({redirectTo: '/'});
}])
接著在order項目的單一頁面index.html中，設定ng-app及ng-view，并依序引入app.js、route.js及controller的js檔案。
<body ng-app="myOrder">
<h2>index page</h2>
<ul>
<li><a href="#/orderList">Order page</a></li>
<li><a href="#/vendor">Vendor page</a></li>
<li><a href="#/asdfsdfds">Notexistent route</a></li>
</ul>
<div ng-view></div>
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-route/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/route.js"></script>
<script src="js/controller/orderListController.js"></script>
<script src="js/controller/vendorListController.js"></script>
</body>
十一、測試小成果
待續:
gulp壓縮
