最近在学习angularJS，就买了一本《AngularJS即学即用》作为自己的入门书籍，到目前为止看了两章的内容，感觉这本书还是不错的，东西讲的浅显易懂。之所以写这篇文章，一是督促自己能够坚持学习，二是能够给自己一个回头复习的机会，同时也希望能够帮到想学习Angular的同学一二。

这个系列的文章都是采用“笔记+个人理解”的方式来写。会把比较重要的内容摘抄出来，同时有的地方也会谈谈个人理解。
作为第一篇，主要做一个angular入门，结合一个入门示例，了解一下如何构建AngularJS应用：
 <!DOCTYPE html>

 <html ng-app=""> <!-- 通过ng-app指令来启动AngularJS,它的作用是指定HTML中哪一部分归AugularJS控制 -->

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body>

         <h1>Hello {{1 + 2}}</h1>

     </body>

     <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

 </html>

要构建一个AngularJS应用：

（1）第一步引入AngularJS库，可以是CDN，也可以是本地，我这里是本地

<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

（2）告诉页面中的哪一部分受AngularJS控制，启动AngularJS

在AngularJS中，我们可以手动指定AngularJS的控制范围，通过“ng-app”指令
在之前的示例中，我们在<html>的开始标签中添加了“ ng-app='' ”，通过这个指令达到两个目的：
    - 指定AngularJS的控制范围
    - 启动AngularJS
这个指令是可以传入一个参数的，这个参数就是angularJS的模块的名称，这个到了模块再说。
当我们指定<html>标签为AngularJS的控制范围时，<html>标签中的所有子节点都处于AngularJS的控制下。
 
除了以上两点之外，我们还注意到了一个特殊的地方——{{ 1+2 }}
花括号在AngularJS中表示数据绑定。这种数据绑定可以是单向的数据绑定，也可以是某个表达式。
    - 如果是一个变量（单向的数据绑定），那么当这个变量的值改变时，UI会随之变化。
    - 如果是一个表达式，则AngularJS会将计算后的值呈现在UI上。
看懂了入门示例，再看一个示例：
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body ng-app="">

         <!--

             ng-model指令：用于获取用户输入的值并存储在name变量中

         -->

         <input type="text" placeholder="请输入你的姓名" ng-model="name" />

         <!--

             ng-bind指令：与{{}}是等价的

         -->

         <h1>Hello，<span ng-bind="name"></span></h1>

         <h1>Hello，{{name}}</h1>

     </body>

     <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

 </html>
除了之前说到过的“ng-app”指令，这个例子中新出现了“ng-model”和“ng-bind”指令。
 
（1）ng-model指令：这个指令可以用于输入控件中，当用户想要输入数据或者从JavaScript变量中获取值时都可以使用它。
 
    ng-model="name"在此例中表示将获取到的值（input）传递给name变量。
 
（2）ng-bind指令：和“{{}}”的作用是一样的，绑定数据。但是ng-bind和{{}}在效率上会有一些差异，我们需要了解以下两点：
 
    ① “{{}}”在AngularJS执行时，会先转换成ng-bind再执行，所以效率会低，但是写法简单。
    ② 使用“{{}}”来绑定数据时，在UI上“{{}}”会一闪而过。虽然比较短，还是可以发现的。解决办法是在使用了“{{}}”的元素上添加一个样式“ng-cloak”，这是一段样式，作用就是先把这段元素隐藏起来，等转换结束后再显示，样式代码核心就是“display:none !important;”最好是自己写，也可以用AngularJS定义好的，但是这样需要在开头先引入AngularJS文件

