AngularJS浅谈-博客


AngularJS是啥?(一脸懵逼)

简介:

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 具体点说:

  1. AngularJS 是一个 JavaScript 框架
    • AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中: <script src="../libs/angular.js/1.4.6/angular.min.js"></script>
      1. AngularJS 扩展了 HTML AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 ng-init 指令初始化 AngularJS 应用程序变量

那么,重点来了,AngularJs可以干啥啊?

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。 AngularJS 可以克隆和重复 HTML 元素。 AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素”背后”添加代码。 AngularJS 支持输入验证。

  • 举个荔枝(例子)吧!12345678910111213141516171819202122232425262728293031<<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>例子</title> <script src="angular-1.0.1.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> 名:<input type="text" ng-model="lastName"><br> 姓:<input type="text" ng-model="firstName"><br> <br> 姓名:{{firstName+" "+ lastName}} <br> 姓名:{{fullName()}}</div><script> var app=angular.module('myApp',[]); app.controller('myCtrl',function($scope){ $scope.firstName="重庆"; $scope.lastName="黄"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } });</script> </body></html>
  • 初始化加载流程
    • 统一过程: 1、浏览器载入HTML,然后把它解析成DOM。 2、浏览器载入angular.js脚本。 3、AngularJS等到DOMContentLoaded事件触发。 4、AngularJS寻找ng-app指令,这个指令指示了应用的边界。 5、使用ng-app中指定的模块来配置注入器(\$injector)。 6、注入器($injector)是用来创建“编译服务(\$compile service)”和“根作用域(\$rootScope)”的。 7、编译服务(\$compile service)是用来编译DOM并把它链接到根作用域(\$rootScope)的。
    • 具体过程: AngularJS 应用程序由 ng-app 定义。应用程序在 内运行。 ng-controller=”myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。 AngularJS 使用$scope 对象来调用控制器。 在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。 控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。 控制器在作用域中创建了两个属性 (firstName 和 lastName)。 ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。
    • 记住一点:在大型的应用程序中,通常是把控制器存储在外部文件中。 只需要把 <script> 标签中的代码复制到名为 js文件.js 的外部文件中即可,然后在script中引用js文件:

接下来说一下AngularJs中核心的集中特性吧!!

  • 先来个图!

MVC 模块化 自动化双向数据绑定

MVC(Model模型 View视图 Controller控制器)

首先要知道为什么要MVC?

  • AngularJs程序分为3部分:模板,表现层逻辑,数据(model)。 模板:我们用html,css写的ui视图代码,其中包含AngularJs的指令,表达式,并最终会被AngularJs编译机制编译为附加在dom树上。AngularJs的指令(directive)可以由我们自由扩展。 表现层逻辑:包括应用程序逻辑和行为。用javascript定义作为视图控制器逻辑。在AngularJs作为MVC框架,在控制器中我们无需添加对于dom级的事件监听,这些在AngularJs中已经内置了。在ui节点dom事件发生后AngularJs会自动转到scope上的某个行为(Action)逻辑。 数据:视图对象(viewobject)需要被AngularJs Scope(1.0中作为service出现)引用,可以使任何类型的javascript对象,数组,基本类型,对象。并且AngularJs会自动异步更新模型,即在ui发生改变的时他会自动刷新模型(mode),反之在模型发生改变的时候也会自动刷新ui。在这里我们不需要定义形如getter,setter的一些列方法。
  • MVC之间的关系,下面这张图看一下MVC中都包含些什么东西
  • 再看下面这张图-其中service是共用的的东西抽象出来的服务

模块化

  • AngularJs的模块(module):它是一个集合,相当于一个框子,由模型,视图,过滤器,服务等等组成
  • 我们都知道JavaScript很容易就写出全局函数,所以无论是用jQuery还是纯JavaScript,我们都会使用模块化的策略避免写出来的函数污染全局。

1234567891011121314

HTML代码:<!doctype html><html ng-app="HelloAngular"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="helloNgCtrl"> <p>{{greeting.text}},Angular</p> </div> </body> <script src="js/angular-1.3.0.js"></script> <script src="NgModule1.js"></script></html>

123456789101112

