浅谈Angularjs的一些优势

        使用angularjs做过两个管理项目了,谈不上深入了解,只是能熟练运用罢了,在此谈谈自己对ng的一些理解。

  使用ng主要是为了减轻前端js代码量,增加js的复用。而且ng是一个很炫的框架。那么ng到底有哪些优势了?我们为什么要使用ng了?

  首先分析下ng做的应用与传统应用的区别:

  传统企业应用:

  a:通过iframe加载菜单,加载页面。

  b:每个功能点都是独立页面。

  c:每个功能点包含完整且独立的js和css。

  使用Angularjs的单页面应用:

  a:每个功能都是部件。

  b:动态加载。

  c:整个系统都是共用一个域。

  通过上面的比较可以知道使用ng做的单页面应用在加载时更快,并且更适应当下的ajax与后台交互方式。如果大家有ng的基础会发现使用ng可以重用很多代码,如写成指令或者服务。那么ng与传统的技术比较有什么区别了?

  1:客户端模板

  多页面的应用通过组装和拼接服务器上的数据来生成HTML,然后输出到浏览器,这样会造成代码臃肿不堪而且极为不雅观。Angularjs不同于此的是,传递模板和数据到浏览器,然后在浏览器端进行组装。浏览器的角色变成了只提供模板的静态资源和模板所需要的数据。当然还有很多好用的js模板类库,比如:arttemplate。


  2. Angularjs使用了传统的mvc模式

     MVC的核心概念是,在代码之间明确分离管理数据(模型),应程序逻辑(控制器),并将数据呈现给用户(视图)。在Angularjs单页面应用中,视图就是DOM,控制器就是Javascript类,模型数据存储在对象属性中。

  3. 数据绑定

      典型的DOM操作,都是先通过id或者class找到相应的dom节点然后对dom节点进行赋值等操作。这样的工作重复性很高,还要确保界面和javascript属性中获取到数据时正确的状态(如有的dom节点是js动态生成的,并不能直接绑定click函数等)。而使用了Angularjs就不用担心查找dom节点以及js动态生成dom节点不能绑定事件的事了,使用ng只需要将要绑定的事件写在相应的dom上即可。至于数据绑定,则是控制器中模型的数据与视图层模型的数据时刻保持一致。

如:

{{greeting.text}}, World

控制器代码:

function HelloController($scope) {  

$scope.greeting = { text:'Hello' };  

}  

当控制中greeting的模型数据改变时试图层的数据将会进行相应的改变。

  4:依赖注入

  通过依赖注入$scope可以对控制器等注入一些服务。如:

function HelloController($scope, $log) {  

$scope.greeting = { text:'Hello' };  

}  

  在此控制器中通过依赖注入将$scope,$log注入到控制器,提供给开发者使用。依赖注入的另一种方式

  HelloController.$inject($scope,$log);

  5:指令

  一个指令用来引入新的HTML语法。指令是DOM元素上的标记,使元素拥有特定的行为。举例来说,静态的HTML不知道如何来创建和展现一个日期选择器控件。让HTML能识别这个语法,我们需要使用指令。指令通过某种方法来创建一个能够支持日期选择的元素。我们会循序渐进地介绍这是如何实现的。 如果你写过AngularJS的应用,那么你一定已经使用过指令,不管你有没有意识到。你肯定已经用过简单的指令,比如 ng-mode, ng-repeat, ng-show等。这些指令都赋予DOM元素特定的行为。例如,ng-repeat 重复特定的元素,ng-show 有条件地显示一个元素。如果你想让一个元素支持拖拽,你也需要创建一个指令来实现它。指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。

df

hello

  js控制中代码为:

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

myApp.directive("superman",function(){

return{

restrict: 'EA',

replace: true,

transclude:true,

scope:function(){

title:'myTitle'

},

template:"

zhangwesdfjslda;
" ,

link:function(scope,element,attrs){

scope.title = "alert-box";

// alert("jinru");

}

};

});

你可能感兴趣的:(浅谈Angularjs的一些优势)