《AngularJS即学即用》读书笔记（一）的更多相关文章

  1. 《html5 从入门到精通》读书笔记（一）

    今天看了<html5 从入门到精通>这本书,感觉阅读下来很舒心,不像阅读其他书籍很揪心.html增加的知识点,我觉得非常有价值,看完几章记录了一些内容,不但能巩固,也为下次遗忘知识点做好准 ...

  2. HTML5从入门到精通(明日科技) 中文pdf扫描版

    HTML5从入门到精通(明日科技) 中文pdf扫描版

  3. HTML5从入门到精通（千锋教育）免费电子版+PDF下载

    本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...

  4. Unity Shader入门精要读书笔记（一）序章

    本系列的博文是笔者读<Unity Shader入门精要>的读书笔记,这本书的章节框架是: 第一章:着手准备. 第二章:GPU流水线. 第三章:Shader基本语法. 第四章:Shader数 ...

  5. Oracle从入门到精通----学习笔记

    书名:<Oracle从入门到精通:视频实战版>秦靖.刘存勇等编著 第4章 SQL基础 1.SQL语言分类 数据定义语言 --- DDL,Data Definition Language 数 ...

  6. MySQL数据库应用 从入门到精通 学习笔记

    以下内容是学习<MySQL数据库应用 从入门到精通>过程中总结的一些内容提要,供以后自己复现使用. 一:数据库查看所有数据库: SHOW DATABASES创建数据库: CREATE DA ...

  7. Unity Shader入门精要读书笔记（二）UnityShader概述

    第三章<UnityShader概述>的读书笔记: 1.Unity Shader模板提供了几种选择: 标准光照模型(新添加的基于物理的渲染方法) 不含光照的基本的顶点.片元着色器 屏幕后处理 ...

  8. 《html5 从入门到精通》读书笔记（二）

    接着上面继续记录笔记,这次要记的知识点比较多...记录下我认为比较重要的东西. 一.表单属性 1.autocomplete属性 该属性规定form或input域应该拥有自动完成功能. <form ...

  9. 《html5 从入门到精通》读书笔记（三）

    二.标签详解 标签 描述 4 5 <form> 定义表单. 4 5 <h1> to <h6> 定义标题1到标题6. 4 5 <head> 定义关于文档的 ...

  10. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

随机推荐

  1. springboot之内嵌tomcat修改端口号

    第一种: 在配置文件中直接修改 server.port=8089 第二种: 直接定义 TomcatEmbeddedServletContainerFactory,注册bean: @Configurat ...

  2. HDU 2433 (最短路+BFS+剪枝)

    http://acm.hdu.edu.cn/showproblem.php?pid=2433 这个问题因为路径都是1,所以可以用bfs遍历 可以看这几篇文章讲解: http://blog.csdn.n ...

  3. DOM基础操作（三）

    DOM剩余的两个操作一并带来! 1.删除操作 removeChild 这个方法依然是父级调用的,参数就是要删除的子节点,其实实际上是剪切,这个方法会把我们删除掉的元素给返回,我们可以用一个变量去保存这 ...

  4. csharp: datatable get Column datatype or Column Name

    /// <summary> ///列表名 /// </summary> /// <param name="table"></param&g ...

  5. FCC上的javascript算法题之中级篇

    FCC中的javascript中级算法题解答 中级算法的题目中用到了很多js的知识点,比如迭代,闭包,以及对json数据的使用等等,现在将自己中级算法的解答思路整理出来供大家参考讨论.欢迎大家提出新的 ...

  6. kindeditor之video插件开发

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果.不仅结构小巧,而且功能强大,最主要的是它采用插件的开发管理方式,能很容易再它的基础上添加插件来实现自 ...

  7. Linux时间同步＋国内常用的NTP服务器地址

    当Linux服务需要时间戳的时候,时间同步就显得十分重要.这里介绍下,最近我使用的一个同步命令. # ntpdate s1a.time.edu.cn 国内常用的NTP地址 210.72.145.44 ...

  8. SparseArray代替HashMap

    相信大家都明白,手机软件的开发不同于PC软件的开发,因为手机性能相对有限,内存也有限,所谓“寸土寸金”,可能稍有不慎,就会导致性能的明显降低.Android为了方便开发者,特意在android.uti ...

  9. android OrmLite

    最近在使用ormlite框架进行数据库的操作,下面简单的写个demo来学习下 1.下载jar包 这里使用的是ormlite-core-5.0.jar 和 ormlite-android-5.0.jar ...

  10. .PHONY makefile中的伪目标

    我的理解: 拿clean举例,如果make完成后,自己另外定义一个名叫clean的文件,再执行make clean时,将不会执行rm命令. 为了避免出现这个问题,需要.PHONY: clean === ...