理解和学习AngularJS（一）

EastWoodYang 发布于2019-08-22 10:58 / 2510人阅读

摘要：为指令赋值函数名，即可运行。它也是一个对象，指向应用程序作用域内的所有元素和执行上下文。简而言之，是与指令元素相关联的当前作用域，可以理解为视图和控制器间的一个通道。它们被组织为模块形式，之后可以被另一个引用。

Angularjs

Angular是一款主旋律的MVVM框架，框架和传统的库不同：

类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等

框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout等。

Angular.js主要用于构建单页面web应用，提供了诸如：

1.解耦应用逻辑、数据模型和视图
2.AJax服务
3.依赖注入
4.浏览历史
5.测试和更多功能

简要解释Angularjs就是一个可以给HTML加上互动性的客户端js框架。我们需要明白如何让HTML适时调用js。

在Angular中，我们通过指令（Directives）给HTML加上行为。指令是一个在HTML标签上的标记，用来告诉Angular运行或者引用哪些js代码。为指令赋值函数名，即可运行。但这不是很好的方式，我们只需明白这就是指令如何绑定行为的

Angular模块（module）

模块是指写Angular应用的代码片段，这样可以使代码分离开来，因此代码会更好维护，可读和测试。还可以在module里定义代码依赖关系，可以调用一个模块，再在代码中定义这个模块依赖于另外两个。

var app = angular.module("store",[]);//store=>应用名,[]=>定义依赖关系,app为模块的实例对象

AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数, 第一个是模块的名称，第二个是依赖列表,也就是可以被注入到模块中的对象列表。

表达式

表达式{{}}允许你动态插入值到你的HTML当中。

控制器（Controller）

控制器帮助我们把应用内的数据信息显示到页面中，控制器是通过定义函数和变量，从而定义应用行为的地方。ng-controller定义了AngularJS 应用程序被控制器控制。

ng-controller帮助我们把控制器附属在html元素上，作为ng-controller属性的值，我们要写控制器名字，我们用as关键字这个属性值起个别名。我们将会在元素内的表达式中使用这个别名


    {{store.product.name}}
    ${{store.product.price}}
    {{store.product.description}}

(function () {
    var app = angular.module("store",[]);
    app.controller("StoreController", function () {
        this.product = gem;
    });
    var gem = {
        name: "trigkit4",
        price: 2.09,
        description: "..."
    }
})();

这个控制器的范围权限仅限于它所附属的元素

指令是触发javascript函数行为的html标记
模块是定义应用的各个组成部分
控制器定义应用的行为
表达式控制我们如何将信息显示在页面上

ng-app来把应用模块放到页面上 
ng-controller来把逻辑控制器放到页面上
ng-show & ng-hide来通过表达式控制元素的显示与否
ng-repeat来循环一个数组中所有的数据

过滤器filter

angular提供了很多不同的过滤器，在相似的表示方式下，即取出一些数据，传递数据（竖线| 后跟表达式）给相应的过滤器，
有时候也可以给它加上相应的参数

{{data* | filter:option*}}

比如：
uppercase & lowercase

{{"trigkit4" | uppercase}} /*TRIGKIT4*/

还有比如限制过滤器（limitTo filter），可以控制字符的输出数量：

{{"My dictionary" | limitTo:8}} /*My dicti*/

指令Directives

Angularjs通过指令（directive）扩展HTML的语法，通过通过{{}}进行数据绑定

ng-app

ng-app属性声明所有被其包含的内容都属于这个AngularJS应用, 只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。如果不写该指令，angular是不会执行的。

ng-init

ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值。如下，为应用程序name赋初值：


    {{names}}

ng-model

只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。看下面实例：

http://codepen.io/hawx1993/pe...

ng-bind

ng-bind和Angularjs表达式{{}}很类似，不同的是ng-bind是在angular解析渲染完毕后才将数据显示出来的。还有就是表达式不能写在DOM元素的属性里，而指令可以。

http://codepen.io/hawx1993/pe...

ng-click

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

http://codepen.io/hawx1993/pe...

ng-hide="true"，设置HTML元素不可见。

ng-controller

控制器在AngularJS中的作用是增强视图。当我们在页面上创建一个新的控制器时，AngularJS会生成并传递一个新的$scope给这个控制器。可以在这个控制器里初始化$scope。

http://codepen.io/hawx1993/pe...

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

一般情况下，我们使用控制器做两件事：

初始化 $scope 对象

为 $scope 对象添加行为（方法）

ng-repeat


    
        
            
                {{"Name: " + x.name + ",Age: "+ x.age}}

