目录导读:

  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. C++模板编程:如何使非通用的模板函数实现声明和定义分离

    我们在编写C++类库时,为了隐藏实现,往往只能忍痛舍弃模版的强大特性.但如果我们只需要有限的几个类型的模版实现,并且不允许用户传入其他类型时,我们就可以将实例化的代码放在cpp文件中实现了.然而,当我 ...

  2. Android SearchView 自定义SearchIcon和字体颜色大小

    自定义SearchView的搜索图标和字体属性相对复杂一些,记下来. 一.自定义SearchIcon 1.API版本低于21:版本小于21时,要修改SearchIcon比较复杂,需要先获取到Searc ...

  3. 解析大型.NET ERP系统 权限模块设计与实现

    权限模块是ERP系统的核心模块之一,完善的权限控制机制给系统增色不少.总结我接触过的权限模块,以享读者. 1 权限的简明定义 ERP权限管理用一句简单的话来说就是:谁 能否 做 那些 事. 文句 含义 ...

  4. ERP程序开发中遇到的六种错误

    经常回顾同事写的代码,发现一些问题,总结分析,用于员工培训,或系统优化方面的内容教学. 文中有问题的的代码我用黑体字标识. 1 界面与逻辑代码混淆 这是目前发现的比较严重的问题.框架花费了很大的力气, ...

  5. Enterprise Solution 生成实体数据访问接口与实现类型 Code Smith 6.5 模板文件下载

    数据库表定义为SalesOrder,用LLBL Gen Pro生成的实体定义是SalesOrderEntity,再用Code Smith生成的数据读写接口是ISalesOrderManager,最后是 ...

  6. EntityFramework linq 多条件查询,不定条件查询

    一.场景描述: 开发的时候,有些查询功能,往往查询的条件是不确定的,用户没有填的不参与到查询中去. 如图1所示,用户可能只要给根据名称来查询即可,有时候开始时间和结束时间并不需要填写. 图 1 二.解 ...

  7. cookie——小甜品

    Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明.Cookie英文意指饼干,不过在电脑术语中它可不像饼干那么简单.简单的说,Cookie就是服务器暂存放在你计算机上的一 ...

  8. 使用SuperSlide 实现标签切换

    小颖之前还写过一篇jquery实现标签切换的文章  jquery实现Tab选项卡菜单 今天小颖逛博客园时看到了用SuperSlide 实现标签切换的文章,所以小颖就自己试了下,试了后发现SuperSl ...

  9. windows 环境下nginx + tomcat群 + redis 实现session共享

    nginx作为负载均衡根据定义将不同的用户请求分发到不同的服务器,同时也解决了因单点部署服务器故障导致的整个应用不能访问的问题 在加入nginx之后,如果多个服务器中的一个或多个(不是全部)发生故障, ...

  10. DDD 领域驱动设计-领域模型中的用户设计

    上一篇:<DDD 领域驱动设计-如何控制业务流程?> 开源地址:https://github.com/yuezhongxin/CNBlogs.Apply.Sample(代码已更新,并增加了 ...