AngularJS学习笔记一AngularJS简介

AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板、以及对常用工具的封装,例如$http、$cookies、$location等。我们可以到http://www.angularjs.org/下载AngularJS。

AngularJS框架的体积非常小,但是设计理念和功能却非常强大,值得前端开发者深入学习。

先来看一个小例子:

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head lang="en">
   4:      <meta charset="UTF-8">
   5:      <title></title>
   6:  </head>
   7:  <body ng-app>
   8:      <div ng-controller="HelloController">
   9:          <p>{{greeting.text}},Word</p>
  10:      </div>
  11:  <script type="text/javascript" src="angular.min.js"></script>
  12:  <script type="text/javascript">
  13:      function HelloController($scope){
  14:          $scope.greeting={text:"Hello"};
  15:      }
  16:  </script>
  17:  </body>
  18:  </html>

用任意浏览器打开可以看到:”Hello,Word“。

我们没有在输入框注册任何事件,也没有输入任何内容,就可以让UI自动刷新了。这一机制对于来自服务器的数据同样有效,

在我们控制器(HelloController )中,可以向服务器发起一次请求,获取响应,然后把$scope.greeting.text设置为服务器端返回的内容。

Angular就会自动把花括号的文本更新为新的值。

<body ng_app>
ng-app属性将用来告诉Angular页面中的哪一部分需要接受它的管理。我们把ng-app放在<body>标签上,就是告诉
 Angular,我们希望他管理body里面的所有标签,你也可以把它放到单独的标签上比如<div>上。
<div ng-controller=”HelloController ”>
在Angular中,你将会使用一种叫控制器的JavaScrip类来管理页面中的区域。在div标签中引入一个控制器,就是在声明

HelloController 将会管理介于<div>和</div>之间的所有内容。<p>{{greeting.text}}</p>通过{{}}进行数据绑定让我们可以把变量的值插入到页面的一部分中,同时能保证它会自动同步。Angular还有ng-repeat指令:<div ng-repeat=”item in items”></div>它可以让div重复items。ng-model:<input ng-model=”greeting.text”>会在输入框和greeting.text之间创建数据绑定关系。{{}}与ng-model的区别是:前者为单向关系,只是输入到界面上;后者为双向绑定保持变更与模型同步,用户输入了新值就会自动更新greeting.text的值。Angular还有很多指令,我们还能自己编写指令,稍后几篇我们会详细介绍。



与其他方法相比,需要注意:

1:HTML里面没有class或者ID来标记在那里添加时间监听器。

2:当HelloController 把greeting.text设置成hello的时候,我们没有必要注册任何事件监听器或者编写任何回调函数。

3:HelloController 只是一个普通的JavaScript类,并且不需要继承Angular所提供的任何东西。

4:HelloController 可以获取到他需要的$scope对象,而没必要去创建它。

5:没有必要自己调用HelloController 的构造方法,或者指定何时去调用它。

原文地址:https://www.cnblogs.com/zsplove/p/3650588.html