AngularJS 在实际成本法的优缺点应用中有哪些优缺点

来源：蜘蛛抓取(WebSpider) 时间：2017-08-24 04:49 标签： 单页应用优缺点
AngularJS是很多Web开发人员在打造单页面应用程序时的首选创建方案。必须承认，无论开发哪一种应用程序类型，团体以及个人开发人员都将不可避免地面临一系列挑战，不过使用AngularJS将大大降低整个流程的实现难度。在AngularJS的帮助下，大家将能够充分享受单页面应用程序开发与测试的过程，因为其提供的框架囊括了客户端模型-视图-控制器以及开发端模型-视图-视图模式。
在当下这个电子商务时代，每一家企业都热衷于通过网络拓展自身业务。而这也…下面我要说的就是25个超有用的AngularJS工具，web开发人员千万不可错过哦。…最近一段时间以来，AngularJS已经成为Web领域人气最高的技术方案，而这要归…如果有心搜索的话，你能找出上百种JavaScript框架。当我们要开发一个现代化…Web 新手常问的一个问题是“我应该使用哪个框架?”但这个问题却没有‘正确…
在今天这篇博文中，我们会用AngularJS从头到尾地创建一个副本, 并解释创建a…AngularJS是如今最受欢迎的JS框架之一，简化开发过程是它的目标之一，这使…本文的目标是基于单页面应用程序开发出拥有数百页的内容，包括认证，授权，…除了轻松对HTML进行扩展的能力之外，AngularJS还提供一套简便途径、帮助我…AndularJS开发团体最瞩目的内容是关注于所谓待开发内容（greenfield）的开…
当下HTML5技术一直受到各方关注，“HTML5颠覆原生App”的争论也从未停止过。不...
Web应用程序框架领域涌现出了一股创新热潮，这可能让广大开发人员颇为沮丧，却...
新手程序员你们好！你是否做好了进入编程世界的准备呢？要知道，程序员可是被业...
计算机语言在保质期方面有着与众不同的独特规律。其中最为热门的各类编程语言所...浅谈Angularjs的一些优势 - 南宫静远 - 博客园
随笔 - 4, 文章 - 0, 评论 - 1, 引用 - 0
　　使用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上即可。至于数据绑定，则是控制器中模型的数据与视图层模型的数据时刻保持一致。
控制器代码：
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拥有真实的交互性。
　　&!DOCTYPE html&　　&html
ng-app="superHero"&　　&head&
　　&script src="../public/angular/angular.min.js"&&/script&
　　&script src="../public/angular/angular-resource.js"&&/script&
　　&script src="../public/myJs/mainday3.js"&&/script&
　　&link rel="stylesheet" href="../public/foundation.min.css"/&
　　&title&&/title&
　　&META HTTP-EQUIV="Refresh" content="54441"&　　&/head&　　&body&df
　　&superman class='myTitle'&&/superman&
　　&div superman&hello&/div&
　　&/div&　　&/body&　　&/html&
　　js控制中代码为:
　　var myApp=angular.module("superHero",[]);　　myApp.directive("superman",function(){
　　return{
　　　　restrict: 'EA',
　　　　replace: true,
　　　　transclude:true,
　　　　scope:function(){
　　　　title:'myTitle'
　　template:"&div class='title'&&/div&"
　　link:function(scope,element,attrs){
　　scope.title = "alert-box";　　//
alert("jinru");
　　};　　});

我要回帖

更多关于 单页应用优缺点 的文章

 

随机推荐