第一章、走进AngularJS世界

 
  一、第一个AngularJS应用 
 

 
  ------------------------------------------------------------------------------------------------------------------ 
 

 
  <!DOCTYPE html> 
 

 
  <html  
  ng-app 
  > 
 

 
  <head> 
 

 
   <meta charset="utf-8"> 
 

 
   <title>angularjs</title> 
 

 
   <script type="text/javascript" src="./angular.min.js"></script> 
 

 
  </head> 
 

 
  <body> 
 

 
   <div>单价：<input type="number" 
   ng-model 
  ="price"/></div></br> 
 

 
   <div>数量：<input type="number"  
  ng-model 
  ="num"/></div></br> 
 

 
   <div>总价：{{price*num}}</div> 
 

 
  </body> 
 

 
  </html> 
 

------------------------------------------------------------------------------------------------------------------

1.ng-app是AngularJS的一个内置指令，可以出现在任意位置，并有两个作用，一个是启动AngularJS框架，另一个是告诉AngularJS框架从ng-app指令所在的标签的开始标签到结束标签之间的所有DOM元素由AngularJS框架进行管理。通常情况下会将ng-app放在<html>标签中，让AngularJS管理整个页面

 
  2. 
  {{}} 
  是AngularJS的表达式形式，由两个嵌套的大括号构成，大括号中间为表达式内容，AngularJS会对表达式内容进行解析，然后将表达式结果输出到浏览器 
 

 
  二、AngularJS应用构成元素 
 

 
模型(Model)：AngularJS程序中用于展示到页面的数据，本质是一个JavaScript对象 
 

 
视图(View)：AngularJS指令与表达式经过解析后的DOM元素，即用户看到的界面 
 

 
控制器(Controller)：AngularJS应用中用于处理业务逻辑的JavaScript方法 
 

 
作用域(Scope)：可以把作用域理解为一个容器，在控制器中可以访问这个容器，然后在容器中放入一些模型数据，在视图中就可以通过表达式将数据展现给用户 
 

 
指令(Directives)：扩展的HTML属性或标签，能够被AngularJS框架识别，根据不同的指令执行相应的动作 
 

 
表达式(Expressions)：AngularJS以HTML作为模板语言，AngularJS模板实际上就是HTML片段 
 

 
  三、AngularJS表达式 
 

 
  1.表达式的定义方式： 
  {{expression}}

 
表达式中的四则运算 
 

 
  AngularJS表达式支持加减乘除四则运算及字符串拼接运算 
 

 
表达式中的逻辑运算 
 

 
  AngularJS表达式支持逻辑运算，如：<div>1 || 0 = 
   {{1||0}} 
  </div> 
 

 
表达式与作用域 
 

 
  AngularJS表达式可以访问作用域中的数据，把数据输出到HTML页面 
 

 
  <body  
  ng-init 
  ="person={'name':'cai'};arr=['angularjs','jquery']"> 
 

 
  <div> 
  {{person.name}} 
  </div> 
 

 
  <div> 
  {{arr[0]}} 
  </div> 
 

 
  </body> 
 

 
  注： 
  ng-init 
  指令用于初始化作用域 
 

第一章、走进AngularJS世界

猜你喜欢