您的位置:澳门新葡萄京娱乐网站 > web前端 > 今后就先导运用 AngularJS 的多个原因

今后就先导运用 AngularJS 的多个原因

2019-12-22 07:03
function ActivitiesListCtrl($scope) { $('activities/list.json').success(function (data) { $scope.activities = data; }}

控制器


现在我们就用ng-controller指令来创建一个简单的控制器定义,如下所示:

<div ng-app="" ng-controller="MyController">

请输入一个名字:<input type="text" ng-model="person.name"> 

Hello  

</div>    

<script>
function MyController($scope) {
   $scope.person = {
      name: "World"
   };
}
</script>

如上所述,我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性,那参数$scope是什么呢,代表什么意思呢。

现在我们就来解答MyController对象参数 —— $scope。

$scope就是把一个DOM元素连结到控制器上的对象,它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象,指向应用程序作用域内的所有HTML元素和执行上下文。作用域呢,就是作为$scope的数据属性关联到DOM上的,并且能在需要调试的时候被获取到。

要明确创建一个$scope对象,我们就要给DOM元素安上一个controller对象,使用的是ng-controller 指令属性。

所有$scope都遵循原型继承,这意味着它们都能访问父$scope们,对任何属性和方法,如果AngularJS在当前$scope上找不到,就会到父$scope上去找,如果在父$scope上也没找到,就会继续向上回溯,一直到$rootScope上,这个$rootScope是最顶级的$scope,它对应着含有 ng-app指令属性的那个DOM元素,也就是说根作用域关联的DOM就是ng-app指令定义的地方。

也就是说,拥有了$scope,我们就可以操作作用域内任何我们想要获取的对象数据。

[javascript]
angular. 
    module('MyServiceModule', []). 
    factory('notify', ['$window', function (win) { 
    return function (msg) { 
        win.alert(msg); 
    }; 
}]); 
  
function myController(scope, notifyService) { 
    scope.callNotify = function (msg) { 
        notifyService(msg); 
    }; 

  
myController.$inject = ['$scope', 'notify']; 

这里我们简单的使用指定的HTTP GET方法替换了本地的javascript数据。传递了文件名字来获取相关数据。这和jQuery的方式非常类似。以上我们使用success方法确保数据返回,并且将数据绑定到了$scope上。静态的列表显示的很好,但是这里我们希望能够根据用户选择自动排序。这里我们添加一个简单的下拉菜单:

指令:ng-bind


指令ng-bind和AngularJS表达式{{}}有异曲同工之妙,但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

<div ng-app="">
    请输入一个名字:<input type="text" ng-model="name" />
    Hello 
</div>

        为了而得到核心的AngularJS服务,只需要添加一个简单服务作为参数,AngularJS会侦测并且提供给你:

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

指令介绍


AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”,是用来扩展浏览器能力的技术之一,在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行,这使得指令可以为DOM指定行为,或者改变它。

AngularJS通过称为指令的新属性来扩展的HTML,带有前缀ng-,我们也可以称之为“指令属性”,它就是绑定在DOM元素上的函数,可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。

AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”,它本质上只是一个当编译器编译到相关DOM时需要执行的函数,可以写在元素的名称里,属性里,css类名里,注释里。

当浏览器启动、开始解析HTML时,DOM元素上的指令属性就会跟其他属性一样被解析,也就是说当一个Angular.js应用启动,Angular编译器就会遍历DOM树来解析HTML,寻找这些指令属性函数,在一个DOM元素上找到一个或多个这样的指令属性函数,它们就会被收集起来、排序,然后按照优先级顺序被执行。

Angular.js应用的动态性和响应能力,都要归功于指令属性,常见的有:ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

关于“指令属性”就先暂时介绍这些,相信你已经对它有初步的了解,接下来我们就开始逐一的深入的学习它们。

        数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定是的代码更少,你可以专注于你的应用。

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

指令:ng-click

AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。

 <div ng-app="" ng-init="click=false">
     <button ng-click="click= !click">隐藏/显示</button>
     <div ng-hide="click">
         请输入一个名字:<input type="text" ng-model="name" />
         Hello  
     </div>
 </div>

Controller
        controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

ng-controller directive设置了一个名字空间,这里我们可以添加angular的相关javascript来处理数据和表达式。ng-repeat是一个angular的重复对象,可以用来创建一系列的对象元素。当你想从Anguar中获取数据,你使用一个对应名字的controller方法,如下:

AngularJS表达式


AngularJS框架的核心功能之一 —— 数据绑定,由两个花括号{{}}组成,可以把数据绑定到HTML,类似Javascript代码片段,可以包含文字、运算符和变量,通常在绑定数据中用到,表达式可以绑定数字、字符串、对象、数组,写在双大括号内:{{ expression }}。

<div ng-app="" ng-init="name='Hello World'">
  {{ name }}
</div>

        我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化,不是字符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。

html lang="en" ng-app

控制器


AngularJS控制器控制AngularJS应用程序的数据,是常规的JavaScript对象。

ng-controller指令就是用来定义应用程序控制器的,并且同时创建了一个新的作用域关联到相应的DOM元素上。

所谓作用域就是一个指向应用模型的对象,它是表达式的执行环境,作用域有层次结构,这个层次和相应的DOM几乎是一样的,作用域能监控表达式和传递事件并且可以从父作用域继承属性。

每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域,因为有一些指令会生成新的子作用域,当新作用域被创建的时候,他们会被当成子作用域添加到父作用域下,这使得作用域会变成一个和相应DOM结构一个的树状结构。

额外的特性:测试

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

指令:ng-app


ng-app指令来标明一个AngularJS应用程序,并通过AngularJS完成自动初始化应用和标记应用根作用域,同时载入和指令内容相关的模块,并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。

引用方法很简单,如下所示:

<div ng-app="" ng-init="name='Hello World'">

</div>

如上引用,一个AngularJS应用程序初始化就完成了并标记了作用域,也就是div元素就是AngularJS应用程序的"所有者",在它里面的指令也就会被Angular编译器所编译、解析了。

        传统来说,当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View。这是一个手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。

最后,我们修改li标签来识别sortModel:

指令:ng-init


ng-init指令初始化应用程序数据,也就是为AngularJS应用程序定义初始值,通常情况下,我们会使用一个控制器或模块来代替它,后面我们会介绍有关控制器和模块的知识。

<div ng-app="" ng-init="name='Hello World'">

</div>

特性五:Directives(指令)

搞定!关键是添加在ng-repeat里的过滤器。orderBy过滤器帮助我们通过选择的内容来过滤内容。注意我们代码中没有监听用户的互动事件。没有使用callback或者事件处理。所有的这些都被Angular内部处理了。当然AngularJS提供了我们一个完整的教程,帮助你创建一个web应用,如果大家有兴趣可以看看!总结AngularJS快速的成为了JavaScript的主流框架,帮助你专业的从事web开发。如果你寻找或者评估一个成熟的JS前端框架的话,AngularJS应用成为你的评估对象之一。Via gbtags

控制器


控制器不仅声明属性也可以声明方法,如下所示:

当然如果是开发条件的需要,我们也可以将控制器写在外部文件中,那如上示例该怎么做呢,很简单,如下简单引用即可:

<script src="MyController.js"></script>
<div ng-app="" ng-controller="MyController">
       Your name:
       <input type="text" ng-model="username">
       <button ng-click="sayHello()">打招呼</button>
       <hr />
       {{greeting}}
  </div>

  <script>
 function MyController($scope) {
   $scope.username = 'World';
   $scope.sayHello = function() {
     $scope.greeting= 'Hello '   $scope.username   '!';
   };
 }
 </script>

特性三:MVC

添加正常的HTML标签。AngularJS directive可以在HTML属性中被访问,而表单式将使用两个大括号来标示:

简介#


AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HTML声明动态内容。

AngularJS有五个主要核心特性,如下介绍:

  • 双向数据绑定 —— 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然。

  • 模板 —— 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这些DOM,也就是说AuguarJS把模板当做DOM来操作,去生成一些指令来完成对view的数据绑定。

  • MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

  • 依赖注入 —— AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。

  • 指令 —— 可以用来创建自定义的标签,也可以用来装饰元素或者操作DOM属性。

特性四:依赖注入(Dependency Injection,DI)
        AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。

添加Angularscript标签到head标签里:

指令:ng-model


在AngularJS中,只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素,实现model和view的双向绑定。

<div ng-app="">

请输入任意值:<input type="text" ng-model="name" />

你输入的为: {{ name }}

</div>

 

添加directive:

[javascript]
myModule.directive('myComponent', function(mySharedService) { 
    return { 
        restrict: 'E', 
        controller: function($scope, $attrs, mySharedService) { 
            $scope.$on('handleBroadcast', function() { 
                $scope.message = 'Directive: ' mySharedService.message; 
            }); 
        }, 
        replace: true, 
        template: '<input>' 
    }; 
}); 

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" } ]; }

        针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

select ng-model="sortModel"

angular.
    module('MyServiceModule', []).
    factory('notify', ['$window', function (win) {
    return function (msg) {
        win.alert(msg);
    };
}]);
 
function myController(scope, notifyService) {
    scope.callNotify = function (msg) {
        notifyService(msg);
    };
}
 
myController.$inject = ['$scope', 'notify'];

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

        这里有一个非常简单的例子,用来演示一个input输入框和<h1>元素的双向绑定:

h3Sort:/h3select option value="name"Alphabetically/option/select

1、标记ng-app告诉AngularJS处理整个HTML页并引导应用:

Angular.js是Google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。当然,互联网上有很多其它的前端开发框架,但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了!在今天的这篇文章中,我们将介绍三个你应该使用Angular.js的重要原因,希望对大家有所帮助!原因一:Google开发的框架要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的,比如,Cappucino 还有 Knockout。而angularJS是由互联网巨人Google组织开发的。这意味这你有更加强大的社区支持。谁都不希望第一天开始使用一个框架,第二天发现这个框架已经被遗弃了吧!其实这不是Google第一次尝试开发JavaScript的前端框架,大家可能还记得Web Toolkit,用来帮助你将java代码转化为javasscript代码。过去google的wave推广用它来开发项目。随着HTML5,CSS3和javascript的发展,Google发现web应用并非意味着只使用纯Java来实现。AngularJS将帮助标准化的开发web应用结构并且提供了针对客户端应用的未来开发使用的模板。versin 1.0 发布在6个月前,已经被很多的应用实践过了,包括商业应用及其产品。AngularJS作为可选的架构必将成为整个开发社区的明星。因为AngualrJS是google开发的产品,所以注定了你将有一个坚实的基础,相信它能够成为你的最佳选择!原因二:AngularJS非常全面类似 Backbone 或者 JavaScriptMVC,anguar是一个快速的前端开发解决方案。没有其它的插件或者架构足以开发数据驱动的web应用。下面列出了AnguarJS的一些特性:方便的REST: RESTful逐渐成为了标准的服务器和客户端沟通的方式。使用一行javascript代码,你就可以快速的从服务器端得到数据。AugularJS将 这些变成了JS对象,作为Model,遵循MVVM(model view view-model)设计模式。MVVM救星:Model将和ViewModel互动,将监听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会帮助你处理所有的重量级内容,提供一个富客户端的超棒体验!原因三:花几分钟就可以开始开发学习Angular非常简单。添加几个属性到你的HTML中,你可以使用5分钟搭建一个应用!添加ng-app directive到html标签,这样Angular知道应该运行:

        这里肯定有更好的解决方案!那就是AngularJS的双向数据绑定,能够同步DOM和Model等等。

图片 1

        指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

 

[html] 
<input type="text" ng-model="yourName" placeholder="Enter a name here"> 

 

AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言,AngularJS可以通过双向数据绑定自动从拥有JavaScript对 象(模型)的UI(视图)中同步数据。

ViewModel
        viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。

 

        DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。

<h1>Hello, {{yourName || 'World'}}!</h1>注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式

AngularJS内含了测试用例可以帮助你更方便的执行测试。为什么不用呢?

 

[javascript]
<my-component ng-model="message"></my-component> 

JS是一个动态的解析性语言,而不是编译类型的,因此非常的难写测试。

>>AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。

特性二:模板

        这里是一个例子,它监听一个事件并且针对的更新它的$scope ,如下:

    <div ng-controller="AlbumCtrl">
      <ul>
        <li ng-repeat="image in images">
          <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
        </li>
      </ul>
    </div>

        你是不是也希望浏览器可以做点儿有意思的事情?那么AngularJS可以做到。

[html] 
<html ng-app> 

特性一:双向数据绑定

AngularJS被开成一个可测试的框架。它甚至包含了点对点的单元测试runner。如果你喜欢这个特性,

        最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签,然后开发者拿过来添加上功能,通过数据绑定将会使得这个过程非常简单。

[html] 
<script src="...angular.js"></script> 

    function AlbumCtrl($scope) {
        scope.images = [
            {"image":"img/image_01.png", "description":"Image 01 description"},
            {"image":"img/image_02.png", "description":"Image 02 description"},
            {"image":"img/image_03.png", "description":"Image 03 description"},
            {"image":"img/image_04.png", "description":"Image 04 description"},
            {"image":"img/image_05.png", "description":"Image 05 description"}
        ];
    }

<my-component ng-model="message"></my-component>使用一系列的组件来创建你自己的应用将会让你更方便的添加,删除和更新功能。

 

 

AngularJS可以让你扩...

[javascript] 
function AlbumCtrl($scope) { 
    scope.images = [ 
        {"image":"img/image_01.png", "description":"Image 01 description"}, 
        {"image":"img/image_02.png", "description":"Image 02 description"}, 
        {"image":"img/image_03.png", "description":"Image 03 description"}, 
        {"image":"img/image_04.png", "description":"Image 04 description"}, 
        {"image":"img/image_05.png", "description":"Image 05 description"} 
    ]; 

 
<div ng-controller="AlbumCtrl"> 
  <ul> 
    <li ng-repeat="image in images"> 
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}"> 
    </li> 
  </ul> 
</div> 

        在AngularJS中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容。

View
        view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考,controller定义行为,view处理布局和互动。

>>DOM然后成为AngularJS编译器的输入。

 

myModule.directive('myComponent', function(mySharedService) {
    return {
        restrict: 'E',
        controller: function($scope, $attrs, mySharedService) {
            $scope.$on('handleBroadcast', function() {
                $scope.message = 'Directive: ' mySharedService.message;
            });
        },
        replace: true,
        template: '<input>'
    };
});
然后,你可以使用这个自定义的directive:

        我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的,毫不影响的应用到web应用中。

        viewmodel是$scope的对象,只存在于AnguarJS的应用中。$scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。

function EditCtrl($scope, $location, $routeParams) {
     // Something clever here...
}        你也可以定义自己的服务并且让它们注入:

>> HTML模板将会被浏览器解析到DOM中。

AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML词汇,从而在web应用程序中使用HTML声明动态内容。

[html] 
<h1>Hello, {{yourName || 'World'}}!</h1> 

<!doctype html>
<html ng-app>
  <head>
    <script src=";
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello, {{yourName || 'World'}}!</h1>
    </div>
  </body>
</html>

<input type="text" ng-model="yourName" placeholder="Enter a name here">4、最后,标签中的正文是应用的模板,在UI中显示我们的问候语:

 

Model
        model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes,使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性,这种方法使得我们更少使用应用的原型。

<html ng-app>2、这行载入AngularJS脚本:

[javascript] 
function EditCtrl($scope, $location, $routeParams) { 
     // Something clever here...  

        这里有一个例子,我们使用ng-repeat指令来循环图片数组并且加入img模板,如下:

>>所有的指令都负责针对view来设置数据绑定。

[html]
<!doctype html> 
<html ng-app> 
  <head> 
    <script src="; 
  </head> 
  <body> 
    <div> 
      <label>Name:</label> 
      <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
      <hr> 
      <h1>Hello, {{yourName || 'World'}}!</h1> 
    </div> 
  </body> 
</html> 

<script src="...angular.js"></script>3、本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量:

本文由澳门新葡萄京娱乐网站发布于web前端,转载请注明出处:今后就先导运用 AngularJS 的多个原因

关键词: