AngularJS入门笔记（3）

AngularJS 入门小记（3）

angularJS视图

angularJS 是一个MVC框架，所以它有一个链接视图（HTML）和控制器（JavaScript）的纽带作用域（scope），scope属于模型

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

-这里指明代码段div使用了名为myApp的angularJS指令程序，并应用了控制器myCtrl，那么controller中的操作对该div片段产生效果，运用$scope设置该div片段中全局范围内carname的值为’Volvo’

使用时注意$scope的作用域，大型项目中作用域有很多

根作用域$rootScope

它可以作用在ng-app指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

angularJS控制器

AngularJS 控制器控制 AngularJS 应用程序的数据，是常规的 JavaScript 对象。

在大型的应用程序中，通常是把控制器存储在外部文件中。

比如把如下代码存入namesController.js

angular.module('myApp', []).controller('namesCtrl', function($scope) {
     $scope.names = [
         {name:'Jani',country:'Norway'},
         {name:'Hege',country:'Sweden'},
         {name:'Kai',country:'Denmark'}
     ];

 });

然后在html文件中调用,与一般的JavaScript调用相同

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
   <li ng-repeat="x in names">
     {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

<script src="namesController.js"></script>