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代码
Jan 01 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
百度地图api如何使用
Aug 03 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
Js和VUE实现跑马灯效果
May 25 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
jQuery实现计算器功能
Oct 19 jQuery
纯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 随机生成10位字符代码
2009/03/26 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
javascript模拟命名空间
2015/04/17 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python函数形参用法实例分析
2015/08/04 Python
Python3最长回文子串算法示例
2019/03/04 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
使用Tkinter制作信息提示框
2020/02/18 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
物流管理应届生求职信
2013/11/07 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
普通党员对照检查材料
2014/09/24 职场文书
北大自主招生自荐信
2015/03/04 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python