目录导读:

  AngularJS 系列 学习笔记 目录篇

前言:

  好记性不如烂键盘,随笔就是随手笔记,希望以后有用。

本篇目录:

1. Hello World

2. AngularJS中的数据绑定

3. 简单的数据绑定

4. 数据绑定的最佳实践

1. Hello World

  写一个Hello World的应用是咱们接触任何一个语言的基本途径,AngularJS也是如此。

  随着学习的深入,我们会逐渐深入到AngularJS的内部原理中,现在,废话不多说,开始咱们的Hello World。

  这里我使用的JetBrains的WebStorm,打开WebStorm,选择“Create New Project”创建新项目:

  

  然后我们选择“Empty Project”新建一个空项目,选择项目存储路径,点击确定按钮即可:

  然后从AngularJS官网下载AngularJS库,并将其添加到项目中:

  新建一个HTML页面,代码如下:

 <!DOCTYPE html>
 <html ng-app>
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <input type="text" ng-model="name" placeholder="请输入您的姓名...">
     <h1>Hello, {{name}} !</h1>
 </body>
 </html>

  预览效果如下:

  虽然这个例子没什么意思,不怎么高大上,但是它展示了AngularJS最基本也是最令人印象深刻的功能之一:数据绑定。

2. AngularJS中的数据绑定

  在Rails等传统的Web框架中,控制器将多个模型中的数据和模板组合在一起形成视图,并将其提供给用户,这个组合过程会产生一个单向视图。

  如果没有创建任何自定义的JavaScript组件,视图只会体现它渲染时模型暴露出的数据。

  AngularJS则采用了完全不同的解决方案,它创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM。

  任何一个独立视图组件中的值都是动态替换的,这个功能可以说是AngularJS中最重要的功能之一,也是让咱们只用上述的12行代码,并且子啊没有任何JavaScript的情况下就可以写出HelloWorld的关键。

  要实现这个功能,只要在HTML页面中引用angular.js,并在某个DOM元素上明确设置ng-app属性即可。

  ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是咱们可以在Web应用中嵌套AngularJS应用的原因。

  只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS的影响。

  视图中的插值会在计算一个或多个变量时被动态替换,替换结果是字符串中的插值被变量的值替代。

  例如,如果有一个叫做name的变量,它的值是“Catalina”,那么视图中的“ Hello, {{name}} ! ”字符串会被换成“Hello, Catalina !”。

  自动数据绑定使我们可以将视图理解为模型状态的映射。

  当客户端的数据模型发生变化时,视图就能反映出这些变化,并且不需要写任何自定义的代码,它就可以工作。

  在MVC(Model View Controller,模型-视图-控制器)的世界里,控制器可以不必担心会牵扯到渲染视图的工作。

  这样我们就不必再担心如何分离视图和控制器的逻辑,并且也可以使测试变得既简单又哇塞。

  MVC是一种软件架构设计模式,它将表现从用户交互中分离出来。

  通常来讲,模型中包含应用的数据和与数据进行交互得方法,视图将数据呈献给用户,而控制器则是二者之间的桥梁。

  这种表现分离能将应用中的对象很好地隔离开来,因此视图不需要知道如何保存对象,只要知道如何显示它即可。

  这也意味着数据模型不需要同视图进行交互,只需要包含数据和操作视图的方法。

  控制器用来存放将二者绑定在一起的业务逻辑。

  AngularJS惠济路数据模型所包含的数据在任何特定时间点的值(在HelloWorld例子中就是name的值),而不是原始值。

  当AngularJS认为某个值可能发生变化时,它会运行自己的事件循环来检查这个值是否变“脏”。

  如果该值从上次事件循环运行之后发生了变化,则该值被认为是“脏”值。

  这也是AngularJS可以跟踪和响应应用变化的方式。

  这个过程被称作脏检查(dirty checking),脏检查是检查数据模型变化的有效手段。

  当有潜在的变化存在时,AngularJS会在事件循环时执行脏检查来保证数据的一致性。

  如果使用KnockoutJS这种通过在数据模型上绑定事件监听器来监听数据变化的框架,这个过程会变得更复杂且抵消。

  处理事件合并、依赖跟踪和大量的事件触发(event firing)是非常复杂的,而且会在性能方面导致额外的问题。

  借助AngularJS,不需要构建复杂和新的JavaScript功能,就可以在试图中实现类自动同步的机制。

  为了表示内部和内置的库函数,AngularJS使用$预定义对象。

  尽管这类似于全局的jQuery对象$,但是他们是完全无关的,只要遇到$符号,你都可以只把它看做一个AngularJS对象。

