AngularJS 是一个 JS 框架,适用于以数据操作为主的 SPA (Single Page Application)应用。
不再是 “先查找元素在操作元素”,所有操作都以 “Model数据为中心”
采用 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>上述代码就形成一个简单的继承关系。
一些AngularJS相关文章链接:
希望你喜欢,并分享我的工作~带你走近AngularJS系列:
在 AngularJS 应用中通过 JSON 文件来设置状态