Angularjs1版本使用

Angularjs1版本使用

Angularjs基础

Angularjs简介

什么是Angularjs

• AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

• Angularjs扩展了html

  • AngularJS 通过 ng-directives 扩展了 HTML。
  • ng-app指令定义一个 AngularJS 应用程序。
  • ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
  • ng-bind 指令把应用程序数据绑定到 HTML 视图。
  • ng-init 指令初始化 AngularJS 应用程序变量。

• AngularJS 是专门为应用程序设计的 HTML。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

Angularjs基础

Angularjs表达式

• 概念描述

  • AngularJS 使用 表达式 把数据绑定到 HTML。

  • AngularJS 表达式写在双大括号内：{{ expression }}。

  • AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

  • AngularJS 将在表达式书写的位置"输出"数据。

  • ngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

    实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

• 代码演练

  
    
  
        
  总价： {{ quantity * cost }}
    
  
        ng-bind绑定数据 
        
  总价： 
     
        字符串操作
        
  
            
  姓名： {{ firstName + " " + lastName }}
        
            
        
  
            
  姓为 {{ person.lastName }}
        
        
        
  
            
  第三个值为 {{ points[2] }}
        
    
  
  
  

Angularjs指令

• 概念描述

  • AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-

  • ng-app 指令告诉 AngularJS，

    元素是 AngularJS 应用程序 的"所有者"。

    • 一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

  • 指令有哪些

    • ng-app指令

      • ng-app 指令定义了 AngularJS 应用程序的 根元素。
      • ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

    • ng-init指令

      • ng-init 指令为 AngularJS 应用程序定义了 初始值。

      • 通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

        稍后您将学习更多有关控制器和模块的知识。

    • ng-model指令

      • ng-model指令绑定HTML元素到应用程序数据
      • ng-model指令也可以
        • 为应用程序提供类型验证(number、emil、required)
        • 为应用程序数据提供状态(invalid、dirty、touched、error)
        • 为html元素提供css类
        • 绑定html元素到html表单
      • ng-repeat指令
        • ng-repeat指令对于集合中(数组)中的每个项会克隆一次

• 代码演练

  ​

  
    
    
  
        
  在输入框中尝试输入：
        
  姓名：
        
  你输入的为： {{ firstName }}
        
        
  
            
  价格计算器
            数量： 
            价格： 
            
  总价： {{ quantity * price }}
        
        
        
  
            
  使用 ng-repeat 来循环数组
            
  
                
  
                    {{ x }}
                
            
        
        
        
  
        
  
  
            
  循环对象：
            
  
                
  
                    {{ x.name + ', ' + x.country }}
                
            
        
    
  
  
  

Angularjs scope作用域

Angularjs实例