3. 简单的数据绑定

  审阅一下上面的HelloWorld代码,我们是用ng-model指令将内部数据模型对象($scope)中的name属性绑定到了文本输入字段上。

  这意味着无论在文本框中输入了什么,都会同步到对应的数据模型中。

  数据模型对象(model object)是指$scope对象。

  $scope对象是一个简单的JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互。

  如果不理解这个概念也没关系,后面的例子将会对这个概念进行详细介绍。

  双向数据绑定(bi-directional)意味着如果视图改变了某个值,数据模型会通过脏检查观察到这个变化,而如果数据模型改变了某个值,视图也会依据变化重新渲染。

  在input元素上使用ng-model指令来实现数据绑定,如下所示:

     <input type="text" ng-model="person.name" placeholder="请输入您的姓名...">
     <h1>Hello, {{person.name}} !</h1>

  这样绑定就设置好了,没错,就这么简单。瑾此而已。

  咱们可以观察一下视图是如何更新数据模型的。当 <input> 中的值发生变化时, person.name 会被更新,而视图将反映出这个更新。

  咱们仅通过视图就实现了一个双向数据绑定,为了从其他角度(后端到前端)解释双向数据绑定,后面会着重介绍控制器。

  正如 ng-app 声明所有被它包含的元素都属于AngularJS应用一样,DOM元素上的 ng-controller 声明所有被它包含的元素都属于某个控制器。

  为了解释这个概念,我们将上面的例子进行如下修改:

 <!DOCTYPE html>
 <html ng-app="myApp">
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <div ng-controller="myController">
         <h1>现在时间:{{clock}}</h1>
     </div>
 </body>
 </html>

  在这个例子中,我们会创建一个每秒钟走一步的时钟,并更新 {{clock}} 变量上的数据:

     <script>
         var app = angular.module('myApp', []);
         app.controller('myController', function($scope, $timeout) {
             var updateClock = function () {
                 $scope.clock = new Date();
                 $timeout(function () {
                     updateClock();
                 }, 1000);
             };
             updateClock();
         });
     </script>

  在这个例子中,当定时器触发时会调用updateClock()函数,将$scope.clock的值设置为当前时间。

  完整代码如下:

 <!DOCTYPE html>
 <html ng-app="myApp">
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <div ng-controller="myController">
         <h1>现在时间:{{clock}}</h1>
     </div>

     <script>
         var app = angular.module('myApp', []);
         app.controller('myController', function($scope, $timeout) {
             var updateClock = function () {
                 $scope.clock = new Date();
                 $timeout(function () {
                     updateClock();
                 }, 1000);
             };
             updateClock();
         });
     </script>
 </body>
 </html>

  尽管我们可以将所有的代码都写在一个文件里,但是由于需要将不同的组件分开开发,将代码写在一个文件中会使协同工作变得非常困难。

  通常情况下,更好的选择是将JavaScript将在单独的文件中,而不是当前额index.html页面中。

  上面的代码可以分开,修改成:

 <!DOCTYPE html>
 <html ng-app="myApp">
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <div ng-controller="myController">
         <h1>现在时间:{{clock}}</h1>
     </div>

     <script src="index.js"></script>
 </body>
 </html>
 var app = angular.module('myApp', []);
 app.controller('myController', function($scope, $timeout) {
     var updateClock = function () {
         $scope.clock = new Date();
         $timeout(function () {
             updateClock();
         }, 1000);
     };
     updateClock();
 });

4. 数据绑定的最佳实践

  由于JavaScript自身的特点,以及它在传递值和引用时的不同处理方式,通常认为,在视图中通过对象的属性而非对象本身来进行引用绑定,是AngularJS中的最佳实践。

  如果把这个实践应用到上面的例子中,需要把视图中的代码改成如下:

 <!DOCTYPE html>
 <html ng-app="myApp">
 <head>
     <meta charset="UTF-8">
     <title>Hello World</title>
     <script src="../script/angular.min.js"></script>
 </head>
 <body>
     <div ng-controller="myController">
         <h1>现在时间:{{clock.now}}</h1>
     </div>

     <script src="index.js"></script>
 </body>
 </html>

  在这个例子中,相比每秒钟都更新$scope.clock,更新clock.now的值才更完美~

  有了这个优化之后,我们将反映数据变化的逻辑作如下修改:

 var app = angular.module('myApp', []);
 app.controller('myController', myController);

 function myController($scope, $timeout) {
     $scope.clock = {
         now: new Date()
     };

     var updateClock = function () {
         $scope.clock.now = new Date();
     };

     setInterval(function () {
         $scope.$apply(updateClock);
     }, 1000)

     updateClock();
 }

  将所有的绑定都通过这样的形式放在视图中,这才完美~

AngularJS 系列 01 - HelloWorld和数据绑定的更多相关文章

  1. [.NET MVC4 入门系列01]Helloworld MVC 4 第一个MVC4程序

    [.NET MVC4 入门系列01]Helloworld MVC 4 第一个MVC4程序   一.练习项目: http://www.asp.net/mvc/tutorials/mvc-4/gettin ...

  2. Nokitjs 系列-01 - HelloWorld

    一.前言 本篇文章需要读者有一点 Node.js 基础的了解,并且已经安装了 Node.js (node.npm),但并不需要有 Nokit 的知识,本文将简单介绍 Nokitjs 的安装使用,并编写 ...

  3. AngularJS 系列 学习笔记 目录篇

    目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)

  4. AngularJS 系列 02 - 模块

    引导目录: AngularJS 系列 学习笔记 目录篇 前言: 其实,在上篇文章介绍数据绑定的时候,我们的HelloWorld的代码案例中就已经使用了模块(module).哈哈. 本篇就着重介绍一下a ...

  5. HelloWorld和数据绑定

    HelloWorld和数据绑定 目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. An ...

  6. AngularJS系列之总结

    AngularJS深入的系列就是这九篇博客了,把我以前在项目中应用到的和自己学习的都总结在了里面.为了更方便的看,把我写的AngularJS系列的博客都列到下面.之后就开始学习ionic:html5移 ...

  7. java io系列01之 "目录"

    java io 系列目录如下: 01. java io系列01之  "目录" 02. java io系列02之 ByteArrayInputStream的简介,源码分析和示例(包括 ...

  8. SAP接口编程 之 JCo3.0系列(01):JCoDestination

    SAP接口编程 之 JCo3.0系列(01):JCoDestination 字数2101 阅读103 评论0 喜欢0 JCo3.0是Java语言与ABAP语言双向通讯的中间件.与之前1.0/2.0相比 ...

  9. Java 集合系列 01 总体框架

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

随机推荐

  1. Go语言实战 - 使用SendCloud群发邮件

    山坡网需要能够每周给注册用户发送一封名为"本周最热书籍"的邮件,而之前一直使用的腾讯企业邮箱罢工了,提示说发送请求太多太密集. 一番寻找之后发现了大家口碑不错的搜狐SendClou ...

  2. 详解mmseg

    本文先介绍下mmseg的概念和算法,再说下mmseg4j-solor的3个分词器用法 1.mmseg概念 mmseg是用于中文切词的算法,即Maximum Matching Segment,最大匹配分 ...

  3. 为WLW开发Latex公式插件

    WLW是写博客的利器,支持离线.格式排版等,而且拥有众多的插件.博客园推荐了代码插入插件,但是没有提供WLW的公式编译插件.目前我的一般做法是:先在Word下使用MathType编辑好公式,然后将公式 ...

  4. SQL Server-简单查询示例(十一)

    前言 本节我们讲讲一些简单查询语句示例以及需要注意的地方,简短的内容,深入的理解,Always to review the basics. EOMONTH 在SQL Server 2012的教程示例中 ...

  5. 计算机程序的思维逻辑 (38) - 剖析ArrayList

    从本节开始,我们探讨Java中的容器类,所谓容器,顾名思义就是容纳其他数据的,计算机课程中有一门课叫数据结构,可以粗略对应于Java中的容器类,我们不会介绍所有数据结构的内容,但会介绍Java中的主要 ...

  6. 坎坷路:ASP.NET 5 Identity 身份验证(上集)

    之所以为上集,是因为我并没有解决这个问题,写这篇博文的目的是纪录一下我所遇到的问题,以免自己忘记,其实已经忘了差不多了,写的过程也是自己回顾的过程,并且之前收集有关 ASP.NET 5 身份验证的书签 ...

  7. 探寻<a>中的href和onclick

    一.知识点: onclick的方法参数必须加引号 href跳转参数有长度限制 href中执行js会把encodeURIComponent()编码之后的东西自动解码,有时会影响参数传递 a标签中的onc ...

  8. .NET 开源SqlServer ORM框架 SqlSugar 3.0 API

    3.1.x ,将作为3.X系统的最后一个版本,下面将会开发 全新的功能 更新列表:https://github.com/sunkaixuan/SqlSugar/releases 优点: SqlSuga ...

  9. OA办公自动化系统源码

    最新extjs6富客户端,.net平台开发,sql server数据库,基础权限人员基础平台,可方便二次开发,使用EF为orm,autofac为ioc,Castle为基础的aop,实现常用OA系统功能 ...

  10. js给DropdownList赋值

    ", "model": "APOLLO M/B1"}]; ; i < row.length; i++) { var addOption = do ...