疯狂系列 -- 关于 AngularJS 的胡思乱想

slpgoblin 的个人博客 本文由博客端 https://www.goblin-blog.top 主动推送

5.1 AngularJS 入门

jQuery image.png
AngularJS image.png

5.1.1 AngularJS 的基本设计

【AngularJS 的组成】

image.png

AngularJS 效果举例

页面效果 image.png
代码实现 image.png
代码解析 导入 AngularJS 的代码库;
<body//> 标签中添加的 “ng-app”指令 -- 用于设置 AngularJS 应用范围(是一个未命名模块);
为两个 <input//> 分别双向绑定和命名,用“ng-model”指定对应的 AngularJS 变量名为 price 和 num;(“ng-model”指令,是视图(V)与控制器(C)之间的沟通桥梁)
通过 {{ AngularJS 表达式 }} -- {{ price * num }} 可以看到 HTML 元素 和 AngularJS 变量之间双向绑定的影响,当在 HTML 页面中改变 <input//> 标签的值时,对应的 AngularJS 变量也会发生变化,表达式的结果也相应改变;

【AngularJS 架构模式】

image.png

image.png

5.1.2 AngularJS 下载和安装

【AngularJS 库】

angular.min.js 无注释(体积小),适合实际开发
angular.js 带注释(没压缩),适合源码阅读
angular-xxx.min.js xxx 表示特定功能。
如 angular-animate.min.js 是动画支持库;
如 angular-cookies.min.js 是 Cookie 访问支持库;
angular-xxx.js xxx 表意同上,带注释没压缩。

【AngularJS API 文档】

访问地址 在线文档浏览
组成部分 功能函数 function
指令 directive
服务 service
过滤器 filter

【AngularJS 安装方法】

安装 AngularJS 库 在 HTML 页面中引入 AngularJS 的 JS 文件
代码位置 HTML 页面的开始位置
代码功能 导入 AngularJS 类库后,可在自己的脚本中使用 AngularJS 的特定功能;
代码内容 [注:src 属性的值,要对应具体版本的文件名称]
image.png

5.2 表达式

5.2.1 AngularJS 表达式

功能 在 HTML 页面上生成输出
分类 ① 简单表达式;② 复合对象表达式;
定义 必须在符号 -- 两对花括号 {{ }} 之内

5.2.2 简单表达式

