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 相关文章推荐
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
Vue中computed及watch区别实例解析
Aug 01 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
python定时器使用示例分享
2014/02/16 Python
Python greenlet实现原理和使用示例
2014/09/24 Python
python difflib模块示例讲解
2017/09/13 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
事业单位辞职信范文
2014/01/19 职场文书
总经理的岗位职责
2014/02/23 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
清扬洗发水广告词
2014/03/14 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
工人先锋号申报材料
2014/12/29 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang