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>