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 ...
随机推荐
- Microsoft Visual Studio调试监视器（MSVSMON.EXE）未能启动
在启动VS2010项目时,遇到如图所示"Microsoft Visual Studio调试监视器(MSVSMON.EXE)未能启动"的问题. 原因是VS2010安装路径(我的是D: ...
- java基础解析系列(七)---ThreadLocal原理分析
java基础解析系列(七)---ThreadLocal原理分析 目录 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系列(二)-- ...
- input中range相关操作
利用mousover触发函数对range的操作练习 <!DOCTYPE html> <html> <head> <meta charset="utf ...
- 云计算---OpenStack Neutron详解
简介: neutron是openstack核心项目之一,提供云计算环境下的虚拟网络功能 OpenStack网络(neutron)管理OpenStack环境中所有虚拟网络基础设施(VNI),物理网络基础 ...
- PHP CodeBase: 生成N个不重复的随机数
有25幅作品拿去投票,一次投票需要选16幅,单个作品一次投票只能选择一次.前面有个程序员捅了漏子,忘了把投票入库,有200个用户产生的投票序列为空.那么你会如何填补这个漏子? <?php /* ...
- oracle排序的几种方法
1.创建数据库表 CREATE TABLE USER_INFO( USERID VARCHAR2(10 BYTE) NOT NULL, USERNAME ...
- C#获取本周第一天和最后一天
DateTime nowTime = DateTime.Now; #region 获取本周第一天 //星期一为第一天 int weeknow = Convert.ToInt32(nowTime.Day ...
- 项目常见函数封装，基于Jquery
/// <reference path="jquery-1.8.0.min.js" /> /* * DIV或元素居中 * @return */ jQuery.fn.mC ...
- linux 远程操作（expect）
Expect是在Tcl基础上创建起来的,它还提供了一些Tcl所没有的命令,它可以用来做一些linux下无法做到交互的一些命令操作,在远程管 理方面发挥很大的作用. spawn命令激活一个Unix程序来 ...
- Linux计划任务-at命令
第一部分:at命令 1. at命令:在一个指定的时间执行一个指定任务,只能执行一次,且需要开启atd进程(ps -ef | grep atd查看, 开启用/etc/init.d/atd start ...