什么是 AngularJS?
AngularJS 是一个 JavaScript 框架
它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
它可通过 <script> 标签添加到 HTML 页面。
在网页中加上:
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
就可以直接使用了。
AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
<div ng-app="">
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
<input type="text" ng-model="name"/>
ng-bind 指令把应用程序数据绑定到 HTML 视图。
<h1>Hello {{name}}</h1>
AngularJS 指令
AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
<div ng-app="" ng-init="myname='yang'"> 姓名为 <span ng-bind="myname"></span>
注意 :
HTML5 允许扩展的(自制的)属性,以 data- 开头,HTML5 允许扩展的(自制的)属性,以 data- 开头。
例如:
<div data-ng-app="" data-ng-init="myname='yang'">
AngularJS 表达式
AngularJS 表达式写在双大括号内:{{ expression }},AngularJS 表达式写在双大括号内:{{ 10 + 10 }}
AngularJS 应用
AngularJS 模块(Module) 定义了 AngularJS 应用。
var app = angular.module('myTest', []);
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
app.controller('myCtrl', function($scope) { $scope.firstName= "Yang"; $scope.lastName= "Tao"; });
ng-app指令定义了应用, ng-controller 定义了控制器
<div ng-app="myTest" ng-controller="myCtrl">
AngularJS一个简单完整的例子:
<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= "Blue"; $scope.lastName= "Sky"; }); </script>