雖然今天angular5發佈了，但我仍是吧這篇angularjs（1）+webpack的文章發出來吧哈哈哈

　

 

本文爲原創，轉載請註明出處： cnzt       文章：cnzt-p

 

http://www.cnblogs.com/zt-blog/p/7779384.html

 

 

寫在前面：

　　由於最近總結本身以前作過的東西，因此順便總結了這一篇，要發佈文章時，恰好看到手機推送消息「angular5發佈啦」啊哈哈哈哈哈哈。我無論我仍是要把關於angular1的這篇文章放上來由於還涉及到webpack呢啊哈哈哈哈哈哈哈哈……　　

 

Angularjs+webpack實現模擬微信菜單編輯功能

1       環境配置：Angularjs

1.1     安裝nodejs （npm）: 略

1.2     安裝webpack （本地）

npm install --save-dev webpack

npm install --save-dev webpack@<version>

 

1.3     建立webpack配置文件

webpack.config.js

1.4     安裝angularjs

npm install angular@1.5.8  –save-dev

1.5     運行

webpack

webpack-dev-server  (webpack-dev-server --hot --inline)

http://localhost:8080/

1.6     關於熱加載：

本地開發時，設置熱加載可以實現本地更改即時反應到頁面效果。

設置時注意：

配置publicPath；

bundle.js在server中的路徑: http://localhost:8080/{publicPath}/bundle.js

 

1.7     安裝loader

Webpack自己只識別js文件，可是項目中一般除了js文件外，還有css,img,url等各類文件，loader就是爲了讓webpack也能識別這些文件並將其模塊化。

 

安裝：

npm install style-loader css-loader --save-dev

npm install file-loader --save-dev

 

(全部loader詳見package.json)

1.8     實現模塊化

Webpack是以模塊方式（入口文件+模塊依賴）管理項目的，因此咱們須要給項目加入模塊化功能，咱們採用ES6的模塊化實現方式，須要先安裝babel加載器編譯ES6:

npm install --save-dev babel-loader babel-core babel-preset-es2015

2       Angularjs

2.1     模塊

ng,ngRoute,ngSanitize,ngAnimate…

 

 

 

定義angular模塊：

angular.module('app.wxPageModule', []);

angular.module('app. wxPanelModule', []);

 

2.2     指令 v.s. 組件

Angular內置指令: ngApp, ngController, ngModel, ngView, … , {{}}

 

自定義指令--組件：

wxPanelModule.directive('wxPanel', function() {

         return {

                   restrict: 'E',   //AEC

                   templateUrl: './src/components/wxPanel/wxPanelTemplate.html',

                   link: function($scope, elm, attr, controller) {

                            //能夠操做dom，例如綁定dom事件

                   },

                   controller: function($scope, $element, $attrs) {

                            //組件的控制器

                   },

                   scope: {

                         //隔離做用域，定義組件變量

                   }

         }

})

自定義指令依賴angularjs的HTML編譯器（$compile）對元素附加一些特定的行爲。

2.3     控制器 v.s. scope

定義控制器：

wxPanelModule.controller('wxPanelCtrl', [ '$scope', function($scope){ // $scope做用域

//數據模型     

$scope.a=1; 

$scope.getA=function(){ … };  

//添加方法，能夠在模板中經過表達式或ngClick等事件調用

}])

 

做用域scope：

當一個控制器經過 ng-controller 指令被添加到DOM中時，ng 會調用該控制器的構造函數來生成一個控制器對象，這樣，就建立了一個新的子級 做用域(scope)。在這個構造函數中，做用域會做爲$scope參數注入其中，並容許用戶代碼訪問它。

 

通常狀況下，咱們使用控制器作兩件事：

1.初始化 $scope 對象

2.爲 $scope 對象添加行爲（方法）

 

控制器定義在各個模塊中，每一個控制器都有本身的做用域，所以造成一條做用域鏈，層級結構對應dom樹結構。根做用域爲$rootScope。

 

