一篇博客搞定Angularjs

来源：互联网发布：安卓版打谱软件编辑：程序博客网时间：2024/05/17 23:48

简介

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

<!DOCTYPE html><html><body><div ng-app="">  <p>在输入框中尝试输入：</p>  <p>姓名：<input type="text" ng-model="name"></p>  <p ng-bind="name"></p></div><script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script></body></html>

ng-app 指令告诉 AngularJS，

元素是 AngularJS 应用程序的”所有者”。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

<div ng-app="" ng-init="firstName='John'"><p>姓名为 <span ng-bind="firstName"></span></p></div>

ng-init 指令初始化 AngularJS 应用程序变量。

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div data-ng-app="" data-ng-init="firstName='John'"><p>姓名为 <span data-ng-bind="firstName"></span></p></div>

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置”输出”数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}

<!DOCTYPE html><html><body><div ng-app="">  <p>我的第一个表达式： {{ 5 + 5 }}</p></div><script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script></body></html>

表达式

数字

<div ng-app="" ng-init="quantity=1;cost=5"><p>总价： {{ quantity * cost }}</p></div>

字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名： {{ firstName + " " + lastName }}</p></div>

对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓为 {{ person.lastName }}</p></div>

数组

<div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三个值为 {{ points[2] }}</p></div>

AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把应用程序数据绑定到 HTML 元素。

数据绑定

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。
AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model=”firstName” 进行同步。
在下一个实例中，两个文本域是通过两个 ng-model 指令同步的：

<div ng-app="" 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>

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">  <p>使用 ng-repeat 来循环数组</p>  <ul>    <li ng-repeat="x in names">      {{ x }}    </li>  </ul><div>

或者：

<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"><p>循环对象：</p><ul>  <li ng-repeat="x in names">    {{ x.name + ', ' + x.country }}  </li></ul></div>

AngularJS 控制器

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。

<div ng-app="" ng-controller="personController">名： <input type="text" ng-model="person.firstName"><br>姓： <input type="text" ng-model="person.lastName"><br><br>姓名： {{person.firstName + " " + person.lastName}}</div><script>function personController($scope) {    $scope.person = {        firstName: "John",        lastName: "Doe"    };}</script>

AngularJS 应用程序由 ng-app 定义。应用程序在

内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

控制器属性

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以把函数作为对象属性：

<div ng-app="" ng-controller="personController">名： <input type="text" ng-model="person.firstName"><br>姓： <input type="text" ng-model="person.lastName"><br><br>姓名： {{person.fullName()}}</div><script>function personController($scope) {    $scope.person = {        firstName: "John",        lastName: "Doe",        fullName: function() {            var x;            x = $scope.person;            return x.firstName + " " + x.lastName;        }    };}</script>

控制器方法

<div ng-app="" ng-controller="personController">名： <input type="text" ng-model="person.firstName"><br>姓： <input type="text" ng-model="person.lastName"><br><br>姓名： {{fullName()}}</div><script>function personController($scope) {    $scope.person = {        firstName: "John",        lastName: "Doe",     };     $scope.fullName = function() {         var x;         x = $scope.person;          return x.firstName + " " + x.lastName;     };}</script>

to be continued

0 0