AngularJS 是一个 JS 框架，适用于以数据操作为主的 SPA （Single Page Application）应用。

不再是 “先查找元素在操作元素”，所有操作都以 “Model数据为中心”

AngularJS 的四大特性

  • 采用 MVC 模型

    1. Model：模型，业务数据；在 AngularJS 中，就是存储于特定作用范围内的变量
    2. View：视图，模型数据在页面中的呈现
    3. 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 的区别

  1. 每个控制器的实例都对应一个作用范围对象，即 $scope
  2. 在控制器中声明的 Model 数据，必须保存在一个作用范围内
  3. 为了在多个控制器共享数据，可以将 Model 数据保存在一个 “全局作用范围内” -- $rootScope -- 整个 AngularApp 中只能有一个 $rootScope 对象，而且这个对象是所有$scope 的父作用域对象
  4. 作用域对象间可以实现继承，只需要将某个控制器实例声明在另一个控制器实例的有效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）的更多相关文章

  1. luluzero的angularJs学习之路_angularJs示例代码

    最近开始自学 angularJs这个前端MVC框架,感觉在前端实现MVC很酷有木有.哈哈哈... 先说说我对前端MVC的一个基本的理解吧(刚开始学习接触得还比较浅显,理解可能会有些不到位,还请各位大神 ...

  2. angularJS 学习之路

    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序.也就是angularjs作用的入口  作用在什么标签或者整个body ...

  3. AngularJS学习之旅

    开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直 ...

  4. Python学习之路目录（收藏整理）

    目录 Python之路[第一篇]:Python简介和入门 Python之路[第二篇]:Python基础(一) Python之路[第三篇]:Python基础(二) Python之路[第四篇]:模块    ...

  5. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  6. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  7. RPC远程过程调用学习之路（一）：用最原始代码还原PRC框架

    RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...

  8. webService学习之路（三）：springMVC集成CXF后调用已知的wsdl接口

    webService学习之路一:讲解了通过传统方式怎么发布及调用webservice webService学习之路二:讲解了SpringMVC和CXF的集成及快速发布webservice 本篇文章将讲 ...

  9. [精品书单] C#/.NET 学习之路——从入门到放弃

    C#/.NET 学习之路--从入门到放弃 此系列只包含 C#/CLR 学习,不包含应用框架(ASP.NET , WPF , WCF 等)及架构设计学习书籍和资料. C# 入门 <C# 本质论&g ...

随机推荐

  1. [转载]Office Visio快捷键

    “帮助”任务窗格和“帮助”窗口 使用“帮助”任务窗格和“帮助”窗口 通过“帮助”任务窗格,您可以访问“Microsoft Office Visio 帮助”的全部内容,该窗格显示为 Microsoft ...

  2. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  3. NIO的一坑一惑小记

    前言 不知不觉,已那么长时间没有更新东西了,说来真是汗颜啊.(主要是最近在技术上豁然开朗的感觉越来越少了-_-|||) 最近一直在学习Linux相关的东西.又一次接触到了I/O复用模型(select/ ...

  4. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  5. ASP.NET MVC PartialView用法

    子页面AreaSelect.cshtml页面的Controller代码: public ActionResult AreaSelect() { return PartialView(); } 父页面前 ...

  6. 基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式

    在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...

  7. Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类

    背景 通过添加下列类,可以快捷的变换背景颜色,如果是链接的话,鼠标移动上去会变暗 bg-primary 被修饰元素将会应到primary类,显示吃淡蓝色,文本颜色会变成白色. bg-success 被 ...

  8. matlab 调用dos命令和文件操作

    第一.利用!直接调用,简单方便,可以带操作对象:!del A.bat 第二.调用system函数或者dos函数,既可以实现功能,又返回参数,能检查执行情况,方便后面程序的开发,推荐这个 [status ...

  9. SQLServer中游标是如何处理数据的？

    游标(Cursor)是处理数据的一种方法,为了查看或者处理结果集中的数据,游标提供了在结果集中一次以行或者多行前进或向后浏览数据的能力.我们可以把游标当作一个指针,它可以指定结果中的任何位置,然后允许 ...

  10. aspNet各种模块介绍

    For browsers that do not support HTML5, you can use Modernizr. Modernizr is an open-source JavaScrip ...