AngularJS 初识笔记

浏览数：43 / 时间：2015年06月09日

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 对象

输出：