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基本过滤选择器使用介绍
Apr 18 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
前端性能优化建议
Sep 17 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
新闻分类录入、显示系统
2006/10/09 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python3.x上post发送json数据
2018/03/04 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
Python面向对象之Web静态服务器
2019/09/03 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
学生实习证明模板汇总
2014/09/25 职场文书
先进班集体申报材料
2014/12/26 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
校运会加油稿大全
2015/07/22 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL