AngularJS简单的理解

最新推荐文章于 2020-08-10 09:14:53 发布

sunshi_ne

最新推荐文章于 2020-08-10 09:14:53 发布

阅读量375

点赞数

本文链接：https://blog.csdn.net/sunshi_ne/article/details/46389391

版权

最开始我们使用最多的前端JS框架是JQuery,人们听说过的JS框架最多的也是JQuery，因为JQuery比较早就出现了，到现在也基本成熟了，所以人们都在用这个。但最近几年有一个新的JS框架正在慢慢的追上来了。

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入、等等。

下面我们通过一个例子来简单的看看：

<!DOCTYPE html>

<!—这里我们要引起自己定义的app名-->

<metacharset="UTF-8">

</head>

<body>

<!—双向的数据绑定-->

<inputtype="text" ng-model="name" />

<!—一定要将所有的使用了angular的代码都放在controller模板中-->

<divng-controller="MyController">

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<!—这里是循环输出一个数组的数据，使用这个方法我们就不在拼接字符串了-->

<trng-repeat="stu in students">

<!—用两个花括号括起来，加上相应的键名我们就能得到相应的数据了-->

</tr>

</tbody>

</table>

</div>

</body>

<!—导入我们的angular的JS文件-->

<!—这里就是我们定义的angular的模型-->

varmyApp=angular.module("myApp",[]);

myApp.controller("MyController",function($scope){

$scope.test1 ="测试内容";

$scope.students=[

{"s_id":1,"s_name":"张飞","s_addr":"lo1"},

{"s_id":2,"s_name":"关羽","s_addr":"lo2"},

{"s_id":3,"s_name":"刘备","s_addr":"lo3"}

]

});

</script>

</html>

通过上面那个例子，应当大概能了解一个简单的angular框架的使用了。

AngularJS是一个 MVM或者MVVM 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。

如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用，就不是AngularJS的用武之地了。

AngularJS 也给我们提供了处理后台传输的方法：

$http 服务是AngularJS的核心服务之一，它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。

$http 服务是这样一个函数：它接受一个设置对象，其中指定了如何创建HTTP请求；它将返回一个承诺（*参考JavaScript异步编程的promise模式），其中提供两个方法： success方法和error方法。

demoApp.controller("demoController",function($http, $scope){

$scope.getAjaxUser = function(){

$http.get("../xxx.action").success(function(data){

alert(data);

}).error(function(){

Alert(“出错了！”);

});

};

});

AngularJS的AJAX与jquery等框架的AJAX基本一致。

AngularJS内置了九种过滤器，使用方法都非常简单，看文档即懂。文档在网上应该都能找到了，不过我们自己也能定义过滤器。

currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)

filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。

下面就是一个简单的倒序输出的过滤器，如有不足的地方还望指出：

<!DOCTYPEhtml>

<htmlng-app="myApp">

<headlang="en">

<scriptsrc="./js/angular.min.js"></script>

<!—这个array是自己定义的过滤器名-->

myApp.filter("array",function(){

return function(input){

var array=[];

if(input){

for(vari=input.length-1;i>=0;i--){

if(array){

array.push(input[i]);

}

return array;

}else{

return input;

}

})