AngularJS概述

1.1. AngularJS概述

1.1.1. 介绍

简称：ng
Angular是一个MVC框架

AngularJS 诞生于2009年，由 Misko Hevery 等人创建，后为Google所收购。

是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

AngularJS有着诸多特性，最为核心的是：

MVC、模块化(编程)、自动化双向数据绑定、语义化标签、指令、依赖注入等等。

其他前端框架： VueJS 、 Avalon 、 React 、 BackBone 、 KnockoutJS

1.1.2. Angular的核心特性

指令、MVC、模块化、双向数据绑定

1.1.3. 原则

不推崇开发人员手动操作DOM, 其底层还是操作DOM
解放双手，简化了HTML的操作（从DOM中解放出来）

1.1.4. 优势

Angular 最大程度的减少了页面上的 DOM 操作
让 JavaScript 开发专注业务逻辑
代码结构更合理
维护成本更低
通过简单的指令把页面结构和数据结合
通过自定义指令实现组件化编程

1.1.5. 使用场景

AngularJS主要考虑的是构建 CRUD 应用，一般是：单页面的应用程序。

1.2. SPA -单页应用程序

SPA：Single Page Application
介绍：单页Web应用（single page application，SPA），就是只有一个Web页面的应用，

是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页面应用程序：
- ＳＰＡ项目
传统多页面应用程序：
- Web项目

1.2.1. 优势

1 无刷新加载页面，避免了不必要的跳转和重复渲染
2 更好的用户体验，让用户在web app感受native app的速度和流畅
3 减少了请求体积，节省流量，加快页面响应速度
4 可以选择性的保留状态，如音乐网站，切换页面时不会停止播放歌曲
传统ajax的劣势：

1 ajax请求不会留下历史记录

2 用户无法直接通过URL直接进入指定页面

3 ajax对SEO不友好

1.2.2. 劣势

不利于SEO【SEO（Search Engine Optimization）：汉译为搜索引擎优化】，但是有其他解决方案

1.2.3. 主要技术点

1 ajax
2 锚点的使用（window.location.hash #）
3 hashchange 事件

1.2.4. 实现思路

监听锚点值变化的事件，根据不同的锚点值，请求相应的数据
1 锚点（#）原本用作页面内部进行跳转，定位并展示相应的内容
2 NG中，锚点被用作请求不同资源的标识，请求数据并展示内容

1.3. AngularJS的基本使用

AngularJS 是自动执行的，只需要我们告诉它要做什么，在哪个位置去做

1.3.1. 使用步骤

1 引入 NG 的js文件
2 设置 ng-app 指令
3 给文本框添加 ng-model 指令
4 给按钮添加 ng-click 指令

1.4. directive -指令

AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集
指令是DOM元素上的一些标记，让NG给DOM元素添加一些特殊的行为
指令包含：内置指令和自定义指令

1.4.1. 指令是什么

将前缀为 ng- 的属性称之为指令，其作用是为DOM元素绑定数据、添加事件等

指令的值是一个：表达式

1.4.2. 指令的类型

属性（A）、元素（E）、类（C）、注释（M）

1.4.3. 常用指令

1.4.3.1. ng-app

作用：该指令用来启动一个AngularJS应用
理解：指定AngularJS应用程序管理的边界，只有在ng-app内部的指令才会起作用
解释：

ng-app 指令指定了应用的根元素，通常放置在页面的根元素，也可以是任意的元素

例如：body或html标签

应用程序运行时，会自动执行边界内部的其他指令。

标记的范围尽可能小，提高性能

注意：每个页面中可以出现多次 `ng-app` 指令（不推荐！）

如果是多个需要手动引导：`angular.bootstrap()`

1.4.3.2. ng-click

作用：用来指定DOM元素被点击时执行的事件
语法：ng-click="expression"

1.4.3.3. ng-model

作用：绑定数据，在 input/select/textarea 标签中使用
说明：

ng-model指令将尝试把属性绑定到当前作用域中。

如果当前作用域中没有该属性，那么AngluarJS会帮我们隐式创建并且添加到当前作用域中。

1.4.3.4. ng-init （了解）

作用：初始化属性的值
语法：ng-init="uName='Jack'"

1.5. expression -表达式

介绍：是一些JavaScript的代码片段主要被用在插值绑定或者直接作为指令的属性值

从JS角度，使用运算符和数据连接起来的有结果的代码就是：表达式

注意：不带分号

例如：

可以使用 console.log(); 打印出来，或者

console.log( expression );

可以用作赋值运算符的右值

var test = expression;

<p>{{"hello" + "world"}}</p>

1.6. AngularJS的执行过程分析

示例代码：

<p>Hello {{user.name}}</p>

</body>

1.6.1. 执行过程说明

1 ng-app告诉AngularJS让它来管理 body内部的代码
2 ng-app指令创建了一个对象，对象中包含了AngularJS的相关内容，例如：数据模型
3 ng-model指令查询数据模型中有没有 user 对象以及name属性，没有则创建
4 创建user对象以及name属性，并初始化name值为：空字符串
5 表达式 {{user.name}} 从数据模型中查找有没有该数据，如果有就取出来，并展示
6 ng-model和{{}} 中的 user.name 指向的是数据模型中同一个数据
7 文本框值的变化会导致数据模型的变化，数据模型的变化也会导致表达式的变化

1.6.2. 案例强化

加法计算器案例

1.7. 查看AngularJS的文档

目标：学会查看官方文档资料

1.7.1. 离线文档和在线文档

AngularJS官方文档
ng中文文档 - 1
ng中文文档 - 2

1.8. module -模块

所有的其他内容，都是基于模块的，有模块才有其他的内容！

模块是一个容器包含了应用程序的不同组成部分，并且这些内容必须要依附于一个模块

例如：controllers, services, filters, directives, configs 等

模块是应用程序的组成单元，例如：登录模块、注册模块、商品列表模块等，这些模块

组合在一起构成了一个完整的应用程序。

1.8.1. 创建模块

语法：var app = angular.module(moduleName, []);
作用：创建一个模块，让AngluarJS对整个内容进行模块化管理
说明：模块也可以被创建多次，但很少这么做
示例：

// 第一个参数：模块名称，字符串

// 第二个参数：数组，用来添加当前模块的依赖项

var app = angular.module("firstApp", ["otherModuleName"]);

1.8.2. 获取模块

语法：var app = angular.module(moduleName);
作用：获取指定的模块

1.9. controller -控制器

需要配合ng-controller指令来使用

1.9.1. 创建控制器

语法：app.controller(ctrlName, callback);
作用：创建一个控制器，控制器必须出现在某个模块下
示例：

app.controller("DemoController", function($scope) {

// $scope 相当于当前的数据模型

});

1.9.2. 控制器的作用

1 初始视图中使用的数据，是存储数据的容器
2 通过$scope对象把数据模型或函数行为暴露给视图
3 监视模型的变化，做出相应的逻辑处理

1.9.3. $scope的说明

1 $scope是控制器和视图之间的桥梁，用于在控制器和视图之间传递数据
2 推荐：给 $scope 添加数据应该使用对象，而不是作为其属性
2 在控制器中暴露数据模型（数据和行为），在视图中通过指令或表达式来使用
- 对比：局部变量
4 注意：$scope这个名称必须这么写！
5 $scope 是在控制器创建的时候，被注入进去的

1 ng 在使用的时候，页面中只要有 ng-app 就会创建一个 scope，名字是：$rootScope

2 $scope 是 HTML（视图）背后的“男人” ---->

视图：女人，负责美（展示）

$scope：男人，负责提供美的资源（数据）

3 所有的控制器都继承自 $rootScope

4 继承是按照：原型式继承来实现

5 对于HTML来说，参照原型式继承：子节点继承自父节点

1.10. 数据绑定方式

