浅谈Angularjs的一些优点

时间 2019-11-07

标签浅谈 angularjs 一些优点栏目 AngularJS 繁體版

原文原文链接

　　使用angularjs作过两个管理项目了，谈不上深刻了解，只是能熟练运用罢了，在此谈谈本身对ng的一些理解。javascript

　　使用ng主要是为了减轻前端js代码量，增长js的复用。并且ng是一个很炫的框架。那么ng到底有哪些优点了？咱们为何要使用ng了？css

　　首先分析下ng作的应用与传统应用的区别：html

　　传统企业应用:

　　a：经过iframe加载菜单，加载页面。前端

　　b：每一个功能点都是独立页面。java

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

　　使用Angularjs的单页面应用：

　　a：每一个功能都是部件。ajax

　　b：动态加载。浏览器

　　c：整个系统都是共用一个域。服务器

　　经过上面的比较能够知道使用ng作的单页面应用在加载时更快，而且更适应当下的ajax与后台交互方式。若是你们有ng的基础会发现使用ng能够重用不少代码，如写成指令或者服务。那么ng与传统的技术比较有什么区别了？mvc

　　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上便可。至于数据绑定，则是控制器中模型的数据与视图层模型的数据时刻保持一致。

如：

<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<input ng-model='greeting.text'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>

控制器代码：

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
　　<div>
　　<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'>zhangwesdfjslda;</div>" , 　　link:function(scope,element,attrs){ 　　scope.title = "alert-box";　　// alert("jinru"); 　　} 　　};　　});