认识AngularJS

最新推荐文章于 2024-07-15 22:17:25 发布

aoju0695

最新推荐文章于 2024-07-15 22:17:25 发布

阅读量87

点赞数

文章标签：前端测试 ui ViewUI

原文链接：http://www.cnblogs.com/f19huangtao/p/4862701.html

版权

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS是为了克服HTML在构建应用上的不足而设计的。

AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。

下面是一个包含了一个表单的典型CRUD(增查改删)应用。表单值先经过验证，然后用来计算总值，这个总值会被格式化成本地的样式。下面有一些开发者常见的概念，我们需要先了解一下：

1.将数据模型(data-model)关联到视图(UI)上；

2.写、读、验证用户的输入；

3.根据模型计算新的值；

4.将输出格式本地化，

index.html:

 
         <! 
         doctype  
         html> 
        
 
         < 
         html  
         ng-app> 
        
 
         < 
         head 
         > 
        
 
         < 
         script  
         src 
         = 
         "angular-1.1.0.min.js" 
         ></ 
         script 
         > 
        
 
         < 
         script  
         src 
         = 
         "script.js" 
         ></ 
         script 
         > 
        
 
         </ 
         head 
         > 
        
 
         < 
         body 
         > 
        
 
         < 
         div  
         ng-controller 
         = 
         "InvoiceCntl" 
         > 
        
 
         < 
         b 
         >Invoice:</ 
         b 
         > 
        
 
         < 
         br 
         > 
        
 
         < 
         br 
         > 
        
 
         < 
         table 
         > 
        
 
         < 
         tr 
         >< 
         td 
         >Quantity</ 
         td 
         >< 
         td 
         >Cost</ 
         td 
         ></ 
         tr 
         > 
        
 
         < 
         tr 
         > 
        
 
         < 
         td 
         >< 
         input  
         type 
         = 
         "integer"  
         min 
         = 
         "0"  
         ng-model 
         = 
         "qty"  
         required ></ 
         td 
         > 
        
 
         < 
         td 
         >< 
         input  
         type 
         = 
         "number"  
         ng-model 
         = 
         "cost"  
         required ></ 
         td 
         > 
        
 
         </ 
         tr 
         > 
        
 
         </ 
         table 
         > 
        
 
         < 
         hr 
         > 
        
 
         < 
         b 
         >Total:</ 
         b 
         > {{qty * cost | currency}} 
        
 
         </ 
         div 
         > 
        
 
         </ 
         body 
         > 
        
 
         </ 
         html 
         > 
        
 
         script.js: 
        
 
         function InvoiceCntl($scope) { 
        
 
         $scope.qty = 1; 
        
 
         $scope.cost = 19.95; 
        
 
         } 
        

     在<html>标签里, 我们用一个ng-app标识符标明这是一个AngularJS应用。这个ng-app标识符会使AngularJS自动初始化(auto initialize)应用。 
   

     我们用<script>标签来加载AngularJS脚本： 
   

     <script src="angular-1.1.0.min.js"></script>通过设置<input>标签里的ng-model属性, AngularJS会自动对数据进行双向绑定。我们还同时进行了一些简单的数据验证： 
   

     Quantity:<input type="integer"min="0"ng-model="qty"required >Cost:<input type="number"ng-model="cost"required >这个输入框的widget看起来很普通，但如果认识到以下几点那它就不普通了： 
   

     当页面加载完后，AngularJS会依照widget里的声明的模型名字（qty、cost）生成同名变量。你可以把这些变量认为是MVC设计模式中的M(Model)； 
   

     注意上面widget里的input有着特殊的能力。如果你们没有输入数据或者输入的数据无效，这个input输入框会自动变红。输入框的这种新特性，能让开发者更容易实现CRUD应用里常见的字段验证功能。 
   

     上面的这个例子里，{{}}里的表达式让AngularJS把从输入框中获得的数据相乘，然后把相乘结果格式化成本地货币样式，然后输出到页面上。 
   

       
   
 
    AngularJS 表达式 
   
 
    AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与ng-bind指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像JavaScript 表达式：它们可以包含文字、运算符和变量。
 
   

       
   

转载于:https://www.cnblogs.com/f19huangtao/p/4862701.html

aoju0695

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识AngularJS

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS是为了克服HTML在构建应用上的不足而设计的。AngularJS通过使用我们称为标识符(di...
复制链接

扫一扫