Angular 1.x个人使用的经验小结


Posted in Javascript onJuly 19, 2017

前言

angular1.x作为经典的mvc框架,可以创建能够复用的组件,也可进行双向数据绑定。国内的vue.js/avaloon.js都是同类型的框架,之前工作以Angular1.x为主,主要做业务系统,以后工作中技术栈可能以vue为主,在此对Angular1.x的使用做一个简单总结,这里使用1.5+版本。下面话不多说,来一起看看详细的介绍:

基本概念

 1、依赖注入

依赖注入,在angular中到处可见,这里不会照本宣科,只以很直白的方式的简单描述基本使用方式,以$scope注入为例。

创建一个controller,注入$scope,有三种写法:

1)隐式注入

function HomeController($scope){};

2)内联注入

app.controller('HomeController',['$scope',function($scope){ }])

3)显式注入

app.controller(‘HomeController',HomeController);

HomeController.$inject=[‘$scope'];

function HomeController($scope){

}

注意:由于第一种注入方式,是通过对函数做toString操作,然后使用正则匹配出参数名称,来实现注入,所以这种方式不能对代码进行压缩混淆处理。

 2、directive

指令系统,我认为是angular1.x版本中最强大也是最复杂的部分,angular作者本身做后端出身,所以在整个指令周期也符合语言处理过程:经过编译(compile函数,会返回link函数)、链接处理(link函数)。

1)指令最基本配置

app.directive(‘dire',function(){

return function(){

return {



template/templateUrl:'', //模版



scope:{} //为true或为对象表示隔离作用域



restrict 'ACEM'//使用方式



link:function(scope,ele,attrs,controllers){}



compile:function(ele,attr){return function(){}}//如果此函数存在,link函数会被忽略,因为compile函数会返回link函数



}


}

});

2)关于绑定策略

独立作用域父子作用域之间交换数据的方式,主要有三种(或说四种)

@绑定,指令属性的值可以使用表达式,但是得出来的值一定是字符串;

&绑定,表示引用绑定,主要绑定父作用域中函数,实现关注点的注入

=绑定,表示双向数据绑定

<绑定,表示单向绑定

注意:对于&绑定的使用,主要是为了实现子作用域到父作用域的传递,个人比较喜欢vue中父子交互的方式:props in,event out。所以这里我一般使用 scope.$emit(‘xxx',data),来实现子传父。

3、component

component是1.5+新增的方法,主要为了往angular2+的过度更自然一些,相当于指令restrict:'E'的简化,类似于vue中的component,不建议操作dom,一般只用于渲染,建议构建pure component。

4、controller

controller可以认为是一个封装程序逻辑的地方,这里和后端mvc中controller的作用类似,拿到modal,渲染模版,在angular中$scope是连接controller和view的桥梁,$scope是实现数据绑定的基础,详见文档,这里不再赘述。

controller创建方式,主要分为静态工厂方法注册和动态注册:

1)静态注册:

app.controller(‘HomeController',function(){})

2)动态注册:

$controllerProvider.register(“HomeController”,function(){})

注意:动态注册是实现按需加载的基础,在项目结构实战模块会基于requirejs 来演示怎么实现动态按需加载controller(当然也可以使用oclazyload模块实现按需加载)。

5、service

service一般是封装通用代码,所谓通用代码一般是跨controller/directive等使用的代码,所以经常用来封装ajax接口访问、工具接口等。

service创建方式有三种:

1)、provider最原始的创建方式,可以注入到config中,加上provider后缀,有固定格式,必须返回$get函数

2)、factory是对provider的封装,直接返回对象即可

3)、service是最简单的创建方式,通过传递构造函数来创建服务。

6、filter

过滤器主要实现对象的格式化

7、router

内置路由模块ngRoute,用的较少,主要因为无法实现复杂路由比如嵌套,多层等,当然也可以结合ng-include实现类似效果,推荐使用第三方路由模块ui-router,ui-router是基于state的一种路由框架,是使用最多的一种路由模式。

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 图片轮播(5张图片)
Dec 30 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 #Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 #Javascript
vue引入swiper插件的使用实例
Jul 19 #Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 #Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 #Javascript
JS设置随机出现2个数字的实例代码
Jul 19 #Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
You might like
PHP获取网站域名和地址的代码
2008/08/17 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
mysql总结之explain
2012/02/27 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
Python中asyncore的用法实例
2014/09/29 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python3爬取torrent种子链接实例
2020/01/16 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
基于python检查矩阵计算结果
2020/05/21 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
小溪流的歌教学反思
2014/02/13 职场文书
道德模范先进事迹
2014/02/14 职场文书
管理建议书范文
2014/05/13 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
文明礼貌主题班会
2015/08/14 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
灵能百分百第三季什么时候来?
2022/03/15 日漫