时间戳

首页 > 技术文章 > AngularJS学习01--概念

AngularJS学习01--概念

walle2 2015-10-20 23:54 原文

AngularJS引入了很多新的概念，再学习之前有必要总体的了解一下这些概念

Template 模板--HTML模板
Directive 指令--自定义的属性或HTML元素对HTML进行扩展
Model 模型--用户在视图(view)中看到并与之交互的数据
Scope 作用域--Model存储的环境，通过它控制器，指令和 表达式可以访问到里面的Model
Expressions 表达式--从Scope中访问变量和函数
Compilier 编译器--解析模板并且实例化指令和表达式
Filter 过滤器--筛选或格式化表达式输出的值
View 视图--用户看到的DOM
Data-binding 数据绑定--在视图和模型之间同步数据
Controller 控制器--视图后面的业务逻辑
Dependency-Injection 依赖注入--不太好解释..囧
Injector 注入器--依赖注入的容器
Module 包含应用程序各个部分的容器，包括控制器，服务，过滤器，指令..
Services 服务--可以重复使用的独立的业务逻辑视图

Template 和 View

先来看一段代码

 1 <div ng-app ng-init="qty=1;cost=2">
 2   <b>Invoice:</b>
 3   <div>
 4     Quantity: <input type="number" min="0" ng-model="qty">
 5   </div>
 6   <div>
 7     Costs: <input type="number" min="0" ng-model="cost">
 8   </div>
 9   <div>
10     <b>Total:</b> {{qty * cost | currency}}
11   </div>
12 </div>

这就是一段普通的HTML，在AngularJS中我们称之为  Template

当AngularJS 启动之后，编译器 Compilier 开始解析编译 template， 编译之后的 template 就是 视图(View)

Data-binding

AngularJS有四种数据绑定方式

  1. ng-model: 将一个输入控件的值与scope变量绑定, 
  2. {{}}: 表达式绑定，这种绑定方式有以下几点需要注意：

表达式计算的值都是基于scope作用域的, 表达式无法访问到 window, document, location. 要做到这一点, 需要在表达式中调用的函数内使用angualr的服务 $window, $location。

下面的代码, 点击第二个按钮不会弹出。

<div class="example2" ng-controller="ExampleController">
  Name: <input ng-model="name" type="text"/>
  <button ng-click="greet()">Greet</button>
  <button ng-click="window.alert('Should not see me')">Won't greet</button>
</div>




　　3.  ng-bind: 与表达式类似, 区别在于 ng-bind是元素类型的指令, angualr 会用计算后的生成的元素来替换ng-bind 元素. 好处就是在angualr解析完成之前不会显示{{}}


　　4.  ng-init: 一次性绑定, 顾名思义, 一次性绑定是说 数据只会读取一次, 当初始化完成之后, 对应的表达式不会再监听数据的变化


下面的代码初始化时会显示 hello, 但是不会随着我们输入的值发生改变




<div ng-app>
  <h1 ng-bind="'Binding ' + message"></h1>
  <input type="text" ng-model="message" ng-init="message = 'hello'">
  <p ng-bind="message"></p>
</div>




 controllers


在angularjs中，控制器是一个构造函数，参数是 scope 作用域。控制器的作用是 通过 scope 将数据传给 view，添加包含业务逻辑的函数到 scope 上，实现view的交互行为


使用 ng-controller 添加一个控制器到DOM上，angualr会实例化一个controller 对象，并且创建一个子作用域($scope)注入到控制器的构造函数中


如果使用 controller as 语法添加控制器，angular会把controller的实例化对象分配到新创建的子作用域的一个属性上


 




angular.module('expressionExample', [])
.controller('ExampleController', ['$window', '$scope', function($window, $scope) {
  $scope.name = 'World';
  $scope.greet = function() {
    $window.alert('Hello ' + $scope.name);
  };
}]);






<div ng-controller="MainCtrl">
  <p>{{ message }}</p>
  <form ng-submit="updateMessage(newMessage)">
    <input type="text" ng-model="newMessage">
    <button type="submit">Update Message</button>
  </form>
</div>




 


        


 


 


　　


 







	

		


推荐阅读