重温AngularJS(四)-- 控制器ng-controller

关联目录索引:
重温AngularJS(一)-- 表达式、指令
重温AngularJS(二)-- 模型ng-model指令
重温AngularJS(三)-- Scope(作用域)
重温AngularJS(四)-- 控制器ng-controller
重温AngularJS(五)-- 过滤器
重温AngularJS(六)-- 服务Service
重温AngularJS(七)-- Select(选择框)、表格
重温AngularJS(八)-- 事件
重温AngularJS(九)-- 模块、全局API
重温AngularJS(十)-- 表单、输入验证
重温AngularJS(十一)-- 包含、动画
重温AngularJS(十二)-- 依赖注入(5个核心组件)
重温AngularJS(十三)-- 路由

作者:Zyao89;转载请保留此行,谢谢;


AngularJS 控制器

ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。

名:
姓:

姓名: {{firstName + " " + lastName}}

解析上栗:
AngularJS 应用程序由 ng-app 定义。应用程序在

内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以有方法(变量和函数)









名:
姓:

姓名: {{fullName()}}

★外部文件中的控制器

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

其他栗子

以下实例创建一个新的控制器文件:

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

保存文件为 namesController.js,
然后,在应用中使用控制器文件:

  • {{ x.name + ', ' + x.country }}

你可能感兴趣的:(重温AngularJS(四)-- 控制器ng-controller)