详谈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小实验之函数引用
Nov 17 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
vue实现拖拽效果
2019/12/23 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Python中序列的修改、散列与切片详解
2017/08/27 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
P/Invoke是什么
2015/07/31 面试题
建筑班组长岗位职责
2014/01/02 职场文书
推荐信格式要求
2014/05/09 职场文书
环保倡议书50字
2014/05/15 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
机动车交通事故协议书
2015/01/29 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
详解Vue router路由
2021/11/20 Vue.js
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
Python+tkinter实现高清图片保存
2022/03/13 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python