1.10.1. 双向数据绑定

一般通过 ng-model 指令实现
概述：

数据模型的值发生改变，就会导致页面值的改变；页面值的改变，也会导致数据模型中值的改变，

这种相互影响的关系就是双向数据绑定。

1.10.2. 单向数据绑定

一般通过 {{}} 表达式来实现
概述：数据模型的值发生改变，导致页面的值发生改变

1.11. MVC 与 MVVM

优势：代码分离（视图代码、控制器代码），职责分离，解耦
目的：解决应用程序展示结构、业务逻辑之间的紧耦合关系，实现模块化和复用
提高了代码的结构和可维护性，但是不会提高代码执行的效率

1.11.1. MVC介绍

MVC（Model–view–controller）是一种软件架构模式，

把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

MVC是一种应用程序的设计思想（不是设计模式）

Model 进行数据的存储和数据的处理方法（CRUD）
View 展示数据
- 在Angluar中，View指的是在页面中被 ng-app 指令包裹的HTML代码
Controller 是应用程序中处理用户交互的部分
- 通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据，是数据和视图的桥梁

例如：移动端和PC端两个View，共享同一个Model

在MVC设计模式中， Model 响应用户请求并返回响应数据，

View 负责格式化数据并把它们呈现给用户，业务逻辑和表示层分离，

同一个 Model 可以被不同的 View 重用，所以大大提高了代码的可重用性。

1.11.2. MVVM

是由 MVC 模式演变出来的！
组成：

M: model 模型，相当于 User（构造函数）

V: view 视图， ng-app 管理的页面

VM: ViewModel 视图模型在Angular中就是：$scope

1.11.2.1. ViewModel

1 $scope实际就是MVVM模式中的VM（视图模型）
2 Angular中大量的使用$scope, 盖过了C（控制器）的概念，所以很多人将其称为MVVM框架
3 不要深究到底是什么类型（MVC/MVVM），重要的是学会使用。
4 MVW ===> "Model View Whatever"
5 MVVM 首先出现在微软的WPF 中

1.11.3. 案例：用户注册

1.11.3.1. localStorage 的基本使用

getItem(keyName)：读取，参数类型：string
setItem(keyName, keyValue)：设置，参数类型：string

1.11.3.2. 参考

localStorage - MDN
localStorage的基本使用

1.12. $watch -监听数据

语法：$scope.$watch(attrName, callback, flag);
作用：监听$scope中数据模型的变化，无法监视其他的数据（例如，普通变量）
注意：调用$watch方法时，会立即被调用一次。

app.controller("demoController", function($scope) {

$scope.name = "jack";

// 参数一：表示监听的$scope中的属性名称，类型为：字符串

// 参数二：表示数据变化执行的回调函数，有两个参数分别是：当前值与变化之前的值

// 参数三：比较方式，false：表示比较引用；true：表示比较值。默认值为false

$scope.$watch("name", function(curValue, oldValue) {

// 只要被监听的数据发生变化，就会指定该回调函数中的代码！

// 略过第一次执行

if(curValue === oldValue) return;

});

1.13. 启动NG的方式

1 通过 ng-app 指令启动
2 手动启动：angular.bootstrap(document, ['MyModule'])

// 等待文档加载完成后，启动 angular

angular.element(document).ready(function() {

angular.bootstrap(document, ['MyModule']);

});

1.14. 其他

1.14.1. 多个app

注意：不推荐在同一个页面中创建多个 ng-app
注意：ng只会找到第一个 ng-app 并且启动，如果启动其他的，需要手动启动

1.15. 框架和库的区别

1.15.1. Library

jQuery is a library， Angular is a framework
jQuery是API的集合，封装DOM操作，提高开发效率

使用jQuery的思路：

1 想要获取元素，我调用 $(selector)

2 元素绑定事件，我调用 .on()

3 进行什么DOM操作，我调用什么方法完成

总结：你告诉jQuery你要做的操作，jQuery就能帮你做好。

**在使用库的过程中，开发人员是控制者**

1.15.2. Framework

框架规定了一种编程方式
使用框架的时候，由框架控制一切，我们只需要按照规则写代码

Angular提供了一套完整的解决方案，所有的流程都设定好了

我们只需要按照流程规则，把我们的代码进行填坑。

1.15.3. 主要区别是：

控制反转，框架中控制整个流程的是框架
You call Library, Framework calls you.
好莱坞原则：Don't call us, we'll call you.

1.16.1. angular代码风格

1.16.2. 模块化

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

前端面试重要问题总结（前端100问小结）（四）
第 31 题：改造下面的代码，使之输出0 - 9，写出你能想到的所有解法。 for (var i 0; i< 10; i){setTimeout(() > {console.log(i);}, 1000) }题目讨论方法一原理： 利用 setTimeout 函数的第三个参数，会作为…...
2024/4/20 8:54:34
迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域
一个项目是由许多人分工写的，因此必须要合理地拆散，于是有了模块化。体现在工作上，PM通常它这为某某版块，某某频道，某某页面。某一个模块，必须是包含其固有的数据，样式，HTML与处理逻…...
2024/4/21 4:25:43
迷你MVVM框架 avalonjs1.5 入门教程
avalon经过几年以后，已成为国内一个举足轻重的框架。它提供了多种不同的版本，满足不同人群的需要。比如avalon.js支持IE6等老旧浏览器，让许多靠政府项目或对兼容性要求够高的公司也能享受MVVM的乐趣。avalon.modern.js支持IE10以上版本&#…...
2024/4/21 4:25:42
前言——前端转型之殇
前言——前端转型之殇比人本是一名Android开发人员，奈何受到创业大潮之洗脑，义无反顾加入了创业大军。辗转反侧，摸爬滚动，偶然机会需要进行前端整站架构开发。浏览器兼容、PC\APP\微信三端兼容、SEO、服务端渲染加速等&#xff0…...
2024/5/8 14:41:30
javascript实现数据双向绑定的三种方式
前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding)，例如mvvm框架，数据驱动视图，视图状态机等，研究了几个目前主流的数据双向绑定框架，总结了下。目前实现数据双向绑定主要有以下三种。…...
2024/5/8 14:11:36
Web应用的组件化（一）——基本思路
原文链接：https://github.com/xufei/blog/issues/6 1. 为什么要做组件化？ 无论前端也好，后端也好，都是整个软件体系的一部分。软件产品也是产品，它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的&#xf…...
2024/4/26 6:54:41
前端入门参考：写给前端入门者的chat
前端是什么众多IT岗位中的一员，以HTMLCSSJS开发网站、微信公众号、小程序、WEBAPP的岗位，一个夹杂与UI与后台间的岗位。工作流程为从UI处得到原型图或者效果图，在项目（网站、微信公众号、小程序、WEBAPP）中还原图片效…...
2024/4/21 4:25:38
Hybrid移动应用在多页面大数据复杂业务背景下的优化实践方案
前言对于混合应用而言，性能问题一直被吐槽，虽然设备的内存的不断增大，很大程度上缓解了这个一问题，但是和原生应用来讲还是有很大区别，本人从Phonegap2.x开始，一直的探索和使用混合应用技术。当时的2.x…...
2024/4/21 4:25:37
前端开发 20 年变迁史
【CSDN 编者按】1990年，第一个Web浏览器诞生，而WWW的诞生直接拉开前端史的序幕。从静态页面到JavaScript，从依赖后端到自主开发，前端开发者从不被重视的“页面仔”逆袭为如今很多前端工程师的薪资比后端还高，从前端技…...
2024/5/8 19:46:44
2015前端框架何去何从
这篇文章将从 AngularJS ReactJS Polymer 这几个流行的框架入手，分析前端框架在这几年发展中的关键技术点，作为2015前端技术选型的参考。摘要: 初体验技术特点组件化应用架构总结 1. 初体验拿TODO来作为引子好了. Angular 的实现 React的实现(非flux架构…...
2024/4/20 4:03:42
avalon v0.4发布，迷你简单易用的MVVM框架
avalon已经从mass Framework抽取出来，没有任何依赖。主要优点如下使用简单，在HTML中添加绑定，在JS中用avalon.define定义ViewModel，再调用avalon.scan方法，它就能动了！兼容到IE6没有任何依赖，…...
2024/4/20 19:49:34
轻量级前端MVVM框架avalon - 执行流程2
接上一章执行流程1 在这一大堆扫描绑定方法中应该会哪些实现？ 首先我们看avalon能帮你做什么？ 数据填充，比如表单的一些初始值，切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ms-html)类名处理，如隔行变色&#xff0…...
2024/4/20 19:49:33
迷你MVVM框架 avalon的魔术
本文将深入介绍一下avalon的运作机理及与jQuery的区别。许多人都知道MVVM是MVC的一个变体，但那些MVC是在后端的，包括微软的WPF，这意味着这个V与我们前端接触到的V差别很大。后端的V就是使用各种模板拼凑成一个静态页面给前端。而前端的V在JS…...
2024/4/21 4:25:35
avalon.js的循环操作在表格中的应用
avalon.js的循环操作在表格中的应用一个JAVA开发，因为做的门户系统中，数据的展示加载的速度很影响使用效果，想到的是尽量少的请求后台，然后接触到了avalon，看介绍这是一个很轻很轻的MVVM架构的前端框架。我用的是avalo…...
2024/4/24 19:06:31
angular4之时间戳转日期格式
前言：最近在做前端的项目，刚开始做还是很羞涩的样子，不过好在有百度下大神的无私奉献还有我们家欢哥的热情帮助，这个问题解决了，宝宝只负责记录一下（虽然是我的任务）下面进入主题：之前：之后：之前我是在html中试着调ts中的方法，保存之前整个界面都没了，虽然你挺难…...
2024/4/21 4:25:33
用Angular制作单页应用视图切换动画
视图，动画单页应用（Single Page Web Application）往往有一个基本的要点，那就是把多个视图集成到一个网页内，然后去控制这些视图的显示和隐藏。此外，视图的切换动作几乎都会引入动画效果，以获得…...
2024/4/21 4:25:33
Ionic4+Angular8实现App主题样式切换
Ionic4Angular8实现App主题样式切换背景前置条件正文部分实现效果实现过程1、创建主题样式文件2、修改src/theme/variables.scss，导入刚刚创建的3个样式文件3、通过ionic g脚手架命令创建一个service4、通过观察者模式完善SettingsService5、修改src/app/app.compon…...
2024/5/6 12:52:29
angular 变更检测机制，视图中点击按钮后不能切换数据，再次点击按钮后才显示正确的列表内容
要实现的效果出现的问题本地上测试一切正常，打包后上传成元部件，发不成部件以后出现以下问题 1、页面初次加载列表内容显示正常、数量也显示正常 2、点击预警按钮不显示预警列表，点击报警按钮后显示预警的列表，再次点击报警按钮…...
2024/4/21 4:25:30
AngularDart Material Design 切换
2019独角兽企业重金招聘Python工程师标准>>> MaterialToggleComponent Selector: <material-toggle> material-toggle是一个可以是ON或OFF的按钮。用户可以点击切换按钮来更改状态。通常，当您有一个ON / OFF选项时，您可以使用切换按钮…...
2024/4/21 4:25:30
angular4中组件之间页面切换的数据传递，通过路由传递数据
例如在表格中有一个详情按钮，跳转到另外一个页面， 首先需要在所在页面和跳转页面引入路由组件和跳转界面路由组件 selectMsg(productID:number,productName:any,productCome:any){ // 跳转页面 return this.router.navigate([product-element,{"p…...
2024/4/26 13:17:38

AngularJS概述

相关文章

最新文章