虽然今天angular5发布了，但我还是吧这篇angularjs（1）+webpack的文章发出来吧哈哈哈...

　

 

本文为原创&＃xff0c;转载请注明出处&＃xff1a; cnzt       文章&＃xff1a;cnzt-p

 

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

 

 

写在前面&＃xff1a;

　　因为最近总结自己之前做过的东西&＃xff0c;所以顺便总结了这一篇&＃xff0c;要发布文章时&＃xff0c;刚好看到手机推送消息“angular5发布啦”啊哈哈哈哈哈哈。我不管我还是要把关于angular1的这篇文章放上来因为还涉及到webpack呢啊哈哈哈哈哈哈哈哈……　　

 

Angularjs&＃43;webpack实现模拟微信菜单编辑功能

1       环境配置&＃xff1a;Angularjs

1.1     安装nodejs &＃xff08;npm&＃xff09;: 略

1.2     安装webpack &＃xff08;本地&＃xff09;

npm install --save-dev webpack

npm install --save-dev webpack&＃64;

 

1.3     创建webpack配置文件

webpack.config.js

1.4     安装angularjs

npm install angular&＃64;1.5.8  –save-dev

1.5     运行

webpack

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

http://localhost:8080/

1.6     关于热加载&＃xff1a;

本地开发时&＃xff0c;设置热加载能够实现本地更改即时反应到页面效果。

设置时注意&＃xff1a;

配置publicPath&＃xff1b;

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

 

1.7     安装loader

Webpack本身只识别js文件&＃xff0c;但是项目中通常除了js文件外&＃xff0c;还有css,img,url等各种文件&＃xff0c;loader就是为了让webpack也能识别这些文件并将其模块化。

 

安装&＃xff1a;

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

npm install file-loader --save-dev

 

(所有loader详见package.json)

1.8     实现模块化

Webpack是以模块方式&＃xff08;入口文件&＃43;模块依赖&＃xff09;管理项目的&＃xff0c;所以我们需要给项目加入模块化功能&＃xff0c;我们采用ES6的模块化实现方式&＃xff0c;需要先安装babel加载器编译ES6:

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

2       Angularjs

2.1     模块

ng,ngRoute,ngSanitize,ngAnimate…

 

 

 

定义angular模块&＃xff1a;

angular.module(&＃39;app.wxPageModule&＃39;, []);

angular.module(&＃39;app. wxPanelModule&＃39;, []);

 

2.2     指令 v.s. 组件

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

 

自定义指令--组件&＃xff1a;

wxPanelModule.directive(&＃39;wxPanel&＃39;, function() {

         return {

                   restrict: &＃39;E&＃39;,   //AEC

                   templateUrl: &＃39;./src/components/wxPanel/wxPanelTemplate.html&＃39;,

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

                            //可以操作dom&＃xff0c;例如绑定dom事件

                   },

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

                            //组件的控制器

                   },

                   scope: {

                         //隔离作用域&＃xff0c;定义组件变量

                   }

         }

})

自定义指令依赖angularjs的HTML编译器&＃xff08;$compile&＃xff09;对元素附加一些特定的行为。

2.3     控制器 v.s. scope

定义控制器&＃xff1a;

wxPanelModule.controller(&＃39;wxPanelCtrl&＃39;, [ &＃39;$scope&＃39;, function($scope){ // $scope作用域

//数据模型     

$scope.a&＃61;1; 

$scope.getA&＃61;function(){ … };  

//添加方法&＃xff0c;可以在模板中通过表达式或ngClick等事件调用

}])

 

作用域scope&＃xff1a;

当一个控制器通过 ng-controller 指令被添加到DOM中时&＃xff0c;ng 会调用该控制器的构造函数来生成一个控制器对象&＃xff0c;这样&＃xff0c;就创建了一个新的子级 作用域(scope)。在这个构造函数中&＃xff0c;作用域会作为$scope参数注入其中&＃xff0c;并允许用户代码访问它。

 

一般情况下&＃xff0c;我们使用控制器做两件事&＃xff1a;

1.初始化 $scope 对象

2.为 $scope 对象添加行为&＃xff08;方法&＃xff09;

 

控制器定义在各个模块中&＃xff0c;每个控制器都有自己的作用域&＃xff0c;因此形成一条作用域链&＃xff0c;层级结构对应dom树结构。根作用域为$rootScope。

 

作用域提供了$watch方法监听数据模型变化&＃xff0c;提供了$apply&＃xff08;执行$digest&＃xff0c;检查所有由 $watch监听的数据并将其之前的值进行比较&＃xff09;方法将飞angular环境中发生的数据模型改变同步到angular作用域中。 &＃xff08;applyàdigestàwatch&＃xff09;