举例
元素 ① 直接量(如 数字、字符、布尔值);② 变量;
① 直接量:image.png
[注:标签 <p//> 相当于换行了]
② 变量:image.png

5.2.3 复合对象表达式

元素 ① 对象;② 数组;③ 简单表达式?
① 对象: image.png
【解析】
一、用“ng-init”初始化了一个对象 fkit 和对象属性 name、domain;
二、在表达式内直接使用对象的属性 fkit.name 和 fkit.domain ;
[注:中文字符用单引号 ' ' 引起]
② 数组: image.png
【解析】
一、也是用“ng-init”初始化了一个数组 users[] 和数组元素 -- 3 个对象 {name:'...',age:'...'};
二、在表达式内直接使用了数组元素的两个属性值 users[i].name 和 users[i].age;

5.2.4 表达式自动处理空指针异常

容错性 AngularJS 自动判断某个变量是否存在,不存在则解析为空(不是 null)
代码 image.png
① 和 ② 的变量未定义,所以都将显示为空
显示 image.png
AngularJS JS
处理 null 和 undefined 值时不抛异常 遇见空,会报错
{{ a.b.c }} (( a 或 {} ) .b 或 { } ) .c

5.2.5 AngularJS 与 JS 表达式的区别

区别 AngularJS 表达式 JS 表达式
能否在 HTML 页面中出现 放在 {{ }} 中即可 不能
是否会出现 NullPointerException 自动处理表达式中的 null 和 undefined 会引起空指针错误
是否有分支、循环和异常处理 表达式不支持 表达式支持
是否支持过滤器的筛选功能 支持 不支持
表达式变量 基于 $scope ,是局部变量 基于 window 对象,是全局变量

【访问 JS 变量】

5.3 模块与控制器

模块的组成部分 module & controller
image.png 一、控制器是模块的下级程序单元;
二、控制器是模块内的重要作用域;image.png

【AngularJS 食用方式正解】

5.3.1 模块的 2 种加载方式

加载方式 定义 说明
匿名模块 ng-app 指定空属性值或者不指定值 AngularJS 会自动加载并创建 AngularJS 模块
命名模块 ng-app 指定属性值,即给新模块命名 需要再调用 angular 对象的 module() 方法

5.3.2 module() 对象方法创建模块

语法格式 angular.module( name, [requires], [configFunction])
< 参数 >
① 模块名 -- “字符串”;
② 依赖模块 -- 数组;
③ 配置函数 -- 此参数可略,因为 module() 的返回值是它创建的 angular.Module 对象,而对象中包含 config() 方法,调用对象的 config() 方法也能传入 configFunction 参数;
创建命名模块 image.png
① 用 ng-app 指令创建命名模块“fkApp”;
② 调用 module() 时,模块名作为一参传入;
③ 依赖数组为空,作为二参传入 -- 表明不依赖其他模块;

[总结]:

  1. 先用 ng-app 指令命名 & 绑定标签;
  2. 调用 angular.module() 方法创建模块;

【模块对象的 2 个全局属性方法】

方法 定义 (模块内)作用范围
moduleObject.value( globalVariableName,value ) 添加全局变量 一处定义,到处作用
moduleObject.constant( globalConstantName,value ) 添加全局常量 一处定义,到处作用

【controller() 对象方法创建控制器】

image.png

5.3.3 多个模块怎么加载

【bootstrap()指定加载模块】

bootstrap()
方法
示例代码
image.png
代码 ②解析 1、方法参数说明:bootstrap( DOM 对象,[某数组] );
2、一参:DOM 对象需要对应 HTML 元素;二参:要启动的模块列表;
3、bootstrap() 启动模块代码需要在最后;

5.3.4 作用域 $scope 对象

调用模块的 controller()方法注册控制器时,传入的第二个参数

是一个函数,在该函数中可声明一个 $scope 形参,该形参就表示了

AngularJS 控制器对应的作用域。①

~~从 AngularJS 的设计架构来看,$scope 充当了 AngularJS 应用的模
~~

,因此通过 $scope 作用域指定的属性,和 HTML 中 ng-model 对应

的变量是双向绑定的,也可自动显示在与指定 ng-bind 绑定的 HTML 元

素中。②

糊涂点
意思是 $scope 在哪,控制器就只能在哪起作用呗。(那 scope 是一个黑帮老大,它罩着控制器,在哪儿坐镇,控制器就可以在哪里威风)
$scope 作用域指定的“属性”和 ng-xxx 这两条指令绑定的“HTML 元素”勾勾搭搭的,可能有什么亲戚关系。: P
---- 就是说 scope 的左膀右臂就是 ng-model 和 ng-bind ,scope 通过这两个指令小弟绑架“HTML 元素”做这做那的。

注:ng-model 指令作用是,给“HTML 元素”起个 AngularJS 的家名;

ng-bind 指令作用是,将“表达式的值”与“HTML 元素”进行绑定 ;

【$scope 的用法】

说明 $scope 有点类似 C 中的命名空间,通过点 . 来访问属性
代码 image.png
解析 ---- 只需要在控制器的 function() 中传入 $scope 对象,就能点调所有与 ng-model 和 ng-bind 有关的“HTML 元素”让这些元素做这做那的。
页面效果 image.png

【$scope 的第三个指令小弟 ng-click】

演示一手点调 点一次方法,执行一下 count++(原本是 0 嘛),顺带输出 log 记录
代码 image.png

【模型的作用】

【$scope 能控制的指令有哪些】

5.3.5 作用域 $rootScope 对象

作用域 指定内容 使用范围 是否可用
scope@fkCtrl $scope.bookName @fkCtrl 本控制器,可用
$rootScope@fkCtrl $rootScope.theName @myCtrl 跨控制器,仍可用
代码 image.png

5.3.6 黑帮老大和教父的优先级

  • AngularJS

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

    12 引用 • 50 回帖 • 323 关注

赞助商 我要投放

1 回帖
请输入回帖内容 ...
  • Ahian

    感激你这个是好几年前的版本了 😳