发布于 2015-01-10 10:42:02 | 310 次阅读 | 评论: 0 | 来源: PHPERZ
AngularJS 前端JS框架
AngularJS诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本文为大家分享的是一篇AngularJS 入门教程,AngularJS诞生于Google是一款优秀的前端JS框架 感兴趣的同学参考下。
AngularJS诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
完全使用 JavaScript编写的客户端技术。同其他历史悠久的 Web技术( HTML、 CSS 和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷。
先从这段开始:
<div ng-app="" data-ng-init="name='Kavlez'">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
{{name}}
{{6+8}}
</div>
AngularJS的指令都是以ng
开头,或者也可以使用data-ng
开头。 AngularJS的表达式用两个大括号表示:{{expression}}
这便是AngularJS最基本的功能:数据绑定。
我们可以对各种类型进行绑定并显示:
Number
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total : ¥{{ quantity * cost }}</p>
</div>
String
<div ng-app="" ng-init="firstName='Kavlez';lastName='Jin'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Object
<div ng-app="" ng-init="person={firstName:'Kavlez',lastName:'Jin'}">
<p>The name is {{ person.lastName }}</p>
</div>
Array
PS: 可以使用ng-repeat
进行迭代
<div ng-app="" ng-init="myArr=[0,2,4,6,8]">
<p ng-repeat="element in myArr">
{{ element }}
</p>
</div>
我们用controller对一个AngularJS应用进行控制。
用ng-controller
定义一个controller,声明所有被它包含的元素都属于这个控制器。
例如:
<div ng-app="" ng-controller="personController">
<h1>{{ person.name +' is a(an) '+person.job }}</h1>
<h1>{{ person.sayHi() }}</h1>
</div>
<script>
function personController($scope) {
$scope.person = [];
$scope.person.name='Kavlez'
$scope.person.job='brogrammer'
$scope.person.sayHi = function(){
return "Hi! I'm "+ $scope.person.name + ", I'm a(an) " + $scope.person.job;
}
}
</script>
当然,我们应该使用更高效的组织方式。
AngularJS支持将Controller定义在其他js文件中,比如上面的例子可以改为:
<div ng-app="" ng-controller="personController">
<h1>{{ person.name +' is a(an) '+person.job }}</h1>
</div>
<script type="text/javascript" src="js/app.js"></script>
到目前为止,定义一个Angular app都用ng-app=""
的方式。
可行,但是这个app下的变量和函数都是global的,而且会造成controller污染(pollute)。
而通常,我们用module把app组织起来。 我们可以通过ng-app="名称"
或angular.modele()
来声明一个module。
该方法有两个参数:
比如,之前的例子可以改为:
<div ng-app="myApp" ng-controller="fighterController">
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("fighterController", function($scope) {
//..
}
</script>
</div>
如果将app和controller放到两个文件分别定义,则:
<div ng-app="myApp" ng-controller="fighterController">
<script src="myApp.js"></script>
<script src="myAppControllers.js"></script>
</div>
myApp.js:
var myApp = angular.module("myApp",[]);
myAppControllers.js:
myApp.controller("fighterController", function($scope) {
//..
}
这个东西可以加在表达式里面,改变表达式的输出格式。
我们可以用以下Filters:
Filter | Description |
---|---|
uppercase | 转大写 |
lowercase | 转小写 |
currency | 转货币格式 |
orderBy | 按指定属性排序 |
filter | 按指定关键字进行过滤 |
前3种可以直接用在表达式中,比如:
{{name | uppercase}}
{{name | lowercase}}
{{total | currency}}
filter和orderBy通常用于数组:
<div ng-app="" ng-controller="fighterController">
<input ng-model="search"/>
<ul>
<li ng-repeat="f in fighters|filter:search">
{{ f }}
</li>
</ul>
<script>
function fighterController($scope) {
$scope.fighters = [
{name:'Ryu',country:'Japan'},
{name:'Ken',country:'USA'},
{name:'Chun Li',country:'China'},
{name:'GuiLe',country:'USA'},
{name:'Zangief',country:'Russia'}
];
}
</script>
</div>
当然,数据不会这样放在一个controller里。
我们可以通过$http
来请求数据并进行绑定。
上面的例子可以改为:
function fighterController($scope,$http) {
var url = '请求地址';
$http.get(url).success(function(response) {
$scope.fighters = response;
})
}