详谈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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
prototype 学习笔记整理
Jul 17 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 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 shell命令合并图片的代码
2011/06/23 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
详谈javascript异步编程
2016/02/21 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
node 使用 async 控制并发的方法
2018/05/07 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
Python MD5文件生成码
2009/01/12 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python中提高pip install速度
2020/02/14 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
室内拓展活动方案
2014/02/13 职场文书
微电影大赛策划方案
2014/06/05 职场文书
授权委托书
2014/07/31 职场文书
优秀党员申报材料
2014/12/18 职场文书
升学宴学生致辞
2015/07/27 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
利用js实现简单开关灯代码
2021/11/23 Javascript