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

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

2、应用解析
　　AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
　　ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
　　myCtrl 函数是一个 JavaScript 函数。
　　AngularJS 使用$scope 对象来调用控制器。
　　在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
　　控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="js/angular.min.js"></script>

</head>

<body>

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

        <!-- AngularJS 控制器 -->

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

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

        <br>

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

        <br/>

        <br/>

        <br/>

        <!-- 控制器方法 -->

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

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

        <br>

        姓名: {{fullName()}}

        <br/>

        <br/>

        <br/>

        <!-- 外部引用js -->

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

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

        <br>

        姓名: {{fullName()}}

    </div>

</body>

</html>

<script src="js/AngularJS 控制器.js"></script>
AngularJS 控制器.js
var app = angular.module('myApp', []);

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

    //AngularJS 控制器

    $scope.firstName = "John";

    $scope.lastName = "Doe";

    //控制器方法

    $scope.fullName = function() {

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

    }

});

 页面

AngularJS学习之旅—AngularJS 控制器(六)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  3. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  4. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  5. AngularJS学习之旅—AngularJS Scope作用域(五)

    1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...

  6. AngularJS学习之旅—AngularJS 模型(四)

    1.AngularJS ng-model 指令 1.ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 2.ng-model 指令可 ...

  7. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  8. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  9. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

随机推荐

  1. TCP的三次握手与四次挥手（个人总结）

    序列号seq:占4个字节,用来标记数据段的顺序,TCP把连接中发送的所有数据字节都编上一个序号,第一个字节的编号由本地随机产生:给字节编上序号后,就给每一个报文段指派一个序号:序列号seq就是这个报文 ...

  2. C#中为什么会出现空静态构造方法的写法

    再过几个小时,就要回家过春节了,今天说些简单点的东西,大家在看C#代码的时候,一定会对这样的写法非常迷茫:在一个类中会出现一个空的静态构造方法.这不是多此一举吗,这样做的目的是什么?今天我就来说说这个 ...

  3. Java8 LocalDateTime获取时间戳（毫秒/秒）、LocalDateTime与String互转、Date与LocalDateTime互转

    本文目前提供:LocalDateTime获取时间戳(毫秒/秒).LocalDateTime与String互转.Date与LocalDateTime互转 文中都使用的时区都是东8区,也就是北京时间.这是 ...

  4. Linux查找文件内容

    从当前目录递归查找文件名为 .py 中包含 conf 的文件名: find -name "*.py" | xargs grep "conf"

  5. ASP.NET Core 2.0 MVC项目实战

    一.前言 毕业后入职现在的公司快有一个月了,公司主要的产品用的是C/S架构,再加上自己现在还在学习维护很老的delphi项目,还是有很多不情愿的.之前实习时主要是做.NET的B/S架构的项目,主要还是 ...

  6. Redis配置与安装

    Redis 是一个非关系型高性能的key-value数据库.在部分场合可以对关系数据库起到很好的补充作用.它提供了Java,C/C++,C#,PHP,JavaScript,Perl,Object-C, ...

  7. asp.net core 系列 20 EF基于数据模型创建数据库

    一.概述 本章使用 Entity Framework Core 构建执行基本数据访问的 ASP.NET Core MVC 应用程序.使用迁移(migrations)基于数据模型创建数据库,是一种cod ...

  8. mac电脑进行可见光通信实验要点

    lifi作为一个入门门槛低.涉及范围广的实验,在理工高校中还是比较流行的. 通常实验分成3个部分,字符数据传输实验.音频传输实验.视频传输实验.在官方的实验指南中指定使用win7x64或者win xp ...

  9. TCP连接有效性检测方法

    在写TCP服务的时候经常需要面对的问题就是如何知道一个TCP连接当前是否有效,但这个问题对很多初入门的同学来说是很困惑的,主要原因是当对方关闭连接后,另一方无法有效的知道:对于同步操作来说可以通过设置 ...

  10. Python编写守护进程程序

    Python编写守护进程程序思路 1. fork子进程,父进程退出通常,我们执行服务端程序的时候都会通过终端连接到服务器,成功连接后会加载shell环境,终端和shell都是进程,shell进程是终端 ...