首页 > 网页教程 > JavaScript > AngularJS:一款超棒的javascript框架推荐

AngularJS:一款超棒的javascript框架推荐

时间:2012-07-25    来源:gbin1中文互联

特性三:MVC

针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

Model

model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes,使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性,这种方法使得我们更少使用应用的原型。

ViewModel

viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。

viewmodel是$scope的对象,只存在于AnguarJS的应用中。$scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。

Controller

controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

View

view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考,controller定义行为,view处理布局和互动。

特性四:依赖注入(Dependency Injection,即DI)

AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。

DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。

为了而得到核心的AngularJS服务,只需要添加一个简单服务作为参数,AngularJS会侦测并且提供给你:

function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}

你也可以定义自己的服务并且让它们注入:

angular.
module('MyServiceModule', []).
factory('notify', ['$window', function (win) {
return function (msg) {
win.alert(msg);
};
}]);

function myController(scope, notifyService) {
scope.callNotify = function (msg) {
notifyService(msg);
};
}

myController.$inject = ['$scope', 'notify'];

特性五:Directives(指令)

指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情?那么AngularJS可以做到。

指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

这里是一个例子,它监听一个事件并且针对的更新它的$scope ,如下:

myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});

然后,你可以使用这个自定义的directive来使用:

<my-component ng-model="message"></my-component>

使用一系列的组件来创建你自己的应用将会让你更方便的添加,删除和更新功能。

额外的特性:测试

AngularJS内含了测试用例可以帮助你更方便的执行测试。为什么不用呢?

JS是一个动态的解析性语言,而不是编译类型的,因此非常的难写测试。

AngularJS被开成一个可测试的框架。它甚至包含了点对点的单元测试runner。如果你喜欢这个特性,看看这个项目:https://github.com/angular/angular-seed

一但你运行这个项目,你可以看到如下输出:

angular-seed - gbin1.com

API文档是完整的点对点测试,说明了整个架构师如何工作的。通过查看这些测试,你会对AngularJS有更深刻的了解。

总结

在这篇教程中,我们总结了6个AngularJS的关键特性。如果大家对于AngularJS有兴趣,请访问http://angularjs.org。

我强烈建议大家加入maillist,你肯定能找到很多的有用信息。

相关推荐
20款最佳AngularJS开发工具推荐
5大当下最流行的JavaScript框架介绍
10个超级实用的javascript动画框架分享
十款优秀的JavaScript开发框架推荐 自带有丰富UI组件
超棒的JavaScript 框架、工具和技术教程分享
20款超酷的基于jQuery的幻灯和表单插件(附演示和下载)
8个很棒的web开发常用jQuery插件分享
19个轻量级用于web开发的JavaScript库
12个助你省时省力的Web开发框架
web开发常用的Javascript函数大全
写给JavaScript库开发者们的11条规则
20个web开发必备的实用jQuery表单插件
12个Ajax学习者必备的优秀网站
12个提高web开发效率的JavaScript表单插件
网页制作web开发中常用的javascript表单验证函数分享
13个帮助你有效简化web开发的jQuery插件
最新热门的jQuery特效插件分享 web开发必备
8个滚动视差效果的网站工具与教程分享
6款超实用的jQuery和CSS实例及源码分享
50个jQuery Mobile开发技巧大全 移动网站开发必备
利用IE10触控事件模型调试响应式Web设计
使用异步加载 延迟加载依赖对前端性能进行优化
为Web开发人员准备的10个最佳JavaScript库
2016年最新的JavaScript库 web开发必备

精彩推荐

热门教程