做用域提供了$watch方法監聽數據模型變化，提供了$apply（執行$digest，檢查全部由 $watch監聽的數據並將其以前的值進行比較）方法將飛angular環境中發生的數據模型改變同步到angular做用域中。 （applyàdigestàwatch）

控制器 --> 做用域 --> 視圖（DOM） 指令 --> 做用域 --> 視圖（DOM）

 

做用域的事件傳播機制：

$broadcast  $emit  $on

 

Service：

控制器應該儘量保持單純，例如獲取後臺服務數據的邏輯應該封裝在service中，經過依賴注入到controller中。Service一樣也是定義在module上面的。

2.4     雙向數據綁定

 

 

據模型始終是應用的單一數據源

髒檢查----見scope小節

2.5     依賴注入DI

 

 

 

背後是經過Injector來建立和查找依賴的。

 

注入方式：

moduleA.controller('ctrl1',['$scope','dep1', 'dep2',…, function($scope, dep1, dep2,…){ … }]);

2.6     路由 （原生 v.s. ui-router）

 

3       webpack

webpack幫助咱們綁定各個模塊，並構建出一張依賴圖。

3.1     配置

配置文件導出的是一個對象（CommonJS模塊）

 

示例：

const path = require('path');

module.exports = {

         entry: './index.js',

         output: {

                   path: path.resolve(__dirname, 'dist'),

                   publicPath: "/assets/",

                   filename: 'bundle.js'    //"bundle-[name]-[hash:8].js",

         },

         module: {

                   rules: [{

                                     test: /\.js$/,

                                     use: 'babel-loader?presets=es2015'

                            }, {

                                     test: /\.css$/,

                                     use: ['style-loader', 'css-loader']

                            }

                   ]

         }

};

 

3.2     加載器

將各類類型的文件進行模塊化，以後咱們就能夠import了。例若有了css-loader咱們就能夠直接在js文件裏import css文件。

 

特色：鏈式；可接收參數；最終返回javascript ；

 

更多loader請參考：https://webpack.js.org/loaders/

3.3     插件

插件是對loader的補充，能夠用來作優化/壓縮等，webpack自己也是也是一種插件的形式。

 

e.g.代碼壓縮：

1. 引入插件： const webpack = require('webpack');
2. new出一個新實例：new webpack.optimize.UglifyJsPlugin()

注：使用js壓縮時，最好使用數組方式依賴注入，不然可能壓縮不成功。

 

更多插件請參考： https://webpack.js.org/plugins/

 

3.4     運行

webpack

webpack-dev-server  (webpack-dev-server --hot --inline)

http://localhost:8080/

 

官網：https://webpack.js.org/concepts/

4       注意

4.1     Angular模塊 v.s. ES6模塊化

Angular模塊：

1. ng,ngRoute,ngSanitize,ngAnimate… ； 依賴注入；

 　　

 

　　2.  自定義的angular模塊，如angular.module('app.wxPageModule', []);

 

 

ES6模塊：

import …

export …

以文件爲單位

 

4.2     $watch效率

Angular進行爲實現雙向綁定，進行髒檢查時會頻繁用到$watch方法，因此不要在此方法裏作與dom相關的操做，影響效率。

一個angular頁面理想情況爲200左右的$watch，通常你們默認2000$watch爲上限(IE),這是爲了頁面更好的體驗效果，而並不意味着必定是angular dirty check上限。

 

4.3     html5Mode

$locationProvider.html5Mode(true).hashPrefix('!');

 

4.4     Webpack多個loader倒序執行

{

         test: /\.css$/,

use: ['style-loader', 'css-loader', 'postcss-loader']

}

順序：postcss-->css-->style

 

最後的最後，demo的github地址： https://github.com/tinatingzhang/angualrjs_webpack

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

angular.element(aDomElement).XXX

 

 

 

//AMD

require(['moduleA', 'moduleB'], function (moduleA, moduleB){

    alert('加載成功');

});

 

//CMD

seajs.use("../static/hello/src/main")

 

//CommonJS

module.export = {

    name:'rouwan'

}

 

//es6模塊

import {module1, module2} form './module.js';

export {module1}