Angular基础知识点

最新推荐文章于 2025-07-01 19:52:01 发布

唐宋元明清.

最新推荐文章于 2025-07-01 19:52:01 发布

阅读量688

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS

本文链接：https://blog.youkuaiyun.com/qq_22844483/article/details/53496415

AngularJS 专栏收录该内容

0 篇文章

订阅专栏

这篇博客深入探讨了Angular的基础知识，包括其核心机制——数据和逻辑驱动，如何通过语义化标签实现视图渲染，以及Angular如何检测并更新模块内的数据变化。同时，文章还详细介绍了如何引入外部模板，创建并使用controller、factory自定义服务，以及如何在AngularJS中进行服务间的直接依赖调用，解析AngularJS的加载机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

特点:
一个框架:许多类库的集合

以数据和逻辑作为驱动

核心机制

双向数据绑定
$scope.$watch('检测数据', function(旧值, 新值){})
视图(view)向模块(module)绑定,模块也向也向视图绑定
依赖注入
AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用，这导致了使用者和被使用者之间存在依赖关系。
依赖注入是指在运行时自动查找依赖关系，然后将查找到依赖传递给使用者的一种机制
常见的AngularJS内置服务有$http、$location、$timeout、$rootScope等
注入方式
推断式注入
没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称
这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。
行内注入
以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。
MVC
是一种开发模式
module(模型)
用来处理数据（读取/设置），一般指操作数据库。
view(视图)
用来展示数据，比如通过HTML展示。
controlle(控制器)
连接模型和视图的桥梁
降低模块之间的耦合度
耦合度是指模块之间的依赖关系
降低模块间的耦合度能减少模块间的影响
功能结构清晰可见
为合理组织代码提供了方便
衍生版本
MVVM、MVW、MVP、MV*等
模块化
可以最大程度的实现代码的复用

语义化标签

脏检查机制
$interval(function(){}, 1000)

检测模块内部是否有数据变化,有就更新到view中

指令
AngularJS自定义的HTML属性或标签，
这些指令都是以ng-做为前缀的
directive
自定义指令
app.direction('name', function(){})
return{以下的值}
restrict:ECMA
指令类型
replace:false/true
是否替换原指令
template:<p>hello</p>"
指令模版
templateurl

引入外部模版

		app.directive('tag', function(){
			return{
				restrict:'EA',
				replace:false,
				template:'<p>hellasaso</p>'
			}
		})

作用域
一个控制器产生一个作用域
根作用域
$rootScope:整个app内都可以访问
子作用域

controller

过滤器
格式化展示数据
在{{}}中使用 | 调用过滤器 ; 用 :传递参数
内置过滤器
1、currency将数值格式化为货币格式
2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。
3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
4、json将Javascrip对象转成JSON字符串。
5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位
6、lowercase将文本转换成小写格式
7、uppercase将文本转换成大写格式
8、number数字格式化，可控制小位位数
9、orderBy对数组进行排序，第2个参数可控制方向
自定义过滤器
通过filter

		app.filter('name', function(){
			return function(){
				逻辑; 
				return 格式
			}
		})

服务
服务是一个对象或函数，对外提供特定的功能
内建服务
1、$location是对原生Javascript中location对象属性和方法的封装
解析URL
2、$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
3、$filter在控制器中格式化数据。
4、$log打印调试信息
5、$http用于向服务端发起异步请求。
method:'get/post'; //请求方式
url:'' // 请求地址
headers: 请求头
data: // 请求主体
.success(function(data){data为请求到的数据})
.error(function(){错误返回的信息})
自定义服务

factory自定义服务

	app.factory('setTime', ['$filter', function($filter){
			var now = new Date();
			now = $filter('date')(now, 'yy-MM-dd')
			return now;
		}]);

app.service自定义服务

	app.service('setTime1', ['$filter', function($filter){
			var now = new Date();
			this.now = $filter('date')(now, 'yy/MM/dd')
		}]);

返回一个对象
定义服务就是要返回一个对象或函数以供使用。
value方法定义常量
app.value('常量1', '常量2')

直接依赖调用

模块加载
配置块
通过config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置
app.config('$logprovider', ['$log', function(log){$log.debugEnabled}])
运行块
可以直接运行相应的服务模块，AngularJS提供了run方法来实现
run方法还是最先执行的，利用这个特点我们可以将一些需要优先执行的功能通过run方法来运行
子主题 1

AngularJS的加载机制。

路由
一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。
SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用
使用Ajax异步请求数据，
然后实现内容局部刷新，
局部刷新的本质是动态生成DOM，
新生成的DOM元素并没有真实存在于文档中，
所以当再次刷新页面时新添加的DOM元素会“丢失”，
通过单页面应可以很好的解决这个问题。
单页面应用
原理
通过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点展示不同的视图
AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。
类似框架
类似的框架还有BackBone、KnockoutJS、Vue、React等