您的位置:首页 > Web前端 > AngularJS

AngularJS基础

2015-11-24 15:42 696 查看
首先,AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

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

例子:

1 <div ng-app="">
2
3 <p>在输入框中尝试输入:</p>
4 <p>
5     姓名: <input type="text" ng-model="name"><br>
6     姓名: <input type="text" ng-model="name">
7     </p>
8 <p ng-bind="name"></p>
9
10 </div>


上诉代码中,div(ng-app)就是angular js应用程序的所有者,input(ng-model)的应用程序的值绑定到变量name上,p(ng-bind)再把值绑定到p
标签的innerhtml。

Angular JS能干什么:

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

AngularJS 把应用程序数据绑定到 HTML 元素。

AngularJS 可以克隆和重复 HTML 元素。

AngularJS 可以隐藏和显示 HTML 元素。

AngularJS 可以在 HTML 元素"背后"添加代码。

AngularJS 支持输入验证。

AngularJS表达式:

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

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

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

例如:<p>AngularJS表达式 : {{10*20}}</p>
输出:200

AngularJS应用:

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

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

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

AngularJS 模块定义应用:

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

AngularJS 控制器控制应用:

app.controller('myCtrl', function($scope) {
$scope.firstName= "John";

$scope.lastName= "Doe";
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: