AngularJS 是一个 JavaScript 框架。
它可通过<script>
标签添加到 HTML 页面。
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
建议把脚本放在 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
AngularJS通过指令扩展了HTML,并且通过表达式绑定数据到 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="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
</body>
</html>
实例讲解:
当网页加载完毕,AngularJS 自动开启。
ng-app 指令告诉 AngularJS,
元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
===》如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。
“AngularJS 是专门为应用程序设计的 HTML。”
AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。
正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
带有有效的 HTML5:
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
AngularJS已经被用于Google的多款产品当中。
AngularJS是为了克服HTML在构建应用上的不足而设计的。
AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等
。HTML是一门很好的为静态文本展示设计的声明式语言。
可以构建一个单一页面应用程序(SPAs:Single Page Applications)。