AngularJS入门 | blog of purplebamboo

文章目录

1. 简短入门的例子
2. 简单的分析

记录下学习angular的历程，也希望帮助到其他人。

简短入门的例子

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

效果是这样：
todo

很简短的例子。可以看到一行代码都没写，就实现了修改文本框的同时，更新下面的文本了。

如果我们自己实现的话需要：

监听input的keyup事件。获取输入的值。
执行dom操作，先获取h1的内容，再正则replace字符串，最后再注入到dom节点里。

而用了angular，你只要简单的写几个标记就好了。

妈妈再也不用担心烦人的dom操作了。

简单的分析

我们来看看页面里有什么?

ng-model angular里面的Directive，什么叫Directive？别急，后面会介绍，这边你只要知道，所有ng-开头的都是Directive就行了，它主要会给dom节点提供一些功能。这边的ng-model就是用来在当前的环境下注册数据对象的。这边的意思是说，将当前input里面的内容赋值到当前环境下的数据层变量yourName

{{yourName}}angular里面的Markup，其实说白了就是模板标记，支持简单的js语法，这边会用数据层里面的yourName变量来注入到这边。

ng-app本质上说它也是个Directive，他的功能是启动整个app，可能大家会说什么叫启动。是这样的，angularjs在页面载入后会遍历dom，它是从有ng-app的节点一层层遍历下去的。

整个的流程是这样:

angular读到ng-app =》遍历整个子节点 =》遇到ng-model，注册数据提供者 =》遇到{{}}，注册模板班的渲染节点 =》建立模板到数据层的关联

这边有个双向绑定的机制，什么叫双向绑定呢。说白了就是我变你也变，你变我也变。我们是一体的。传统的模板技术，都是更改了数据层model，模板变化，而模板的变化却不能更改数据。angularjs很好的实现了双向修改的处理。view的变化也会反作用到model层上。这边的情况就是当input的值变化会反作用到数据层，数据层再更新下面的{{}}模板。

下面我们开始通过一步步建立一个通讯录系统来熟悉angularjs的各种简单使用。