AngularJs学习笔记2-控制器、数据绑定、做用域

时间 2019-11-13

标签 angularjs 学习笔记控制器数据绑定栏目 AngularJS 繁體版

原文原文链接

上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习，能够学习2.0开始学习，我也知道1.x不管是从性能仍是架构上都没有2.x好，可是我想由于如今也有一些朋友还在用1.x版本，由于1.x升级到2.x难度很大，甚至能够说重构，就向咱们公司如今还在用1.x版本，因此我仍是决定把这系列写完，也给本身一个整理的过程。本人如今也正在学习Angular4.0版本的学习，可是4.0用typescript及nodejs集成比较大，还有学习angular-cli脚手架的学习，因此等我学会之后准备在分享给你们。这个暂时先不讨论，今天继续给你们分享控制、数据绑定、做用域的知识点。javascript

一、控制器：html

　　概念：在angularJS中控制器是一个函数，用来向视图的做用域添加额外的功能，用来设置做用域的初始状态并添加自定义行为。java

控制器的声明： app.controller(‘controllerName’,function($scope){...})node

//    控制器定义
    //    第一参数： 控制器名称， 第二个参数： 匿名函数， 传入做用域,并在做用域上添加额外功能
    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。typescript

<body ng-app="myapp" ng-controller="myCtrl">

　从上面看控制的定义和使用仍是比较简单的，可是不少人会对控制器的做用及控制器中都须要写什么代码有些不了解，有的人会把整个代码都推挤到控制器中，我我的以为控制器只是一个页面view及mode的一个纽带，只处理一些数据绑定，事件绑定等等一些列简单的逻辑，具体的服务器访问或者数据读取等应该在服务里去实现，服务我在下次的时候会详细给你们说。express

我简单对控制使用方面注意的事项整理了一下，供你们参考：服务器

1）尽量精简控制器和$scope相关的操做。
2）不要复用Controller,一个控制器通常只负责一小块视图。
3）不要在Controller中操做DOM，这不是控制器的职责。
4）尽可能不要在Controller里作数据过滤、数据操做。
5）通常来讲，Controller里不会互相调用的，控制器之间的交互会经过事件进行网络

　二、做用域（$scope）架构

上面控制器中也提到做用域，控制器主要跟$scope相关的操做，我简单给你们说一下做用域在AngularJs中的做用及他的生命周期，我用内部分享时的总结贴出来给你们分享一下：app

三、数据绑定：

　　　 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>

<!--   数据绑定方式一、{{}} 二、指令绑定 三、ng-bind绑定 四、ng-bind-html绑定 五、ng-bind-template绑定-->

<body ng-app="myapp" ng-controller="myCtrl">
    <!--    一、表达式绑定 -->
    <h1>{{expression}}</h1>
    <!-- 二、指令绑定-->
    <h2>{{ngmodel}}</h2>
    <input type="text" ng-model="ngmodel">
    <!--    三、ng-bind绑定-->
    <h3 ng-bind="ngbind"></h3>
    <h3 class="ng-bind:ngbind"></h3>
    <!--    四、ng-bind-html绑定-->
    <h4 ng-bind-html="htmlbind"></h4>
    <!--    五、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>