AngularJS 控制器 控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>

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

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

});

</script> 

</body>

</html>

解析：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法（变量和函数）：

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>

姓名: {{fullName()}}

</div>

<script>

var app = angular.module('myApp', []);

app.controller('personCtrl', function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

    $scope.fullName = function() {

        return $scope.firstName + " " + $scope.lastName;

    }

});

</script>

</body>

</html>

外部文件中的控制器：

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

只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：

实例：

 <div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{firstName + " " + lastName}}

</div>

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

其他实例：

创建一个新的控制器文件:

 angular.module('myApp', []).controller('namesCtrl', function($scope) {

    $scope.names = [

        {name:'Jani',country:'Norway'},

        {name:'Hege',country:'Sweden'},

        {name:'Kai',country:'Denmark'}

    ];

});

保存文件为  namesController.js:

然后，在应用中使用控制器文件:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

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

</body>

</html>

AngularJS 控制器 ng-controller的更多相关文章

  1. AngularJS控制器

    AngularJS 控制器 控制 AngularJS 应用程序的数据,控制器是常规的 JavaScript 对象. 1. angular.module(name, [requires], [confi ...

  2. AngularJS 控制器

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

  3. angularjs控制器之间通信，事件通知服务

    service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...

  4. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  5. AngularJS 1.x系列：AngularJS控制器（3）

    1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...

  6. Angularjs中的Controller

    概念:一个应用(APP,本身也是一个大模块)是由若干个模块(module)组成的,每个模块实现一个功能.利于代码的复用. 书写格式: <!DOCTYPE html> <html ng ...

  7. Angularjs 中的 controller

    接触过程序开发的小伙伴们对 MVC 的开发方式想必一点也不陌生,是的, angularjs 所採用的方式便是 MVVM 的开发方式,这里的 controller 即控制器 了解 controller ...

  8. AngularJS 控制器的方法

    AngularJS 控制器也有方法(变量和函数) <!DOCTYPE html><html><head><meta http-equiv="Cont ...

  9. 【06】AngularJS 控制器

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

随机推荐

  1. OSGi——面向服务架构规范简述

    OSGi——面向服务架构规范简述 去年我们组要开发一个新的产品,在讨论产品架构路线的时候,美国的架构师向大家征集了架构设计思想(我推荐了SCSF),有一位工程师向他推荐了OSGi.以前我还没有听过OS ...

  2. [BZOJ3991][SDOI2015]寻宝游戏

    [BZOJ3991][SDOI2015]寻宝游戏 试题描述 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择 ...

  3. PHP环境搭建——Apache、Mysql、PHP单独安装（for Windows）

    提示: 安装之前先要安装vcredist_x86.exe或vcredist_x64.exe(vc6,vc9,vc11等,和下面对应). 确保apache和php是用同样版本的编译器编译出来的,如果是v ...

  4. 装b指南

    提溜一个糖水黄桃罐头瓶,放在桌边,坐下以后,脖子略微后仰,翘着二郎腿,低头盯着屏幕看需求. 最好点一根烟,牌子无所谓,能冒烟就行.要得就是云山雾绕的感觉,从烟雾中眯着眼睛看出去,一副胸有成竹的样. 一 ...

  5. C#析构函数与垃圾回收

    析构函数基本语法 C# class Car { ~ Car() // destructor { // cleanup statements... } } 析构函数说明 不能在结构中定义析构函数.只能对 ...

  6. JS插件之——ztree

    很牛逼的一个树形菜单,树形下拉框插件.一年前用过,很好用.今天又有机会拿过来用,温故一下基本点,nice!! 官方文档说明的非常详细,按照API慢慢看,耐心解读,自然就可以解惑了. 官方文档及其源码下 ...

  7. Unity3D研究院之手游开发中所有特殊的文件夹(转)

    这里列举出手游开发中用到了所有特殊文件夹. 1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor  和 /Edi ...

  8. iOS CoreData relationship 中的inverse

    官方文档建议为每一个可以设置inverse的relationship设置一个inverse.目的是保持数据库的正确性.但是没有具体的说明. 我在stackoverflow中找到了一个是分好的答案,ht ...

  9. shell 脚本编程概述

    环境变量 ? 退出状态码 (成功) (未知错误) (误用 shell 命令) (命令不可执行) (没找到命令) (无效退出状态) +x( linux 信号 X 的严重错误) ( ctrl c 终止程序 ...

  10. JSON数据格式

    JSON 数据格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人 ...