AngularJS 学习之路（1）
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>
上述代码就形成一个简单的继承关系。
AngularJS 学习之路（1）的更多相关文章
- luluzero的angularJs学习之路_angularJs示例代码
最近开始自学 angularJs这个前端MVC框架,感觉在前端实现MVC很酷有木有.哈哈哈... 先说说我对前端MVC的一个基本的理解吧(刚开始学习接触得还比较浅显,理解可能会有些不到位,还请各位大神 ...
- angularJS 学习之路
AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序.也就是angularjs作用的入口 作用在什么标签或者整个body ...
- AngularJS学习之旅
开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直 ...
- Python学习之路目录（收藏整理）
目录 Python之路[第一篇]:Python简介和入门 Python之路[第二篇]:Python基础(一) Python之路[第三篇]:Python基础(二) Python之路[第四篇]:模块 ...
- jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- Android开发学习之路-RecyclerView滑动删除和拖动排序
Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...
- RPC远程过程调用学习之路（一）：用最原始代码还原PRC框架
RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...
- webService学习之路（三）：springMVC集成CXF后调用已知的wsdl接口
webService学习之路一:讲解了通过传统方式怎么发布及调用webservice webService学习之路二:讲解了SpringMVC和CXF的集成及快速发布webservice 本篇文章将讲 ...
- [精品书单] C#/.NET 学习之路——从入门到放弃
C#/.NET 学习之路--从入门到放弃 此系列只包含 C#/CLR 学习,不包含应用框架(ASP.NET , WPF , WCF 等)及架构设计学习书籍和资料. C# 入门 <C# 本质论&g ...
随机推荐
- SQL*Loader之CASE3
CASE3 1. SQL文件 [oracle@node3 ulcase]$ cat ulcase3.sql set termout off rem Do not clean up table beca ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- Linux 启动过程分析
本文仅简单介绍Linux的启动过程,在此基础上做简要的分析.对于Linux启动过程中内部详细的函数调用不做介绍,只是希望本文能给新手起到一个抛砖引玉的作用,以便深入研究Linux的启动过程.下图基本展 ...
- 聚合索引(clustered index) / 非聚合索引(nonclustered index)
以下我面试经常问的2道题..尤其针对觉得自己SQL SERVER 还不错的同志.. 呵呵 很难有人答得好.. 各位在我收集每个人擅长的东西时,大部分都把SQL SERVER 标为Expert,看看是否 ...
- [SDK2.2]Windows Azure Virtual Network (3) 创建AD Server并添加至Virtual Network
<Windows Azure Platform 系列文章目录> 在之前的文章中,笔者已经向大家介绍了如何创建一个简单的Azure Virtual Network. 本章我将创建一台域服务器 ...
- oracle创建表相关
--创建表 create table person( id number primary key, name ), birth date ); --创建序列 create sequence perso ...
- 实现iOS图片等资源文件的热更新化(一): 从Images.xcassets导出合适的图片
本文会基于一个已有的脚本工具自动导出所有的图片;最终给出的是一个从 Images.xcassets 到基于文件夹的精简 合适 的图片资源集的完整过程.难点在于从完整图片集到精简图片集,肯定是基于一个定 ...
- php对xml文件进行CURD操作
XML是一种数据存储.交换.表达的标准: - 存储:优势在于半结构化,可以自定义schema,相比关系型二维表,不用遵循第一范式(可以有嵌套关系): - 交换:可以通过schema实现异构数据集成: ...
- CSRF防御之ASP.NET MVC
MVC中的Html.AntiForgeryToken()是用来防止跨站请求伪造(CSRF:Cross-site request forgery)攻击的一个措施. 举个简单例子,譬如整个系统的公告在网站 ...
- 【C#】第3章学习要点（一）--整体把握
分类:C#.VS2015 创建日期:2016-06-18 使用教材:(十二五国家级规划教材)<C#程序设计及应用教程>(第3版) 一.使用别人已经设计好的类简化你的代码编写工作量 当让你去 ...