详谈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 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 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网站备份程序代码分享
2011/06/10 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
axios post提交formdata的实例
2018/03/16 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
js实现简单的秒表
2020/01/16 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
使用Python对MySQL数据操作
2017/04/06 Python
python绘制条形图方法代码详解
2017/12/19 Python
对python中return与yield的区别详解
2020/03/12 Python
Django之腾讯云短信的实现
2020/06/12 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
幼教简历自我评价
2014/01/28 职场文书
医院检讨书范文
2014/02/01 职场文书
广告语设计及教案
2014/03/21 职场文书
网络营销策划方案
2014/06/04 职场文书
2015大学迎新标语
2015/07/16 职场文书
SQL写法--行行比较
2021/08/23 SQL Server
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技