详谈AngularJs 控制器、数据绑定、作用域


Posted in Javascript onJuly 09, 2017

上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1.x升级到2.x难度很大,甚至可以说重构,就向我们公司现在还在用1.x版本,所以我还是决定把这系列写完,也给自己一个整理的过程。本人现在也正在学习Angular4.0版本的学习,但是4.0用typescript及nodejs集成比较大,还有学习angular-cli脚手架的学习,所以等我学会以后准备在分享给大家。这个暂时先不讨论,今天继续给大家分享控制、数据绑定、作用域的知识点。

1、控制器:

概念:在angularJS中控制器是一个函数,用来向视图的作用域添加额外的功能,用来设置作用域的初始状态并添加自定义行为。

控制器的声明: app.controller(‘controllerName',function($scope){...})

//  控制器定义
  //  第一参数: 控制器名称, 第二个参数: 匿名函数, 传入作用域,并在作用域上添加额外功能
  app.controller('myCtrl', function($scope) {
    $scope.expression = "hello expression";
    $scope.ngbind = "hello ng-bind";
    $scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
    $scope.subCtrl = "hello subCtrl";

  });

控制器的使用:在需要的地方(html某个标签上)添加ng-controller。

<body ng-app="myapp" ng-controller="myCtrl">

从上面看控制的定义和使用还是比较简单的,但是很多人会对控制器的作用及控制器中都需要写什么代码有些不了解,有的人会把整个代码都推挤到控制器中,我个人觉得控制器只是一个页面view及mode的一个纽带,只处理一些数据绑定,事件绑定等等一些列简单的逻辑,具体的服务器访问或者数据读取等应该在服务里去实现,服务我在下次的时候会详细给大家说。

我简单对控制使用方面注意的事项整理了一下,供大家参考:

1)尽可能精简控制器和$scope相关的操作。

2)不要复用Controller,一个控制器一般只负责一小块视图。

3)不要在Controller中操作DOM,这不是控制器的职责。

4)尽量不要在Controller里做数据过滤、数据操作。

5)一般来说,Controller里不会互相调用的,控制器之间的交互会通过事件进行

2、作用域($scope)

上面控制器中也提到作用域,控制器主要跟$scope相关的操作,我简单给大家说一下作用域在AngularJs中的作用及他的生命周期,我用内部分享时的总结贴出来给大家分享一下:

详谈AngularJs 控制器、数据绑定、作用域

详谈AngularJs 控制器、数据绑定、作用域

3、数据绑定:

AngularJs数据绑定也有好几种绑定,我给大家列出来,有可能大家都用过,有可能有的朋友有些绑定没有用过。

1)表达式{{}}:

常量:{{‘const'}}
变量:{{abc}}
函数:{{func()}}

表达式:{{a+b}}

该方法是最为常见的,表达式绑定,只要在Angular的作用域范围之内Angular遇到该表达式自动解析为Html识别的表达式或者变量。

2)指令方式(ng-bind):

该绑定方式为在元素上添加ng-bind指令,然后Angular解析指令并执行该绑定。

3)ng-model:

该方式主要用在表单提交方面用的比较多,实现数据双向绑定,页面内容及model之间实现双向数据。

4)ng-bind-html:

该方式为主要针对Html元素绑定时用,因为Angularjs默认对Html标签不做解析,直接输出,所以想在页面上显示Html标签内容可以借助该绑定方法,但是该绑定需要引用一个序列化js文件。

<script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js"></script>

5)ng-bind-template:

该方式可以一次绑定多个变量及表达式。

使用场景:

首页使用ng-bind, 模板里面的页面可以使用括号 {{}},表单使用ng-model,{{}}语法的缺陷:在用户的不断刷新中是有可能看到{}的;而且在网络不好的情况下也有可能看到

如下代码为把上述五种方法的整体代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <!--引用AngularJs库  -->
  <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script>
  <!--  引入angularJs Html格式化库-->
  <script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js"></script>
</head>

<!--  数据绑定方式1、{{}} 2、指令绑定 3、ng-bind绑定 4、ng-bind-html绑定 5、ng-bind-template绑定-->

<body ng-app="myapp" ng-controller="myCtrl">
  <!--  1、表达式绑定 -->
  <h1>{{expression}}</h1>
  <!-- 2、指令绑定-->
  <h2>{{ngmodel}}</h2>
  <input type="text" ng-model="ngmodel">
  <!--  3、ng-bind绑定-->
  <h3 ng-bind="ngbind"></h3>
  <h3 class="ng-bind:ngbind"></h3>
  <!--  4、ng-bind-html绑定-->
  <h4 ng-bind-html="htmlbind"></h4>
  <!--  5、ng-bind-template -->
  <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>

</html>
<script>
  //模块定义
  // 第一个参数:应用名称,第二个参数:应用依赖模块
  var app = angular.module('myapp', ['ngSanitize']);

  //  控制器定义
  //  第一参数: 控制器名称, 第二个参数: 匿名函数, 传入作用域,并在作用域上添加额外功能
  app.controller('myCtrl', function($scope) {
    $scope.expression = "hello expression";
    $scope.ngbind = "hello ng-bind";
    $scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
    $scope.subCtrl = "hello subCtrl";

  });

</script>

以上这篇详谈AngularJs 控制器、数据绑定、作用域就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
js实现密码强度检验
Jan 15 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
vue子父组件通信的实现代码
Jul 09 #Javascript
vue2中filter()的实现代码
Jul 09 #Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 #Javascript
收藏AngularJS中最重要的核心功能
Jul 09 #Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 #Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 #Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 #Javascript
You might like
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php生成zip文件类实例
2015/04/07 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
详解js异步文件加载器
2016/01/24 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
通过C++学习Python
2015/01/20 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书