AngularJS核心特性解析-优快云博客

本文深入探讨AngularJS的四大核心特性：MVC架构、模块化、指令系统与双向数据绑定，解析其工作原理及应用场景，适合前端开发者学习。

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

此部分为AngularJs的基础部分，还在深入了解中ing….,若有某处不正确请原谅

四大特性

① MVC
前端的MVC模式，其中M(model 数据模型层)、V（View 视图层）、C(controller 控制层)

A. model(数据模型) –> 如<input type="text" ng-model="username"/>上述的整个<input>是模板，定义了一个叫username的模型，用来进行数据绑定和抓取《–模板：一种HTML格式的字符串，如template:字符串或 templateUrl:xxx.html –》

B. view(视图) –> 在AngularJs中指的是浏览器加载和渲染后根据模板、控制器、模型信息修改后的DOM

C. controller(控制器) –> 是指一个JavaScript函数，用来增强除根作用域以外的作用域实例，一般用ng-controller来表示

②模块化 (ng-app=”xxx”)

A. 为什么要使用模块化：
<1> 增加可重用性
<2> 实现加载顺序的自定义
<3>在单元测试中，不必加载所有的内容

B. 大致模块包括有：

AngularJs中模块是一个容器，一切都在模块下进行操作的
eg: angular.module(“应用app名称”，[需要依赖的模块])

③指令系统

A自定义标签（指令）–> 在模块的基础上创建指令directive,且在后跟函数return一个键值对组合,代码包括如下 ->

    <1>restrict:
    //定义标签使用方法AECM(Attibute,Element,Class,Comments)

    <2>template: 
    //定义标签的模板用来替换自定义标签的字符串

    <3>replace:
    //是否支持替换

    <4>templateUrl:
    //模板 xxx.html 页面

    <5>transclude:
    //是否支持内嵌 （先让transclude=true;再者使用ng-transclude属性定义内部嵌套位置）

   B.如何复用指令（指令与控制器之间的交互）
   在指令中添加属性，并在link属性的方法内添加响应事件

    link:function(scope.element,attr){
        scope: 作用越用于调用响应的作用域方法
        element:指代创建的标签
        attr:用于扩展的属性
        并通过scope.$apply(attr.添加属性名)
    }
    需要注意的是：
    <1> 在标签中的属性要使用驼峰法命名，但是指令中要全部换成小写
    <2> 指令中仅仅是调用属性的名字而已
    <3> 应用时，属性对象的值在控制器中执行方法

    C. 指令间的交互：
    <1> 首先创建一个基本的指令，在controller属性中添加public方法供外部使用
    <2> 创建其他指令，在require属性后，添加对应的指令依赖关系。在link中调用public方法

    D.独立作用域
    <1> 在指令内部配置项上加上 scope:{}
    <2> scope的绑定策略:
    “@” ||  字符串绑定 || 双引号内的内容当作字符串进行绑定
    “=” || 变量绑定 || 绑定内容是个变量
    “&” || 方法绑定 || 绑定的内容是个方法 

④双向数据绑定

 A.原理：
 <1>  angular对常用的dom事件、xhr事件做了封装，因而在里面触发进入angular的digest流程
 <2> 在digest流程里面，会从rootscope开始遍历，检查所有的watcher
 <3> AngularJs元素与模型双向绑定依赖于循坏检测它们之间的值，这种做法叫作“**脏检测**”

B.运用：
<1> 取值表达式"{{}}" 和 ng-bind指令
<2> 典型场景 ——> 表单

路由机制

①SPA(Single Page App – 单页面应用 – 实行无刷新视图切换)

② Ajax相对于路由机制的缺失
<1> Ajax请求不会留下History记录
<2> 用户无法直接通过URL进入应用中指定的页面（比如”保存书签”，“链接分享”）
<3> Ajax对SEO不友好

③前端路由机制的基本原理
<1> 使用hash(哈希),监听hashchange事件来进行视图切换
<2> 使用HTML5的history API,通过pushState()记录操作历史监听popState是按来进行视图切换

④流程图

⑤ngRoute.js包含的内容：
<1> 服务 $routeProvider用来定义一个路由表，即地址栏与视图模板的映射 <2> 服务$ routeParams 保存地址栏中的参数
<3> 服务 $route完成路由匹配，并提供路由相关的属性访问及事件 <4> 服务$ location

⑥如何使用ng路由机制
<1> 引入angular-route.js文件
<2> 模块声明中注入对ngRoute的依赖
angular.module(‘app名称’,[‘ngRoute’])
<3> $routeProvider核心方法： when(path,route) || otherwise(params)
其中的route参数是一个对象object 定义controller\template\redirectTo……
<4> 在主视图模板中指定加载子视图的位置
<div ng-view></div> 或 <ng-view></ng-view>
服务机制
①AngularJs提供了很多种服务，其中$http用于发送http请求，动态的请求数据

②创建自己的服务：
创建服务可以通过三种方式： factory,provider,service,但它们的本质都是Provider,只是封装了不同的写法而已

③自定义的特性
<1> 使用场景
由于在服务中抽取公共调用的方法，因此可以把多个控制器中相同的功能抽取出来，形成一个服务
<2> service都是单例（只存在一个实例化对象）一个应用生命周期内，只有一个服务的实例存在
<3> 服务的实例化都由注入器injector创建且实例化该服务

④常用的服务
$http || $filter || $interval || $timeout || $compile || $log || $parse || $locate
依赖注入机制

①注入方式
<1> 推断式注入
<2> 标记式注入
<3> 内联式注入

②常用方法
<1> 通过 angular.injector获得注入器
<2> .get(“serviceName”) 获得依赖的服务名字
<3> .annotate(‘xxx’) 获得xxx的所有依赖项

AngularJs基础