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>
网友评论