介绍
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。AngularJS百度百科
入门
可以使用下面这个应用开始AngularJS的第一步.
Your name:
Hello {{yourname || 'World'}}!
一些常用的命令
ng-app 指令定义一个AngularJS应用程序[一个页面可包含多个]。
ng-model 指定把元素值(比如输入框的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到HTML视图。
ng-init 指令初始化AngularJS应用程序变量[不推荐使用]。
{{}} 表达式.
把数据绑定到HTML与ng-bind指令相同.
ng-repeat 指令会重复一个HTML元素。
ng-controller 指令定义了应用程序控制器。控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
过滤器:
过滤器 | 描述 |
currency | 格式化数字为货币格式。[<p>总价 = {{ (quantity * price) | currency }}</p> ] |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。/td> |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
$http AngularJS 中的一个核心服务,用于读取远程服务器的数据。
ng-repeat 显示表格[下面有示例]
ng-disabled 指令直接绑定应用程序数据到HTML的disabled属性[true,false].
ng-show 指令隐藏或显示一个HTML元素.
ng-click 指令定义了一个单击事件
ng-hide =”true”元素不可见,=”false”元素可见.控制元素隐藏或显示.
一个Demo页面
页面中包含了几个示例,都是可以运行的.
AngularJs
示例1
输入你的名字:
你输入的是:{{name}}
示例3
这是示例数据!!!
示例4
输出表格,在下面的字段填上值,点击添加即可输出.
Name:
City:
Country:
Name | City | Country |
{{x.Name}} | {{x.City}} | {{x.Country}} |
示例5
和是:{{ count }}
示例6
现在时间是:{{nowdate.now}}
示例7
输入消息,点击相应按钮,打开控制台(Console)[Chrome:F12其他类似]即可查看.
Message:
第二个源文件,必须与index.html放在同一个目录下面.
//myTodoApp.js
var app = angular.module("myTodoApp",[]);
第三个源文件,必须与index.html放在同一个目录下面.
//myTodoCtrl.js
app.controller("myTodoCtrl",function($scope){
$scope.count=0;
$scope.showlist=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"}];
$scope.addlist=function(){
$scope.showlist.push({"Name" : $scope.namesvalues,"City" : $scope.cityvalues,"Country" : $scope.countryvalues});
};
$scope.resetlist=function(){
$scope.showlist=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"}];
}
}).controller("times",function($scope){
$scope.nowdate ={
now: new Date()
};
var updateClock = function(){
$scope.nowdate.now = new Date();
};
setInterval(function(){
$scope.$apply(updateClock);
},1000);
updateClock();
}).controller('LogController', ['$scope', '$log', function($scope, $log) {
$scope.$log = $log;
$scope.message = 'Hello World!';
}]);
快速入门教程
推荐W3cscholl.cc的AngularJS在线教程,以及angularjs.cn[AngularJS中文网]这两个网址,都有很不错的教程.
AngularJS有一些让人眼前一亮的特性,正因为这个,才能坚持学习!加油!!