虽然今天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)
|
作用域的事件传播机制:
$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.代码压缩:
- 引入插件: const webpack = require('webpack');
- 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模块:
- 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}
转载于:https://www.cnblogs.com/zt-blog/p/7779384.html
虽然今天angular5发布了,但我还是吧这篇angularjs(1)+webpack的文章发出来吧哈哈哈...相关推荐
- GeoServer地图开发解决方案(四):发布Web地图服务(WMS)篇
GeoServer 是 OpenGIS Web 服务器规范的 J2EE 实现的社区开源项目,利用 GeoServer 可以方便的发布地图数据,允许用户对特征数据进行更新.删除.插入操作,通过 GeoS ...
- 还在看那些老掉牙的性能优化文章么?这些最新性能指标了解下
还在看那些老掉牙的性能优化文章么?这些最新性能指标了解下 性能优化相关的文章其实网上挺多,但是大部分都是在讲如何优化性能,也就是讲方法论.但是在实际工作中,如何量化性能优化也是相当重要的一环.今天本文 ...
- 华为鸿蒙系统内部消息,华为鸿蒙系统内部曝光,并且将于年底发布?网友:还能再假点?...
自从谷歌宣布停止支持华为智能手机的安卓系统升级后,华为自主研发的鸿蒙系统,就越来越受到大众的关注. 6月27日,一个名为"鸿蒙系统信息发布平台"的网站发布消息称,鸿蒙系统预计201 ...
- 终于圆了天文梦!马化腾称腾讯将发布探星计划 还提到了《王者荣耀》
7月8日上午举行的2021世界人工智能大会开幕式上,腾讯公司董事会主席.首席执行官马化腾又不见人影,仅发来一段语音参会.这已不是马化腾第一次用语音参会,去年的世界人工智能大会上,马化腾因身体原因就未到 ...
- 5天一充不是梦!最大电池容量手机发布:朴实感人 还能防身...
在MWC2019世界移动通信大会上,很多手机厂商通过巴塞罗那的展台向世界展示着自家的硬实力和软实力,大厂小厂都发布了最新的产品,三星展示了5G手机S10 5G.折叠屏手机Galaxy Fold,华为拿 ...
- jdk13不能显示中文_JDK 13都发布了!你还在用JDK7吗?
就在昨天(2019年09月17日),JDK 13 已经处于 General Availability 状态,已经正式可用了.General Availability(简称 GA)是一种正式版本的命名, ...
- 微信Mac正式版上线!!不仅支持发布朋友圈,还能浏览朋友圈相册
微信Mac版客户端全新功能升级!!不仅支持查看朋友圈,还能发布朋友圈啦!!!微信正式版支持对朋友圈进行互动和点 赞等操作,还可以浏览朋友圈相册,这是一款运行在OS X上的 社交聊天工具,微信mac版支 ...
- 英伟达3090Ti即将发布,你的显卡还能再战多久?
英伟达GeForce RTX 3090TI公版明日发布,较RTX 3090提升约为10% 在年初召开的CES 2022上,英伟达披露了新一代旗舰显卡GeForce RTX 3090 Ti. 图源:太平 ...
- 2019日历全年一张_2020年剑桥英语全年考试日历发布,参与活动还能赢取实体台历!...
剑桥大学英语考评部正式发布2020全年考试日历(适用于中国内地的剑桥英语考试).在新的一年里,剑桥英语考试日历会陪伴大家共同成长,记录大家努力的点滴,见证英语进阶每一步. 好奇这本兼具颜值和实用性的日 ...
- 译文 | 迭代发布后,为什么还需要开迭代回顾会议?
回顾性会议是激励企业软件团队的好方法,给他们一个表达意见和被倾听的机会.在敏捷软件开发中,迭代回顾会议发生在一个迭代的最后阶段,团队应该在迭代评审后和下一个迭代计划前举行迭代回顾,在回顾会上,评估整个 ...
最新文章
- 已解决Cause: java.sql.SQLException: Incorrect string value: ‘\\xF0\\x9F\\x8C\\xB8 \\xE5...‘报错
- 基于SSM实现学籍管理系统
- 学习编程做笔记的软件_可以在图片上做笔记的软件
- Google Earth Pro 模拟飞行 分享
- 空间三维散点数据的线性拟合
- K近邻法(KNN)原理小结
- PhpStorm failed to transfer files by FTP 报错解决方法
- Redis常用数据类型和事物以及并发
- 电脑网页截长屏最简单的方法
- ADRC自抗扰控制算法(含梯形图完整源代码和算法公式)
- 南邮计算机学院复试,过来人建议:南京邮电大学考研复试注意事项
- NVMe Driver 需要装吗_厨房里的油烟很少,需要装油烟净化器吗?装哪种的比较好?...
- java的正向代理和反向代理
- Android 手机遥控器添加模拟鼠标功能
- Android 响铃与震动模式的
- 批量修改文件名字、不同的目录下
- 荣耀6 H60-L01连接上WIFI但是无法上网
- 2018中国互联网企业100强,有你想进的吗?
- 剑法三套,程序员也能挣大钱
- Cisco Zone Base FireWall介绍及配置
热门文章
- 最短路 Codeforces Round #103 (Div. 2) D. Missile Silos
- Linux内核中的jiffies及其作用介绍及jiffies等相关函数详解
- c/c++ 宏中#和##的用法
- 一个队列类的实现(比delphi自带的速度快70倍)
- mac下安装nginx及相关配置
- .net HTML编码解析
- 体验Microsoft Longhorn 和 Google Earth 带来的视觉震撼
- IMU预积分推导——公式准备
- es6 Promise -- 封装
- Centos7+LVS-DR+Apache负载均衡web实验