首页>前端>正文

【上海前端培训】AngularJS核心特征和概念、优缺点

时间:2018-05-12 15:56:05   来源:上海尚学堂   阅读:

AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年开发。现在是由谷歌维护。它的最新版本是1.3.14。

AngularJS在它的官方文档 中定义如下:

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

一、特性

  • AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用(RIA)。

  • AngulajJS为开发者提供的选项(使用JavaScript)在一个干净的MVC(模型 - 视图 - 控制器)的方式来编写客户端应用程序。

  • AngularJS写的应用都是跨浏览器兼容。AngularJS使用JavaScript代码自动处理适应每种浏览器。

  • AngularJS是开源的,完全免费的,并且由数千名世界各地的开发者开发维护。它是根据Apache许可证2.0版许可发布。

总体来说,AngularJS是一个用来构建大型应用,高性能的Web应用程序的框架,同时使它们易于维护。

二、核心特征

以下是AngularJS中最重要的核心功能:

  • 数据绑定: 模型和视图组件之间的数据自动同步。

  • 适用范围: 这些对象参考模型。它们充当控制器和视图之间的胶水。

  • 控制器: 这些Javascript函数绑定到特定的范围。

  • 服务: AngularJS配有多个内置服务,例如 $http 可作为一个XMLHttpRequest请求。这些单一对象在应用程序只实例化一次。

  • 过滤器: 从一个数组的条目中选择一个子集,并返回一个新的数组。

  • 指令: 指令是关于DOM元素标记(如元素,属性,CSS等等)。这些可以被用来创建作为新的,自定义部件的自定义HTML标签。AngularJS设有内置指令(如:ngBind,ngModel...)

  • 模板:这些符合从控制器和模型信息的呈现的视图。这些可以是单个文件(如index.html),或使用“谐音”在一个页面多个视图。

  • 路由: 它是切换视图的概念。

  • 模型视图: MVC是一个设计模式将应用划分为不同的部分(称为模型,视图和控制器),每个都有不同的职责。 AngularJS并没有传统意义上的实现MVC,而是更接近于MVVM(模型 - 视图 - 视图模型)。 AngularJS团队将它作为模型视图。

  • 深层链接: 深层链接,可以使应用程序状态进行编码在URL中而能够添加到书签。应用程序可从URL恢复到相同的状态。

  • 依赖注入: AngularJS有一个内置的依赖注入子系统,开发人员通过使应用程序从而更易于开发,理解和测试。

三、概念

下图描述了AngularJS,我们将详细的后续章节讨论一些重要的部分。

四、AngularJS的优点

  • AngularJS提供一个非常干净和维护的方式来创造单页的应用。

  • AngularJS提供数据绑定功能在HTML中,从而给用户提供丰富和响应的体验

  • AngularJS代码可进行单元测试。

  • AngularJS使用依赖注入和利用关注点分离。

  • AngularJS提供了可重用的组件。

  • 使用AngularJS,开发人员编写更少的代码,并获得更多的功能。

  • 在AngularJS中,视图都是纯HTML页面,并用JavaScript编写控制器做业务处理。

AngularJS应用程序可以在所有主要的浏览器和智能手机,包括Android和iOS系统的手机/平板电脑上运行。

五、AngulaJS的缺点

虽然AngularJS自带很多优点,但我们应该考虑以下几点(缺点):

  • 不安全:因为只是JavaScript一种框架,由AngularJS编写的应用程序是不安全的。服务器端身份验证和授权是必须用来保证应用程序的安全。

  • 不可降解:如果应用程序的用户禁用JavaScript,那最后用户看到的只是基本页面,仅此而已。

六、AngularJS组件

AngularJS框架可分为以下三个主要部分组成:

  • ng-app : 指令定义和链接AngularJS应用程序到HTML。

  • ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。

  • ng-bind : 该指令绑定AngularJS应用程序数据到HTML标签。


 

七、AngularJS有什么

     除了最重要的双向数据绑定,AngularJS有以下元件,其中Controller、Directive是最为重要的。



 

对于一般的前端项目,使用最多是Directive、Controller,了解这两个元件我觉得就差不多了,其他用到时再查就行。

1. Module

   作为模块组织者,包含其他AngularJS元件。

2. Controller

   负责跟View沟通, 不处理任何跟DOM有关的工作

   PS:当你的Controller里面写了DOM操作时,就应该反省代码是否写得有问题了。

3. Directive

   类似于HTML标签,可以定义标签的行为,所有与DOM相关的操作都应该写在这里。

   PS:尽量不用DOM操作,但可能还是会需要用到,用到时就要在Directive里用。

4. Service

   写可以独立运作的代码(与View无关),共用于元件(例如控制器)之间,不应该处理任何跟DOM有关的工作。

5. Filter

    对数据做一些修理,不应该处理任何跟DOM有关的工作。

6. Config

    用来定义路由规则,不应该处理任何跟DOM有关的工作。

上面是一些教程结合我自己的总结,最常强调注意一点是对DOM操作的地方。对于这些元件我没有举例子,贴代码没什么意思,如果想学习的,还是要自己去实践。
 


我时常想着一句话“当你知道一个工具的30%,你就能用它做70%的事”,所以学习一个框架的时候,不需要完完整整从头看到尾,当了解差不多了就可以开始干活。开始学习AngularJS,只需知道什么是双向数据绑定就行了,这是最关键、最需明白的。

写一个简单的示例如下。

HTML:

 
doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <script src="angular.js">script>
    <script src="HelloAngular_bind.js">script>
head>
<body>
    <div ng-controller="HelloAngular">
          <p>x :<input type="text" ng-model="x" />p>
          <p>y :<input type="text" ng-model="y" />p>
          <p>x  +  y :<span ng-bind="x*1+y*1">span>p>
    div>
body>
html>

上海尚学堂前端培训 www.shsxt.com

JS:


function HelloAngular($scope) {
    $scope.x = 1;
    $scope.y = 2;
}

PS:例子感受一下就行,没有必要深究,但应该对data与view的互相影响有些感觉。

上海尚学堂前端培训整理编辑,欢迎点击访问并获取前端相关学习资料。
 

分享:0

电话咨询

客服热线服务时间

周一至周五 9:00-21:00

周六至周日 9:00-18:00

咨询电话

021-67690939
15201841284

微信扫一扫