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

上次分享完该系列文章后有朋友也建议说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>
时间: 2024-07-29 16:48:56

AngularJs学习笔记2-控制器、数据绑定、作用域的相关文章

AngularJs 学习笔记(一)作用域

AngularJs采用了注重时效的MVC方式,是基于MVW模式. 1.$scope和作用域的概念. AngularJs中的$scope对象是模板的域模型,也称作作用域实例,通过为其属性赋值,可以传递给函数进行渲染,$scope对象可以精准地控制域模型的数据和操作. 2.Controller控制器 其本质就是一个JavaScript函数,不需要扩展任何AngularJs的类或者API.其主要职责是初始化作用域实例,包括提供模型的初始值和增加UI相关的行为来扩展$scope对象.在设定模型初始值的时

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser

-_-#AngularJS学习笔记

AngularJS学习笔记 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .done{display:none} .ignore{color:#999} </style> <ul> <li class="

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

(yii学习笔记)控制器权限控制

public function filters() { return array( 'accessControl', // per 'postOnly + delete', // ); } public function accessRules() { return array( array('allow', // allow all users to pe 'actions'=>array('index','view'), 'users'=>array('*'), ), array('all

Symfony2 学习笔记之控制器

一个controller是你创建的一个PHP函数,它接收HTTP请求(request)并创建和返回一个HTTP回复(Response).回复对象(Response)可以是一个HTML页面,一个XML文档,一个序列化的JSON数组,一个图片,一个重定向,一个404错误或者任何你想要的内容.controller中可以包含任何渲染你页面内容的所需要的逻辑. 下面是一个controller最简单的例子,仅仅打印一个Hello world! use Symfony\Component\HttpFounda

AngularJs学习笔记--Guide教程系列文章索引

在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看不懂,希望大家在参观的过程中指出其中的错误).经过1个多月断断续续的努力,终于把Guide里面的文章基本上都弄出来.Guide中的部分章节,由于重复的部分似乎有点多,而且篇幅较短,这里就没有列出来. 文章列表如下: AngularJs学习笔记--bootstrap AngularJs学习笔记--ht