控制器 --> 作用域 --> 视图&＃xff08;DOM&＃xff09; 指令 --> 作用域 --> 视图&＃xff08;DOM&＃xff09;

 

作用域的事件传播机制&＃xff1a;

$broadcast  $emit  $on

 

Service&＃xff1a;

控制器应该尽可能保持单纯&＃xff0c;例如获取后台服务数据的逻辑应该封装在service中&＃xff0c;通过依赖注入到controller中。Service同样也是定义在module上面的。

2.4     双向数据绑定

 

 

据模型始终是应用的单一数据源

脏检查----见scope小节

2.5     依赖注入DI

 

 

 

背后是通过Injector来创建和查找依赖的。

 

注入方式&＃xff1a;

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

2.6     路由 &＃xff08;原生 v.s. ui-router&＃xff09;

 

3       webpack

webpack帮助我们绑定各个模块&＃xff0c;并构建出一张依赖图。

3.1     配置

配置文件导出的是一个对象&＃xff08;CommonJS模块&＃xff09;

 

示例&＃xff1a;

const path &＃61; require(&＃39;path&＃39;);

module.exports &＃61; {

         entry: &＃39;./index.js&＃39;,

         output: {

                   path: path.resolve(__dirname, &＃39;dist&＃39;),

                   publicPath: "/assets/",

                   filename: &＃39;bundle.js&＃39;    //"bundle-[name]-[hash:8].js",

         },

         module: {

                   rules: [{

                                     test: /\.js$/,

                                     use: &＃39;babel-loader?presets&＃61;es2015&＃39;

                            }, {

                                     test: /\.css$/,

                                     use: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;]

                            }

                   ]

         }

};

 

3.2     加载器

将各种类型的文件进行模块化&＃xff0c;之后我们就可以import了。例如有了css-loader我们就可以直接在js文件里import css文件。

 

特点&＃xff1a;链式&＃xff1b;可接收参数&＃xff1b;最终返回Javascript &＃xff1b;

 

更多loader请参考&＃xff1a;https://webpack.js.org/loaders/

3.3     插件

插件是对loader的补充&＃xff0c;可以用来做优化/压缩等&＃xff0c;webpack本身也是也是一种插件的形式。

 

e.g.代码压缩&＃xff1a;

1. 引入插件&＃xff1a; const webpack &＃61; require(&＃39;webpack&＃39;);
2. new出一个新实例&＃xff1a;new webpack.optimize.UglifyJsPlugin()

注&＃xff1a;使用js压缩时&＃xff0c;最好使用数组方式依赖注入&＃xff0c;否则可能压缩不成功。

 

更多插件请参考&＃xff1a; https://webpack.js.org/plugins/

 

3.4     运行

webpack

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

http://localhost:8080/

 

官网&＃xff1a;https://webpack.js.org/concepts/

4       注意

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

Angular模块&＃xff1a;

1. ng,ngRoute,ngSanitize,ngAnimate… &＃xff1b; 依赖注入&＃xff1b;

 　　

 

　　2.  自定义的angular模块&＃xff0c;如angular.module(&＃39;app.wxPageModule&＃39;, []);

 

 

ES6模块&＃xff1a;

import …

export …

以文件为单位

 

4.2     $watch效率

Angular进行为实现双向绑定&＃xff0c;进行脏检查时会频繁用到$watch方法&＃xff0c;所以不要在此方法里做与dom相关的操作&＃xff0c;影响效率。

一个angular页面理想状况为200左右的$watch&＃xff0c;一般大家默认2000$watch为上限(IE),这是为了页面更好的体验效果&＃xff0c;而并不意味着一定是angular dirty check上限。

 

4.3     html5Mode

$locationProvider.html5Mode(true).hashPrefix(&＃39;!&＃39;);

 

4.4     Webpack多个loader倒序执行

{

         test: /\.css$/,

use: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;, &＃39;postcss-loader&＃39;]

}

顺序&＃xff1a;postcss-->css-->style

 

最后的最后&＃xff0c;demo的github地址&＃xff1a; https://github.com/tinatingzhang/angualrjs_webpack

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

angular.element(aDomElement).XXX

 

 

 

//AMD

require([&＃39;moduleA&＃39;, &＃39;moduleB&＃39;], function (moduleA, moduleB){

    alert(&＃39;加载成功&＃39;);

});

 

//CMD

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

 

//CommonJS

module.export &＃61; {

    name:&＃39;rouwan&＃39;

}

 

//es6模块

import {module1, module2} form &＃39;./module.js&＃39;;

export {module1}