$scope控制范围

$scope是一个将view（一个DOM元素）连结到controller上的对象。每一个Angular应用都会有一个 $rootScope。这个 $rootScope 是最顶级的scope，它对应着含有 ng-app 指令属性的那个DOM元素。

它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。

所有$scope都遵循原型继承，这意味着它们都能访问父$scope，也具有原型链那样的特性，即向上访问属性和方法，直到最顶层。

简而言之，$scope 是与指令元素相关联的当前作用域，可以理解为视图和控制器间的一个通道。当angular运行时，所有的$scope对象都会附加或者链接到视图中。

指令和作用域

指令通常不会创建自己的$scope，除了ng-controller和ng-repeat，他们会创建自己的子作用域并将他们附加到DOM元素上。

双向数据绑定

双向数据绑定意味着这些表达式会在属性改变的时候自动改变。当数据发生改变的时候，会使相应的视图进行改变，当我们的视图上发生改变的时候，可以促使相应的数据发生改变，这就是双向的数据绑定到一起了。

双向数据绑定节省了大量的样板代码。Angular 帮助你把构建应用的程序块划分为下面这几种类型：控制器(Controller)，指令(Directive)，工厂(Factory)，过滤器 (Filter)，服务(Service)和视图(View) (就是模板)。它们被组织为模块形式，之后可以被另一个引用。

双向数据绑定：数据模型（Module）和视图（View）之间的双向绑定。

双向数据绑定的优点是无需进行和单向数据绑定的那些CRUD（Create，Retrieve，Update，Delete）操作

双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

依赖注入

依赖注入的意思是你需要的东西不用由你创建，而是由第三方，或者说容器提供给你的。这样的设计符合正交性，即所谓的松耦合。

总之就是你不用关心对象的生命周期，什么时候被创建，什么时候销毁，只需直接使用即可，对象的生命周期由提供依赖注入的框架来管理。

第一个 AngularJS Web 应用

todoList demo

http://codepen.io/hawx1993/pe...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91550.html

【译】《精通使用AngularJS开发Web App》（一） --- 相关背景、社区、工具介绍

摘要：下一篇译精通使用开发二原版书名第一章之道这一章主要是介绍，包括这个框架以及它背后的项目。幸运的是，拥有一个活跃的，支持度高的社区。另外，社区还为已经存在的工具箱里贡献了许多有意思的工具。下一篇：【译】《精通使用AngularJS开发Web App》（二）原版书名：Mastering Web Application Development with AngularJS Ch...

ddongjian0000 2019-08-19 14:26 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（四）--- 深入视图，模板系统，模块和依赖注

摘要：模块和依赖注入细心的读者可能已经发现了，到目前为止所用到的例子都是使用的全局的构造函数来定义控制器的。这非常的简单，只需使用如下参数来调用即可控制器的名字字符串类型控制器的构造函数全局定义的控制器构造函数只适用于快速示例和原型开发。上一篇：【译】《精通使用AngularJS开发Web App》（三）下一篇：书名：Mastering Web Application Develop...

zr_hebo 2019-08-19 14:29 评论0 收藏0
[ 学习路线 ] 学完这些去阿里！GOGOGO

摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐以下知识点是前辈师兄总结 1、HTML/HTML5基础： 1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...

zhaochunqi 2019-08-28 18:06 评论0 收藏0
[ 学习路线 ] 学完这些去阿里！GOGOGO

摘要：以下知识点是前辈师兄总结基础语义化标签引进了一些新的标签，特别注意等，注意的标题结构理解浏览器解析的过程，理解的树形结构，及相应理解标签在各个浏览器上的默认样式代理样式，理解中的重置样式表的概念理解等功能性标签理解标签，理解文件提交过程推荐以下知识点是前辈师兄总结 1、HTML/HTML5基础： 1.0、语义化H5标签1.1、H5引进了一些新的标签，特别注意article...

learn_shifeng 2019-08-21 10:27 评论0 收藏0
[译]学习如何去学习 JavaScript - 5 个你应该如何花在学习 JS 上时间的建议

摘要：拥抱异步编程纵观发展史也可以说成开发的发展史，你会发现异步彻底改变了这场游戏。可以这么说，异步编程已成为开发的根基。这也是你应尽早在上投入大量时间的一处核心知识点，这其中包含和等重要概念。这也是最突出的一项贡献。原文地址：Medium - Learning How to Learn JavaScript. 5 recommendations on how you should spend ...

wanglu1209 2019-05-23 13:55 评论0 收藏0