開發(fā)環(huán)境
-nodejs版本v6.10.1
-package manager使用bower
-安裝Angular版本1.3.7
-安裝Angular route版本1.3.7
-頁面呈現(xiàn)方式采用SPA(Single-page Application)(另介紹)
-編程模式采用MVC
-開發(fā)平臺(tái)在window 10
-開發(fā)路徑在D:\myWeb
-IDE使用WebStorm 10.0.3
一熬甚、在你的計(jì)算機(jī)安裝node.js及bower(另介紹)
二匙监、初始化bower.json文件(另介紹)
三贼陶、現(xiàn)在myWeb文件夾下會(huì)多個(gè)bower.json檔案
四师痕、安裝angular及angular route(--save的意思是把安裝的信息存到bower.json中)
bower install angular#1.3.7 --save
bower install angular-route#1.3.7 --save
五、現(xiàn)在myWeb文件夾下會(huì)多個(gè)bower_components文件夾故慈，里面存放著使用bower install安裝的所有components淮韭。
六、現(xiàn)在手動(dòng)新建一個(gè)文件夾app來放置我們未來寫的所有程序代碼个束。
七、假設(shè)我們現(xiàn)在要做一個(gè)有關(guān)訂單管理的功能聊疲，該功能的所有代碼我們新建一個(gè)文件夾order來存放茬底，并在該文件夾下新建js及views文件夾，分別存放js及html文件获洲；另在order下新建入口頁面index.html阱表。
八、由于是SPA的關(guān)系贡珊，在order的項(xiàng)目我們?cè)O(shè)定訪問index.html最爬，該項(xiàng)目下所有用到的js及css都必須在這個(gè)頁面引入。先引入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>
九寒随、接著我們?cè)趆tml把菜單加上糠悯。
頁面目前顯示
十、開始寫angular
1.定義一個(gè)myOrder模塊妻往，myOrder模塊下可以定義自己的controllers互艾、services、factories和directives等讯泣。
我們?cè)趈s目錄下新建app.js來定義模塊纫普。
angular.module('myOrder', [])
2.假定我們?cè)趏rder項(xiàng)目下有兩個(gè)頁面，一個(gè)是描述order信息好渠，另一個(gè)描述vendor信息昨稼。
(1)建立order信息的controller及view名稱叫orderList：
由圖中可以看見我們?cè)趈s下方新建文件夾controller來放置這個(gè)模塊下所有的controller，目前只有一個(gè)orderListController.js文件拳锚，該controller內(nèi)部有個(gè)變量名稱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.現(xiàn)在頁面都建立好了，還差一步設(shè)定路由：
首先抗楔，angular的route已經(jīng)抽象成模塊ngRoute棋凳，我們使用前需要在我們的myOrder模塊內(nèi)先引入，并在js文件夾下新建route.js用來設(shè)定路由连躏。
angular.module('myOrder', [
'ngRoute'
])
接著在route.js設(shè)定orderList剩岳、vendorList及默認(rèn)路由
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項(xiàng)目的單一頁面index.html中，設(shè)定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>
十一、測(cè)試小成果
待續(xù):
gulp壓縮
