上次分享完该系列文章后有朋友也建议说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中的作用及他的生命周期，我用内部分享时的总结贴出来给大家分享一下：

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学习笔记2-控制器、数据绑定、作用域的更多相关文章

  1. AngularJs 学习笔记（一）作用域

    AngularJs采用了注重时效的MVC方式,是基于MVW模式. 1.$scope和作用域的概念. AngularJs中的$scope对象是模板的域模型,也称作作用域实例,通过为其属性赋值,可以传递给 ...

  2. Angularjs 学习笔记-2017-02-06-双向数据绑定

    NG: ng-bind:  标签属性 ng-bind=" obj.xxx  " ,不会出现 用于区别{{ }} 标签,当页面未加载完毕时可以看到{{}}标签,非常不雅观,ng-bi ...

  3. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  4. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  5. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  6. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  7. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Understanding the Controller Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...

  10. AngularJs学习笔记--E2E Testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.e2e-testing 当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归 ...

随机推荐

  1. ActionBar 通用方法

    自定义actionBar布局:标题居中,左边有返回按键 <?xml version="1.0" encoding="utf-8"?> <Rel ...

  2. React介绍（讲人话）

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 21.0px "PingFang SC"; color: #616161 } span. ...

  3. AjaxPro.AjaxMethod 简单应用,

    用AjaxPro无刷新实现站内信息实时提示功能,用AjaxPro.2.dll实现表数据绑定和无刷新分页 首先,必不可少的就是dll-----AjaxPro.2 下载地址:http://down7.pc ...

  4. 使用Post方法模拟登陆爬取网页

    最近弄爬虫,遇到的一个问题就是如何使用post方法模拟登陆爬取网页.下面是极简版的代码: import java.io.BufferedReader; import java.io.InputStre ...

  5. size_t类型

    size_t在C语言中就有了.它是一种“整型”类型,里面保存的是一个整数,就像int, long那样.这种整数用来记录一个大小(size).size_t的全称应该是size type,就是说“一种用来 ...

  6. elasticsearch 不能通过9200端口访问

    修改配置文件 config/elasticsearch.yml network.host: 0.0.0.0

  7. 这是假的JS——利用CSS Animation实现banner图非交互循环播放

    话不多说,先来张html和css代码截图~ 注意事项: 1.如果想在每张图前进行停顿,可以在keyframes中的每一步前加上一小段与下一张相同的代码: 2.如果想要在实现无违和感的最后一张与第一张的 ...

  8. QUICK-AP + BETTERCAP 替换局域网内其他用户的下载文件为自定义文件

    环境需求 :kali系统 , .0版本 :quick-ap :bettercap :bettercap-proxy-modules :...... 主要环境搭建 目的:替换局域网用户的下载文件,变为我 ...

  9. js对手机软键盘的监听

    js还没有办法对手机软键盘直接进行监听的,但是可以有其他角度来判断软键盘是否弹起.比如输入框是否获取焦点等.focusin和focusout支持冒泡,对应focus和blur, 使用focusin和f ...

  10. eclipse在线安装s

    1. 打开eclipse软件,点击菜单栏的help-->Install New Software 2. 在弹出来的安装窗口中,点击add按钮,然后输入svn安装地址:http://subclip ...