AngularJS学习篇（六）
AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.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）。
外部文件中的控制器
在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.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 src="personController.js"></script>
</body>
</html>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});//personController.js
AngularJS学习篇（六）的更多相关文章
- AngularJS学习篇（十六）
AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...
- AngularJS学习篇（二十四）
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇（二十三）
AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...
- AngularJS学习篇（二十二）
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS学习篇（二十一）
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...
- AngularJS学习篇（二十）
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
- AngularJS学习篇（十九）
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
- AngularJS学习篇（十八）
AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...
- AngularJS学习篇（十七）
AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/an ...
随机推荐
- 用ES6巧妙的解决传统面试中的算法小问题！
最近自己也在准备面试,在复习算法的时候,机智的用了一波ES6.一起来瞧瞧吧! 1.数组的去重 var arr=str.split(''); for(var i=0;i<arr.length-1; ...
- 用ESP8266+android,制作自己的WIFI小车
整体思路ESP8266作为TCP服务器,,手机作为TCP客户端,自己使用Lua直接做到了芯片里面,省了单片机,,节约成本,其实本来就是个单片机(感觉Lua开发8266真的很好,甩AT指令好几条街,,而 ...
- [bzoj1059] [ZJOI2007] 矩阵游戏 (二分图匹配)
小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏--矩阵游戏.矩阵游戏在一个N *N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作:行交换操作:选 ...
- python采用 多进程/多线程/协程 写爬虫以及性能对比，牛逼的分分钟就将一个网站爬下来!
首先我们来了解下python中的进程,线程以及协程! 从计算机硬件角度: 计算机的核心是CPU,承担了所有的计算任务.一个CPU,在一个时间切片里只能运行一个程序. 从操作系统的角度: 进程和线程,都 ...
- php用PHPWord库生成word文档的例子
<?php require_once '../libs/PHPWord/PHPWord/IOFactory.php'; require_once '../../config.php'; $PHP ...
- dos攻击命令
net user //查看有哪些用户 net start //查看开启了哪些服务项目 net send ip "文本信息" //向对方发送消息(如果对方关了信使有可能会收不到) n ...
- Linq常用List操作总结,ForEach、分页、交并集、去重、SelectMany等
/* 以下围绕Person类实现,Person类只有Name和Age两个属性 一.List<T>排序 1.1 List<T>提供了很多排序方法,sort(),Orderby() ...
- 提纲挈领webrtc之NS(noise suppression)模块
Noise suppression,就是大家说的降噪.这种降噪是把人声和非人声区分开来,把非人声当成噪声. 一段包含人声和噪声的音频经过该模块处理,从理论上讲,只剩下人声了. webrtc的NS在业内 ...
- 使用MVVM减少控制器代码实战(减少56%)
减少比例= (360(原来的行数)-159(瘦身后的行数))/360 = 56% 父类 MVC 和MVVM 前后基本不动 父类主要完成如下三个功能: 1)功能:MJRefrsh +上拉下拉没有更多数据 ...
- python随机生成中文字符
第一种方法:Unicode码 在unicode码中,汉字的范围是(0x4E00, 9FBF) import random def Unicode(): val = random.randint(0x4 ...