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. 转一篇简易易懂的android回调的实现--->（转的）

    回调机制在 Android 监听用户界面操作中的体现   本文讨论以下两个内容: 1. 回调函数 2. 回调机制在 Android框架 监听用户界面操作中的作用 一 回调函数 回调函数就是一个通过函数 ...

  2. tableView 选中cell时，获取到当前cell

    // >> 找到当前选中的cell,设置选中时的cell背景色 SideTableViewCell * cell = (SideTableViewCell *)[tableView cel ...

  3. Android菜单Menu的创建

    在res目录下的menu文件夹下创建一个main.xml文件,内容如下: <?xml version="1.0" encoding="utf-8"?> ...

  4. Python学习笔记一

    原来Python的文件配置好环境变量直接双击就可以运行,当然也可以控制台+编辑器 first try: import turtle window=turtle.Screen() babbage=tur ...

  5. UML统一建模编程

    PowerDesigner 可以通过类图直接可视化生成代码 UML模型元素: 表示模型中的某个概念(类.对象.用例.结点.组件.包.接口等等): 表示模型间相互连接的关系(关联.泛化.依赖.聚集).

  6. 数论v2

    #include <cmath> #include <cstdio> #include <cstring> #include <algorithm> # ...

  7. 【MavenWeb】初探：创建一个Maven Web项目

    第一步:创建一个Simple的Maven项目 直接点下一步,把name上面的几个部分填写好,直接Finish即可. 就可以看到如下的结构: 注意点1:如果按照网上的其他一些做法来创建,你会发现少了sr ...

  8. close与shutdown函数

    linux网络编程之socket(十):shutdown 与 close 函数的区别  http://blog.csdn.net/yijiu0711/article/details/17349169 ...

  9. Unity3d 保存和使用地形高度

    TerrainHeightProcesser 地形高度存储工具 TerrainHeightData 地形高度数据 // class TerrainHeightProcesser using Unity ...

  10. rsa加密解密

    2016年3月17日 17:21:08 星期四 现在越来越懒了.... 参考: http://www.xuebuyuan.com/1399981.html 左边是加密流程, 右边是解密流程 呃...有 ...