test.html:

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller="HelloAngular">
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="http://cdn.bootcss.com/angular.js/1.0.3/angular.min.js"></script>
<script src="HelloAngular.js"></script>
</html>

ng-app 表示:告诉 Angular 引擎从这里开始是它应该管理的内容

ng-controller:设置控制器 Controller

其中:

    <div ng-controller="HelloAngular">
<p>{{greeting.text}},Angular</p>
</div>

视图

HelloAngular.js:

function HelloAngular($scope){
$scope.greeting = {text:'Hello'};
}

其中:

HelloAngular

控制器

$scope.greeting = {text:'Hello'};

数据模型

$scope 充当 MVC 中的Data-Model 的角色,它是一个 POJO( Plain Old Javascript Object ),它提供了一些工具方法 $watch()/$apply(),它是表达式的执行环境(或者说是 作用域),它是一个树型结构,与 DOM 标签平行子 $scope 对象会继承 $scope 上的属性,每一个 Angular 应用只有一个根 $scope 对象(一般位于 ng-app 上),$scope 可以传播事件,类似 DOM 事件,可以向上也可以向下。

Angular 会自动使用 $injector 自动注入 $scope 对象

输出:

Hello,Angular

AngularJS 初识笔记的更多相关文章

  1. Mastering Web Application Development with AngularJS 读书笔记-前记

    学习AngularJS的笔记,这个是英文版的,有些地方翻译的很随意,做的笔记不是很详细,用来自勉.觉得写下来要比看能理解的更深入点.有理解不对的地方还请前辈们纠正! 一.关于<Mastering ...

  2. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  3. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  4. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  5. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  6. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  7. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  8. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  9. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

随机推荐

  1. Android中mesure过程详解

    我们在编写layout的xml文件时会碰到layout_width和layout_height两个属性,对于这两个属性我们有三种选择:赋值成具体的数值,match_parent或者wrap_conte ...

  2. Fresco 源码分析(三) Fresco服务端处理(3) DataSource到Producer的适配器逻辑以及BitmapMemoryCacheProducer处理的逻辑

    4.3.1.2.1 Producer和DataSource之间适配器处理的逻辑 还是从程序的入口开始说吧 CloseableProducerToDataSourceAdapter.create() 源 ...

  3. 使用ASP.NET Web API自带的类库实现对CORS的支持(在开发中使用这种方式)(转载)

    在<通过扩展让ASP.NET Web API支持W3C的CORS规范>中我们通过自定义的HttpMessageHandler为ASP.NET Web API赋予了跨域资源共享的能力,具体来 ...

  4. linux tricks 之 roundup.

    转载:http://stackoverflow.com/questions/1010922/question-about-round-up-macro 以下内容转载自stackoverflow关于 r ...

  5. java程序员必须会的技能

    1.语法:必须比较熟悉,在写代码的时候IDE的编辑器对某一行报错应该能够根据报错信息知道是什么样的语法错误并且知道任何修正. 2.命令:必须熟悉JDK带的一些常用命令及其常用选项,命令至少需要熟悉:a ...

  6. loj 1407(2-sat + 枚举 + 输出一组可行解 )

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27115 思路:有一个trick要注意:当情况为 2 x y 时,可 ...

  7. MATLAB学习笔记(三)——程序设计

    (一)M文件 一.概述 1.自己的体会就是把相应的操作写成一个文本文件,这样子的话方便进行修改(记事本就行了),又可以达到封装的目的,当然我发现2014a版本的Matlab貌似已经采用的面向对象的设计 ...

  8. 神奇的HTML5离线存储(应用程序缓存)

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  9. intersection

    用来找到两个rdd的交集,注意,最终的new rdd的分区数量取决于两个rdd中的最大分区数量. 测试一下: val data1 = sc.parallelize(1 to 20,1) val dat ...

  10. safari的坑

    当将图片src设置为空字符的时候,图片仍然还在: