1 開發(fā)實踐

AngularJS體驗式編程系列文章

http://blog.fens.me/series-angular/

AngularJS實戰(zhàn)

http://www.imooc.com/learn/156

1.1 工程搭建

AngularJS從構(gòu)建項目開始

http://blog.fens.me/angularjs-yeoman-project/

1.1.1 使用Yeoman自動生成工程

Yeoman官方教程：用Yeoman和AngularJS做Web應(yīng)用

http://blog.jobbole.com/65399/

1.1.1.1 Yeoman安裝

????????在安裝Yeoman之前，你需要確認以下配置：

Node.js版本在0.10以上

npm版本在1.3.7以上

????????安裝好Node之后，你就可以用命令行來安裝Yeoman了。注意：大部分情況下Yeoman是要通過命令行來操作的，不同的系統(tǒng)執(zhí)行以下命令的地方不太一樣：Mac下請使用終端，Linux下使用shell，Windows下使用Cygwin。

$ npm install--global yo

????????如果你看到了’permission errors’或者’access errors’，你需要在這條命令前面加上’sudo’。通過

$ yo? --version && bower --version && grunt --version

????????命令來檢查是不是所有東西都已經(jīng)安裝好了。在執(zhí)行完上述命令后，你應(yīng)該會看到有四個版本號會被打印出來：

????? Yeoman

????? Bower

????? Grunt

????? GruntCLI（Grunt的命令行界面）

????????適用本教程的Yeoman, Bower和Grunt版本

????安裝Yeoman生成器

????????在傳統(tǒng)的Web開發(fā)流程中，你可能會花很多時間在配置代碼模板、下載依賴還有手動組件項目文件結(jié)構(gòu)上。而Yeoman就是來簡化這個流程的！前面說的那些繁重的工作都會被交給Yeoman來完成。讓我們來試試用Yeoman來創(chuàng)建一個AngularJS項目吧！用下面這行命令進入Yeoman的菜單：

$ yo

????????用鍵盤的上下鍵來操作菜單，當選項’install agenerator’被高亮的時候按下回車鍵。接下來我們需要尋找一個合適的生成器。搜索’angular’的話，你會得到很多搜索結(jié)果。這些生成器都是由許多Yeoman開源社區(qū)貢獻的。在這個例子里，我們使用的是’generator-angular’。當選中了’generator-angular’后，按下回車執(zhí)行安裝，它所依賴的Node包就會開始被下載了。

????????如果你知道要安裝的生成器的名字，你可以直接用npm來安裝：

$ npm install -g generator-angular

????????下面是一張預(yù)覽圖：

????????這個例子使用的generator-angular版本，或者你可以直接安裝0.7.1這個版本：

$ npm install-g generator-angular@0.7.1

1.1.1.2 使用生成器搭建你的應(yīng)用

????????你可以在Yeoman的菜單中操作已經(jīng)安裝好的生成器：

$ yo

????????等一下！不要直接就運行生成器了。重新創(chuàng)建一個新的項目目錄，生成器會在這個目錄下生成出你的項目文件的。

$ mkdir mytodo

$ cd mytodo

????????執(zhí)行’yo’，選中’Run the Angular generator’，運行生成器。當你比較熟悉Yo的時候，就可以不通過菜單直接運行生成器：

$ yo angular

????????一些生成器也會提供一些有共同開發(fā)庫（common developerlibraries）的可選配置來定制你的應(yīng)用，能夠加速初始化你的開發(fā)環(huán)境。?generator-angular會詢問你需不需要使用Sass和/或者Bootstrap，使用’n'和’y'進行選擇。

????????然后你需要選擇你需要使用的Angular模塊。Angular模塊是一些帶有特定功能的獨立的JS文件。舉個例子，ngResource模塊（angular-resource.js）提供了RESTful服務(wù)。你可以使用空格鍵來取消項目。下面來看一看默認值。(當你在試用空格的效果時，確保所有的模塊都被標記為綠色)

????????好的，現(xiàn)在按下回車鍵。Yeoman將會自動構(gòu)建你的應(yīng)用、拉取需要的依賴并在你的工作流中創(chuàng)建一些有幫助的Grunt任務(wù)（GruntTasks）。幾分鐘后，我們就能正式開始啦！

1.1.1.3 由Yeoman構(gòu)建的文件目錄結(jié)構(gòu)

????????打開’mytodo’目錄，你會看到下面的文件結(jié)構(gòu)：

app/：Web應(yīng)用的父級目錄。

????index.html：Angular應(yīng)用的基準HTML文件（base htmlfile）

????404.html、favicon.ico和robots.txt：通用的Web文件，Yeoman已經(jīng)將它創(chuàng)建出來了，你不需要再手動去創(chuàng)建

????bower_components：存放項目相關(guān)的JavaScript或Web依賴，由bower安裝的

????scripts：我們的JS文件

? ? ????app.js：主程序

????????controllers：Angular控制器

