AngularJS

AngularJS 简介


AngularJS 是一个 JavaScript 框架。它只是通过 <script> 标签补偿加到
HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据及 HTML。

什么是 AngularJS?

AngularJS 使得开发现代之单一页面应用程序(SPAs:Single Page
Applications)变得更加便于。

  • AngularJS 将应用程序数据绑定到 HTML 元素。
  • AngularJS 可以仿造和重复 HTML 元素。
  • AngularJS 可以藏和显示 HTML 元素。
  • AngularJS 可以于 HTML 元素”背后”添加代码。
  • AngularJS 支持输入验证。

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是因一个 JavaScript 文件形式公布之,可经过 script
标签添加到网页中:

<script
src=”http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;

 

提议将下面论在 <body>
元素的脚。

  • 即时会增长网页加载速度,因为
    HTML 加载不吃制于脚本加载。*

 

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把正素值(比如输入域的价值)绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

 

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<script src=”http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;
</head>
<body>

<div ng-app=””>
  <p>名字 : <input type=”text” ng-model=”name”></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

实例讲解:

当网页加载了,AngularJS 自动启。

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序
的”所有者”。

ng-model 指令把输入域的价绑定到应用程序变量 name

ng-bind 指令把应用程序变量 name 绑定到有段落的 innerHTML。

假使移除了 ng-app 指令,HTML
将直拿表达式显示出,不会见错过算表达式的结果。

 

AngularJS 指令

刚刚而所观看底,AngularJS 指令是坐 ng 作为前缀的 HTML 属性。

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

HTML5
允许扩展的(自制的)属性,以 data- 开头。

AngularJS 属性以 ng-
开头,但是若可采取 data-ng- 来吃网页对 HTML5 有效。

 

 

AngularJS 表达式

AngularJS 表达式写于双双大括号内:{{ expression }}

AngularJS 表达式把数量绑定到 HTML,这跟 ng-bind 指令发出异曲同工之精彩。

AngularJS 将当表达式书写的位置”输出”数据。

AngularJS 表达式 很像 JavaScript
表达式
:它们可涵盖文字、运算符和变量。

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

 

AngularJS 实例

<!DOCTYPE html>
< html>
< head>
< meta charset=”utf-8″>
< script
src=”http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;
</head>
< body>

<div ng-app=””>
  <p>我的率先独表达式: {{ 5 + 5 }}</p>
< /div>

< /body>
< /html>

 

AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于决定 AngularJS 应用。

ng-app令定义了应用, ng-controller 定义了控制器。

 

<div ng-app=”myApp” ng-controller=”myCtrl“>

名: <input type=”text” ng-model=”firstName”><br>
姓: <input type=”text” ng-model=”lastName”><br>
<br>
姓名: {{firstName + ” ” + lastName}}

</div>

<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
    $scope.firstName= “John”;
    $scope.lastName= “Doe”;
});
</script>

 

AngularJS 模块

var app = angular.module(‘myApp’, []);

AngularJS 控制器

app.controller(‘myCtrl’, function($scope) {
    $scope.firstName= “John”;
    $scope.lastName= “Doe”;
});

相关文章