学习链接：
http://www.runoob.com/angularjs/angularjs-intro.html
AngularJS简介
AngularJS 是一个JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
| 我们建议把脚本放在 <body> 元素的底部。 这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。 |
AngularJS 扩展了 HTML
AngularJS 通过ng-directives扩展了 HTML。
ng-app指令定义一个 AngularJS 应用程序。
ng-model指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind指令把应用程序数据绑定到 HTML 视图。
实例：
<!doctype html>
<html ng-app>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
示例1:
<div ng-app="">
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!<br/>
</div>
示例2：
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
<br/>
示例3：AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
<br/>
示例4：
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
</body>
</html>
<!doctype html>
<html >
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
<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>
</body>
</html>
<!doctype html>
<html ng-app="">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
AngularJS 数字：
<div ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
<p>总价： <span ng-bind="quantity * cost"></span> </p>
</div>
<br/>
AngularJS 字符：
<div ng-init="quantity='1';cost='5'">
<p>总价： {{ quantity + cost }}</p>
<p>总价： <span ng-bind="quantity + cost"></span> </p>
</div>
<br/>
AngularJS 对象:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div>
<br/>
AngularJS 数组:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>
</body>
</html>
原文地址：https://www.jb51.cc/angularjs/149676.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