????styles：我們的CSS文件

????views：Angular模板

Gruntfile.js、package.json?以及node_modules：Grunt需要使用的依賴以及配置。

test和karma.conf.js/karma-e2e.conf.js：測試框架以及針對這個項目的單元測試，包括了為控制器寫的樣板測試（boilerplatetests）。

1.2 架構(gòu)設(shè)計技巧

1.2.2 請求Service層

1.2.3 數(shù)據(jù)模型層

1.2.4 業(yè)務(wù)邏輯層

1.2.5 界面表現(xiàn)層

1.3 代碼開發(fā)技巧

1.3.1 跨html跳轉(zhuǎn)到某一個業(yè)務(wù)模塊

$window.location.href = 'registerIndex.html#/userInfoInput';

var registerModule = angular.module("registerModule", ['ui.router', 'hj-User', 'hj-Message', 'ngAnimate', 'hj-Loadding']).config(function($stateProvider,$urlRouterProvider){

??????????????????????? $urlRouterProvider.otherwise("mobileInput");? ?

??????????????????????? $stateProvider.state('mobileInput',{

??????????????????????????????????????????????????????????????????????? url: '/mobileInput',

??????????????????????????????????????????????????????????????????????? templateUrl: 'registerStep1.html',

??????????????????????????????????????????????????????????????????????? controller: 'sendMsgCtr'

??????????????????????????????????????????????????????????? }).state('vrfMsg',{

??????????????????????????????????????????????????????????????????????? url: '/vrfMsg',

??????????????????????????????????????????????????????????????????????? templateUrl: 'registerStep2.html',

??????????????????????????????????????????????????????????????????????? controller: 'vrfMsgCtr'

??????????????????????????????????????????????????????????? }).state('userInfoInput', {

??????????????????????????????????????????????????????????????????????? url: '/userInfoInput',

??????????????????????????????????????????????????????????????????????? templateUrl: 'registerStep3.html',

??????????????????????????????????????????????????????????????????????? controller: 'userInfoInputCtr'

??????????????????????????????????????????????????????????? }).state('passwordInput',{

??????????????????????????????????????????????????????????????????????? url: '/passwordInput',

??????????????????????????????????????????????????????????????????????? templateUrl: 'registerStep4.html',

??????????????????????????????????????????????????????????????????????? controller: 'passwordInputCtr'

??????????????????????????????????????????????????????????? });

});

原理解析：

? ? ? ? 其實AngularJS的頁面內(nèi)的內(nèi)容切換，也是基于html的錨點機制來實現(xiàn)的，不同錨點對應(yīng)顯示不同html部分的內(nèi)容。

1.3.2 頁面回退

????????下面方法不好用，不如直接用history對象操作簡單：

window.history.back();

window.history.go(-1);

在angularJS中實現(xiàn)返回前一頁

http://blog.csdn.net/qianqianyixiao1/article/details/51146519

AngularJs返回前一頁面時刷新一次前面頁面

http://blog.csdn.net/ywl570717586/article/details/50505536

html

app

???angular.module('ConsoleUIApp', ['ui.router','ui.bootstrap'])

???????.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {

??????????? // For any unmatched url, redirect to /state1

???????????$urlRouterProvider.otherwise("/home");

???????????$stateProvider

???????????????.state('home', {

???????????????????url: "/home",

???????????????????templateUrl: "views/home.html",

??????????????????? controller: 'HomeCtrl'

??????????????? })

???????????????.state('testing', {

???????????????????url: "/testing",

???????????????????templateUrl: "views/testing.html",

???????????????????controller: 'TestingCtrl'

??????????????? })

? ??????})

???????.run(function($rootScope, growl, $state, $stateParams) {

???????????$rootScope.$state = $state;

???????????$rootScope.$stateParams = $stateParams;

???????????$rootScope.$on("$stateChangeSuccess",? function(event, toState, toParams, fromState, fromParams) {

??????????????? //to be used for back button won't work when page is reloaded.

???????????????$rootScope.previousState_name = fromState.name;

???????????????$rootScope.previousState_params = fromParams;

??????????? });

????????? ??//back button function called from back button's ng-click="back()"

? ? ? ? ? ? $rootScope.back = function() {//實現(xiàn)返回的函數(shù)

? ? ? ? ? ? $state.go($rootScope.previousState_name,$rootScope.previousState_params);

? ? ? ? ? };

??????? });

controller：

???? $scope.sub =function(addRode) {

???? $rootScope.back()//直接使用

???? }

https://github.com/angular-ui/ui-router/issues/92

1.3.3 路由變化監(jiān)控

AngularJS中l(wèi)ocationchange、routechange事件

http://blog.csdn.net/spy19881201/article/details/17096675

[javascript]AngularJS-需要$routeChangeStart和$locationChangeStart的一些組合

http://www.itstrike.cn/Question/f341de90-c2ae-4d71-b0e6-c547c92fb4bf.html

1.3.4 路由攔截與重定向

????????路由攔截的原理在于監(jiān)聽$stateChangeStart或者$locationChangeStart事件，在此事件中對即將跳轉(zhuǎn)的路由狀態(tài)進行攔截解析并做重定向處理。

//??? function(event, toState, toParams, fromState, fromParams)

??? $rootScope.$on('$stateChangeStart', function(event){

??????? var toState = arguments[1];

??????? var toParams = arguments[2];

??????? var fromState = arguments[3];

??????? var fromParams = arguments[4];

??????? if(toState.name =="myIndexNoOn"){

??????????? if(hj.UserUtil.checkLoginStatus())

??????????? {

??????? ????????$state.go("infoIndexOn");

??????????? }

??????? }

??????? else{

??????????? //This will load the current route first (ie: '/home'), and then

??????????? //redirect the user to the correct 'login' route.

??????? }

??? });

1.3.5 頁面Loading生命周期事件

????View Load Events視圖加載事件

????$viewContentLoading- 當視圖開始加載，DOM渲染完成之前觸發(fā)，該事件將在$scope鏈上廣播此事件。

$scope.$on('$viewContentLoading',function(event,?viewConfig){

????//?Access?to?all?the?view?config?properties.

????//?and?one?special?property?'targetView'

????//?viewConfig.targetView?

});

????? $viewContentLoaded-當視圖加載完成，DOM渲染完成之后觸發(fā)，視圖所在的$scope發(fā)出該事件。

$scope.$on('$viewContentLoaded',function(event){?...?});

$scope.$watch('$viewContentLoaded',function(event){?...?});

1.3.6 依賴注入的順序與方法參數(shù)的引用屬性必須保持一致

????????如上圖就是錯誤寫法，這樣會導(dǎo)致構(gòu)造方法入?yún)㈩愋褪清e的?。。?/p>

????原因分析：

????????AngularJS中注入依賴，本質(zhì)上也是根據(jù)類名去尋找對應(yīng)類的代碼邏輯地址，如果有多個對象注入，在初始化方法中，必須是按照注入順序傳遞進來，因為JS是無類型的，切記切記。

1.3.7 Service的Factory聲明方式使用

AngularJS中service，factory，provider的區(qū)別

http://my.oschina.net/tanweijie/blog/295067

簡介AngularJS中使用factory和service的方法

http://www.xker.com/page/e2015/06/199141.html

使用Factory創(chuàng)建復(fù)制數(shù)據(jù)對象單例：

assetIndex.factory("assetData", function($rootScope, hjFundService) {

? ?var assetObj = {

??????? totalAsset : '----',

??????? yestodayProfit : '----',

??????? totalProfit : '----',

??????? zqAsset : '----',

??????? fundAsset : '----',

??????? highAsset : '----',

??????? mpData : {},

??????? mpSize : 0,

??????? mpIndexUrl : '../account/mpIndex.html'

??? };

??? assetObj.reloadAssetData = function(callback, callbackError){

??????? //數(shù)值在頁面失去焦點后被釋放了，在此重新獲取一次，保險一點

??????? var hjUserId = hj.UserUtil.getCmfUserId();

??????? if(!hjUserId) return;

??????? var promise = hjFundService.queryTotalAsset({

? ? ? ? ? ? userId: hjUserId

??????? });

??????? promise.then(function(data) {

??????????? assetObj.totalAsset = data.totalAsset;

??????? }, function(e) {

??????????? assetObj.totalAsset = '----';

??????? });

??? ????……

??????? promise = hjFundService.queryMyMpList({

? ? ? ? ? ? userId: hjUserId

??????? });

??????? promise.then(function(data) {

??????????? assetObj.mpData = data;

??????????? assetObj.mpSize =data.mpList.length;

????? ??????assetObj.mpIndexUrl ='../account/mpIndex.html';

??????????? if(callback)

??????????? {

??????????????? callback();

??????????? }

??????? }, function(e) {

??????????? assetObj.mpSize = 0;

??????????? if(callbackError)

??????????? {

???????????? ???callbackError();

??????????? }

??????? });

??? };

??? return assetObj;

});

1.3.8 圖片輪播代碼

1.3.9 控件查詢

var scrollObj = document.querySelector('.fundVoteLists');

1.3.10 登錄退轉(zhuǎn)后，回退到頁面，頁面事件響應(yīng)失效問題

????問題：

????????從購買頁面做重定向到登錄頁，再從登錄頁登錄成功回到購買頁面，購買頁面的事件響應(yīng)失效。

????原因分析：

????????在controller加載時，碰到登錄失效時，雖然要跳轉(zhuǎn)到登錄頁，但是當前runloop周期內(nèi)，還是應(yīng)該繼續(xù)執(zhí)行剩余代碼，因為事件綁定邏輯都要執(zhí)行完，不然頁面回退回來，就會發(fā)現(xiàn)事件無法響應(yīng)。