上次分享完该系列文章后有朋友也建议说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. WannaflyUnion每日一题

    ---恢复内容开始--- 1. http://www.spoj.com/problems/KAOS/ 题意:给定n个字符串,统计字符串(s1, s2)的对数,使得s1的字典序比s2的字典序要大,s1反 ...

  2. hexo摸爬滚打之进阶教程

    本文首发在我的个人博客:http://muyunyun.cn/ 写博客有三个层次,第一层次是借鉴居多的博文,第二层次是借鉴后经过消化后有一定量产出的博文,第三层次是原创好文居多的博文.在参考了大量前辈 ...

  3. 利用 os.walk() 遍历目录

    os.walk: walk(top, topdown=True, onerror=None, followlinks=False) 参数: top 要遍历的目录地址 topdown 为真,则优先遍历t ...

  4. vmware和centOS的安装

    如果勾上了,会立即在本机开辟20g的空间,需要很长时间 选择电脑中ISO镜像的位置,之后点击开启虚拟机! 这个密码是root用户的密码!管理员密码! 可以选择我们的Minimal没有界面的!

  5. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  6. 在linux中导入sql文件的方法分享(使用命令行转移mysql数据库)

    因导出sql文件 在你原来的网站服务商处利用phpmyadmin导出数据库为sql文件,这个步骤大家都会,不赘述. 上传sql文件 前面说过了,我们没有在云主机上安装ftp,怎么上传呢? 打开ftp客 ...

  7. Javascript事件模型（三）：JavaScript事件绑定方法总结（及Jquery）

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  8. Android计时器实现

    Wyy.java package com.test; import android.app.Activity;import android.app.Service;import android.os. ...

  9. less函数

    问题描述: 在编写页面时,有以下几种按钮: 这时候我们CSS代码毫无疑问写一个公共类,然后再为每个按钮增加独自的样式如下: HTML: <div class="common a&quo ...

  10. jQuery之stop()

    开启第一篇原创博客,内容朴实,但绝对属实. 先来看看w3c的定义和语法: 定义:stop() 方法停止当前正在运行的动画. 语法:$(selector).stop(stopAll,goToEnd) 参 ...