AngularJS 学习之路（1）
2024-02-23 01:34:21
AngularJS 是一个 JS 框架，适用于以数据操作为主的 SPA （Single Page Application）应用。
不再是 “先查找元素在操作元素”，所有操作都以 “Model数据为中心”
AngularJS 的四大特性
- 采用 MVC 模型
- Model：模型，业务数据；在 AngularJS 中，就是存储于特定作用范围内的变量
- View：视图，模型数据在页面中的呈现
- Controller：控制器，负责创建、修改、删除模型数据，AngularJS 中，使用function来创建控制器
- 自动化双向数据绑定
- 依赖注入
- 模块化设计
AngularJS 中 ng 模块提供的指令
ngApp 用途：
- 初始化一个 AngularJS 应用程序
- 标记了AngularJS脚本的作用域
语法：
<element ng-app><element>
<element ng-app="xxx"><element>
<element data-ng-app="xxx"><element>
注意：一个 HTML 页面只允许使用一次 ngApp 指令，如果有多个 ng-app 指令，则只有第一个会被使用，同时只有 ngApp 范围内的 Angular 表达式才会被计算出对应的值。
ngInit：用于声明 Model 变量，初始化应用程序模型数据
语法：
<element ng-init="变量名=值;变量名1=值1">
注意：Model 变量声明时不能使用 var 关键字 和 new 关键字
- 使用 ngInit 指令声明模型数据 ----- 将 Model 和 View 混杂在一起，不推荐使用
- 使用Controller控制器 声明模型数据 ----- 实现了Model 和 View 的分离，且可以使用的数据类型更加广泛，推荐使用
1. 声明一个自定义的模块（module）
angular.module（'模块名', []）;
2. 在当前 AngularJS 应用中注册自定义模块
ng-app="模块名"
3. 在自定义模块中创建 Controller 函数，其中声明 Model 数据
$scope.模型变量名 = 值;
4. 在 View 中创建 Controller 对象的实例，指定其作用范围
<element ng-controller="控制器名"> 控制器的有效范围 </element>
5. 在控制器的作用范围内输入 Model 变量
使用 {{}} 输出 Model 变量的值
ngController：创建一个控制器对象的实例（即调用 Controller 函数）
语法：
<element ng-controller="控制器名"></element>
使用控制器创建的模型数据可以是如下类型：
1. String、Number、Boolean 基本类型的值
2. 数组类型
3. 使用任意方法创建的对象
ngBind：在当前元素的 innerHTML 上输出指定的表达式的值
语法：
<element ng-bind="表达式"></element>
此指令的作用与 {{}} 一样，只是可以防止闪动问题
ngRepear：为 HTML 增加循环功能，循环输出当前元素
语法：
<element ng-repeat=""></element>
ngIf：为 HTML 增加选择功能，只有在表达式值为true时，当前元素才添加到 DOM 树，否则就从 DOM 树上删除
语法：
<element ng-if=""></element>
$scope 和 $rootScope 的区别
- 每个控制器的实例都对应一个作用范围对象，即 $scope
- 在控制器中声明的 Model 数据，必须保存在一个作用范围内
- 为了在多个控制器共享数据，可以将 Model 数据保存在一个 “全局作用范围内” -- $rootScope -- 整个 AngularApp 中只能有一个 $rootScope 对象，而且这个对象是所有$scope 的父作用域对象
- 作用域对象间可以实现继承，只需要将某个控制器实例声明在另一个控制器实例的有效zuo'yong'yu'nei'bu'ji'ke
<body>
<div class="container">
<div ng-controller="c1">
<div ng-controller="c2"></div>
</div>
</div>
<script src="angular.js"></script>
<script>
angular.module('App', ['ng'])
.controller('c1', function($scope, $rootScope){
$scope.ename = '爸爸';
$rootScope.ename = '爷爷';
})
.controller('c2', function($scope){
$scope.ename = '孙子';
console.dir($scope);
})
</script>
</body>
上述代码就形成一个简单的继承关系。
最新文章
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
- NetBeans中文乱码解决办法
- Mac上使用Visual Studio Code开发/调试.NET Core代码
- ssis package 在调试状态中设置断点，程序 不进入断点 的解决方案
- Winform控件Tag使用规范
- WinForm时间选择控件（DateTimePicker）如何选择（显示）时分秒
- jquery监听textarea内容变化
- eclipse配置tomcat添加外部项目
- H5 id选择器
- 洛谷P2347 砝码称重 【多重背包】（方案数）（经典）
- DapperExtensions and Dapper.Contrib在表构架不是默认dbo时的处理 DapperExtensions and Dapper.Contrib with non-dbo Schema
- centos6.5 安装php-5.6.31
- 单元测试框架unittest
- BS架构如何实现即时消息提醒
- ASCII码表(0-127 ) C中的转义字符
- RK3288 开机动画旋转
- 常州day1p4
- 批量提取图片主要3个颜色匹配中文名字并写入到excel设置对应颜色的背景
- 百度地图label样式修正
- A Gentle Introduction to Transfer Learning for Deep Learning | 迁移学习