如今就开始使用AngularJS的三个重要缘由

时间 2019-11-19

标签如今开始使用 angularjs 三个重要缘由栏目 AngularJS 繁體版

原文原文链接

缘由一：Google开发的框架

要知道开源界的不少框架都是开发人员因为我的兴趣或者激情而开发出来的，好比，Cappucino 还有 Knockout。而anguar.js是由互联网巨人Google组织开发的。这意味这你有更增强大的社区支持。谁都不但愿第一天开始使用一个框架，次日发现这个框架已经被遗弃了吧！javascript

其实这不是Google第一次尝试开发javascript的前端框架，你们可能还记得Web Toolkit，用来帮助你将java代码转化为javasscript代码。过去google的wave推广用它来开发项目。随着HTML5，CSS3和javascript的发展，Google发现web应用并不是意味着只使用纯Java来实现。php

AngularJS将帮助标准化的开发web应用结构而且提供了针对客户端应用的将来开发使用的模板html

versin 1.0 发布在6个月前，已经被不少的应用实践过了，包括商业应用及其产品。Angularjs做为可选的架构必将成为整个开发社区的明星。由于AngualrJS是google开发的产品，因此注定了你将有一个坚实的基础，相信它可以成为你的最佳选择！前端

缘由二：AngularJS很是全面

相似 Backbone 或者 JavaScriptMVC，anguar是一个快速的前端开发解决方案。没有其它的插件或者架构足以开发数据驱动的web应用。下面列出了AnguarJS的一些特性：java

方便的REST： RESTful逐渐成为了标准的服务器和客户端沟通的方式。使用一行javascript代码，你就能够快速的从服务器端获得数据。AugularJS将这些变成了JS对象，做为Model，遵循MVVM(model view view-model)设计模式。
MVVM救星：Model将和ViewModel互动（经过$scope对象），将监听Model的变化。这些能够经过View来发送和渲染，由HTML来展现你的代码。View能够经过$routeProvider对象来支配，因此你能够深度的连接和组织你的View和Controller，将他们变成导航URL。AngualrJS同时提供了无状态的Controller，能够用来初始化和控制$scope对象。
数据绑定和依赖注入：在MVVM设计模式中的任何东西不管发生任何事情都自动的和UI通讯。这帮助咱们去除了wrapper，getter/setter方法或者class定义。AngularJS将帮助咱们处理全部的这些内容，因此你能够处理数据像处理基本javascript数据类型，例如，数组同样简单。固然你也能够经过自定义处理复杂数据。正由于全部事情的发生都是自动的，因此你没必要调用一个main()来执行你的代码，而是经过依赖关系来驱动。
可扩展的HTML：大多数的网站都是使用非语义的<div>标签来搭建的。你须要本身在CSS的class中定义相关的DOM层次结构。而使用AngularJS，你能够操做XML同样操做HTML，给你无穷的方式来完成标签和属性定义。AngularJS经过本身的编译器和directives来完成相关的设置。
使用HTML模板：若是你曾经使用过Mustache ， Hogan.js，或者handlerbars的话，你就能够快速的理解AngularJS的模板引擎语法，应为它是纯HTML的。AngularJS经过DOM浏览来完成此类功能，使用上面提到的directives。模板被做为DOM元素传递到Angular的编译器中，能够被扩展，执行或者重用。这很关键，这样一来你就拥有了DOM组件，而非字符串，容许你直接的操做扩展DOM树。
企业级别的测试：AnguarJS并不依赖于第三方的插件或者是框架，包括测试。若是你熟悉QUnit, Mocha 或者 Jasmine的话，那么对于理解Angular的单元测试和Scenario Runner来讲就很是简单。

以上的这些基本的原则可以帮助知道你使用Angular来建立高效性能可维护的代码。只要你有代码保存数据，AnguarJS会帮助你处理全部的重量级内容，提供一个富客户端的超棒体验！angularjs

缘由三：花几分钟就能够开始开发

学习Angular很是简单。添加几个属性到你的HTML中，你可使用5分钟搭建一个应用！
添加ng-app directive到<html>标签，这样Angular知道应该运行：web

<html lang="en" ng-app>

添加Angular<script>标签到<head>标签里：express

<head>
...meta and stylesheet tags...
 <script src="lib/angular/angular.js"></script>

添加正常的HTML标签。AngularJS directive能够在HTML属性中被访问，而表单式将使用两个大括号来标示：json

<body ng-controller="ActivitiesListCtrl"> <h1>Today's activities</h1> <ul> <li ng-repeat="activity in activities"> {{activity.name}} </li> </ul> </body> </html>

ng-controller directive设置了一个名字空间，这里咱们能够添加angular的相关javascript来处理数据和表达式。ng-repeat是一个angular的重复对象，能够用来建立一系列的对象元素。设计模式

function ActivitiesListCtrl($scope) {
  $scope.activities = [
    { "name": "Wake up" },
    { "name": "Brush teeth" },
    { "name": "Shower" },
    { "name": "Have breakfast" },
    { "name": "Go to work" },
    { "name": "Write a Nettuts article" },
    { "name": "Go to the gym" },
    { "name": "Meet friends" },
    { "name": "Go to bed" }
  ];
 }

这里咱们建立了一个方法，名字和前面的ng-controller directive同样，这样咱们页面能够找到对应的Angular方法来执行。咱们传递了$(scope)对象来访问模板中的activities列表。提供了activities对应的name，咱们在页面中使用”{{expression}}”表达式展示出来。
或者你保存数据在服务器上，咱们一样可使用AJAX获取数据：

function ActivitiesListCtrl($scope) {
  $http.get('activities/list.json').success(function (data) {
    $scope.activities = data;
  }
}

这里咱们简单的使用指定的HTTP GET方法替换了本地的javascript数据。传递了文件名字来获取相关数据。这和jQuery的方式很是相似。

以上咱们使用success方法确保数据返回，而且将数据绑定到了$scope上。

静态的列表显示的很好，可是这里咱们但愿可以根据用户选择自动排序。这里咱们添加一个简单的下拉菜单：

<h3>Sort:</h3>
<select>
   <option value="name">Alphabetically</option>
 </select>

添加directive:

<select ng-model="sortModel">

最后，咱们修改<li>标签来识别sortModel：

<li ng-repeat="activity in activities | orderBy: sortModel">

搞定！关键是添加在ng-repeat里的过滤器。orderBy过滤器帮助咱们经过选择的内容来过滤内容。

注意咱们代码中没有监听用户的互动事件。没有使用callback或者事件处理。全部的这些都被Angular内部处理了。

固然AngularJS提供了咱们一个完整的教程，帮助你建立一个web应用，若是你们有兴趣能够看看！

总结

AngularJS快速的成为了javascript的主流框架，帮助你专业的从事web开发若是你寻找或者评估一个成熟的js前端框架的话，AngularJS应用成为你的评估对象之一。最重要的是：免费下载 - AngularJS.org。