Angularjs1版本使用

2019-04-23 本文已影响0人进击的大东

Angularjs1版本使用

Angularjs基础

Angularjs简介

什么是Angularjs

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
```
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></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 }}

代码演练

<body>
  <div ng-app="" ng-init="quantity=1;cost=5">
      <p>总价： {{ quantity * cost }}</p>  <!-- 表达式绑定数据 --><br>
      ng-bind绑定数据 
      <p>总价： <span ng-bind="quantity * cost"></span></p>   
      字符串操作
      <div ng-app="" ng-init="firstName='John';lastName='Doe'">
          <p>姓名： {{ firstName + " " + lastName }}</p>
      </div>
      <!-- 表达式绑定对象 -->    
      <div ng-init="person={firstName:'John',lastName:'Doe'}">
          <p>姓为 {{ person.lastName }}</p>
      </div>
      <!-- Angularjs数组 -->
      <div ng-init="points=[1,15,19,2,40]">
          <p>第三个值为 {{ points[2] }}</p>
      </div>
  </div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

Angularjs指令

概念描述
- AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-
- ng-app 指令告诉 AngularJS，<div> 元素是 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指令对于集合中(数组)中的每个项会克隆一次

代码演练

<body>
  <!-- ng-init 与ng-model -->
  <div ng-app="" ng-init="firstName='John'">
      <p>在输入框中尝试输入：</p>
      <p>姓名：<input type="text" ng-model="firstName"></p>
      <p>你输入的为： {{ firstName }}</p>
      <!-- mg-model -->
      <div ng-init="quantity=1;price=5">
          <h2>价格计算器</h2>
          数量： <input type="number" ng-model="quantity">
          价格： <input type="number" ng-model="price">
          <p><b>总价：</b> {{ quantity * price }}</p>
      </div>
      <!-- 使用ng-repeat来循环 -->
      <div ng-init="names=['Jani','Hege','Kai']">
          <p>使用 ng-repeat 来循环数组</p>
          <ul>
              <li ng-repeat="x in names">
                  {{ x }}
              </li>
          </ul>
      </div>
      <!-- ng-repeat用在对象数组上    -->
      <hr>
      <div ng-init="names1=[
          {name:'Jani',country:'Norway'},
          {name:'Hege',country:'Sweden'},
          {name:'Kai',country:'Denmark'}]">

          <p>循环对象：</p>
          <ul>
              <li ng-repeat="x in names1">
                  {{ x.name + ', ' + x.country }}
              </li>
          </ul>
      </div>
  </div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

Angularjs1版本使用

Angularjs1版本使用

Angularjs基础

Angularjs简介

什么是Angularjs

Angularjs基础

Angularjs表达式

Angularjs指令

Angularjs scope作用域

Angularjs实例

猜你喜欢

热点阅读