首页 > 代码库 > Angular JS 学习之简介
Angular JS 学习之简介
1.Angular JS是一个JavaScript框架，它是一个以JavaScript编写的库，它可以通过<script>标签添加到HTML页面：
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
2.Angular JS通过指令扩展了HTML，且通过表达式绑定数据到HTML
3.Angular JS扩展了HTML：
（1）Angular JS通过ng-directives扩展了HTML；
（2）ng-app指令定义了一个Angular JS应用程序；
（3）ng-model指令把元素（比如输入域的值）绑定到应用程序；
（4）ng-bind指令把应用程序数据绑定到HTML视图；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js></script>
</head>
<body>
<div ng-app=""> //ng-app指令告诉AngularJS ，<div>元素是AngularJS应用程序的所有者
<p>名字：<input type="text" ng-model="name"></p> //ng-model指令把输入域的值绑定到应用程序变量name
<h1>Hello {{name}}</h1> //ng-bind指令把应用程序变量name绑定到某个段落的innerHTML
</div>
</body>
</html>
4.AngularJS使得开发现代的单一页面应用程序变得更加简单；
**AngularJS把应用程序数据绑定到HTML元素
**AngularJS可以克隆和重复HTML元素
**AngularJS可以隐藏和显示HTML元素
**AngularJS可以在HTML背后添加代码
**AngularJS支持输入验证
5.AngularJS指令：AngularJS指令是以ng作为前缀的HTML属性，ng-init指令初始化AngularJS应用程序
<div ng-app="" ng-init=" firstName=‘John‘">
<p>姓名为：<span ng-bind="firstName"></span></p>
</div>
6.AngularJS表达式：
**AngularJS表达式写在双大括号内：{{expression}}
**AngularJS表达式把数据绑定到HTML，这与ng-bind指令有异曲同工之妙；
**AngularJS将在表达式书写的位置"输出"数据；
**AngularJS表达式很像JavaScript表达式：它们可以包含文字，运算符和变量；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js>
</script>
</head>
<body>
<div ng-app="">
<p>我的第一个表达式：{{5+5}}</p>
</div>
</body>
</html>
7.AngularJS应用：
**AngularJS模块（Module）定义了AngularJS应用;
**AngularJS控制器（Controller）用于控制AngularJS应用;
**ng-app指令定义了应用，ng-controller定义了控制器;
<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‘,[]); //AngularJS模块定义应用
app.controller(‘myCtrl‘,function($scope){ //AngularJS控制器控制应用
$scope.firstName="John";
$scope.lastName="Doe";
});
</script>
Angular JS 学习之简介