学习链接:
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>