//JS代码1:var modelName = angular.module('modelName',[]);modelName .controller('contollerName',['$scope',function($scope){ $scope.greeting = {$scope.greeting={text:'hello'};}}]);//JS代码2function HelloAngular($scope){ $scope.greeting={ text:'hello' };}

很明显JS1代码函数污染了全局,而Js2代码通过一个模块进行封装,从而避免污染了全局。

在前面我们看到ng-app指令。它的作用是自动启动一个AngularJS应用,ng-app指令一般指派在应用的根元素上,比如,body或者html标签。在每一个HTML文档中,只能有一个AngularJS应用可以被自动启动,在HTML文档中第一个被找到定义在根元素上的ng-app指令将会作为自动启动的应用。 那我们在js代码中定义的模块和ng-app有什么关系呢?很明显,它是告诉AngularJS应用在启动时加载指定的模块,假设这里ng-app只是放一个纯标签,而不给它赋值。那么它就不知道这里该加载什么模块,于是,它也不认识在模块中定义的textController控制器。

  • 但是,赋值与否和启动一个AngularJS的应用无关:12345<body ng-app> <div ng-controller="helloNgCtrl"> <p>{{greeting.text}},Angular</p> </div> </body>

这样也是可以启动AngularJS应用,并实现name模型的绑定。

  • 看一下ng官方的模块切分方式
  • 最后看一下模块化的完整项目结构,有利于大家对项目的整体认知

双向数据绑定

  • 先来个官方例子:123456789101112131415161718<!doctype html> 2 <html ng-app> 3 4 <head> 5 6 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 7 8 </head> 9 10 <body>11 12 Your name: <input type="text" ng-model="yourname" placeholder="World">//一个输入框,默认内容为World13 14 <hr>15 16 Hello {{yourname || 'World'}}!18 </body>20 </html>

注:在输入框中输入任何字符都会立即绑定更新到页面. 这里采用ng-model指令(directive)绑定是模型scope属性yourname。 并采用表达式将yourname绑定到文本信息中。 这里只需要任何的dom时间监听,因为AngularJs内置了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WeaponZhi

Python爬虫入门(二)

上一篇文章大概的讲解了 Python 爬虫的基础架构,我们对 Python 爬虫内部运行流程有了一定的理解了,我们这节将用一些简单的 Python 代码实现Py...

44060
来自专栏mySoul

微信小程序自定义组件(二)

两个<custom-ul>以及<custom-li>两个组件都为自定义组件,如果进行通信会非常的难以操作,至此通过relations完成子父组件的定义,简化通信...

34330
来自专栏较真的前端

[译] 调试 RxJS 第1部分: 工具篇

19940
来自专栏北京马哥教育

大神带你 20 分钟学会 Ansible !

68220
来自专栏琦小虾的Binary

程序生成之编译、链接、加载浅析

程序生成之编译、链接、加载浅析 最近笔者看论文烦得慌,便又重新拾起之前没有完全完成的交叉编译,准备在网上找资料,好好研究一下。 讲道理,笔者其实对编译链接的...

33860
来自专栏代码GG之家

Scoops android app多主题架构(五)

原理分析 核心代码位置 https://github.com/52inc/Scoops/tree/master/scoops/src/main/java/com...

22090
来自专栏LanceToBigData

linux(五)之vi编译器

前面介绍了linux的常用命令和对文本的操作,接下来我将对大家领略一下vi编译器的强大功能。 希望大家觉得写的还不错的话可以点个“推荐”哦! 一、vim/vi编...

24380
来自专栏林冠宏的技术文章

Golang, 以17个简短代码片段,切底弄懂 channel 基础

(原创出处:https://cloud.tencent.com/developer/user/1148436/activities) 前序:   因为打算自己搞...

39550
来自专栏散尽浮华

Saltstack自动化操作记录(2)-配置使用

之前梳理了Saltstack自动化操作记录(1)-环境部署,下面说说saltstack配置及模块使用: 为了试验效果,再追加一台被控制端minion机器192....

266110
来自专栏大内老A

WCF服务端运行时架构体系详解[下篇]

作为WCF中一个核心概念,终结点在不同的语境中实际上指代不同的对象。站在服务描述的角度,我们所说的终结点实际上是指ServiceEndpoint对象。如果站在W...

22470

扫码关注云+社区

领取腾讯云代金券