1.AngularJS控制器 控制AngularJS的应用程序的数据;AngularJS控制器是常规的javaScript对象;

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

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

</div>

<script>

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

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

  $scope.firstName="John";

  $scope.lastName="Doe";

});

</script>

3.解释代码:

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

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

**myCtrl函数是一个JavaScript函数;

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

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

**控制器的$scope(相当于作用域,控制范围)用来保存AngularJS Model(模型)的对象;

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

**ng-model指令绑定输入域到控制器的属性(firstName和lastName);

4.控制方法:控制器也可以有方法;

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

5.外部文件中的控制器:在大型的应用程序中,通常把控制器存储在外部文件中;

<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 JS 学习之控制器的更多相关文章

  1. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  2. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  3. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  4. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  5. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  6. Angular JS 学习之简介

    1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...

  7. Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  8. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  9. Angular JS 学习笔记(二)

    1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...

随机推荐

  1. AIX系统的环境变量设置

    AIX系统的环境变量设置 用户环境的定义是通过设置环境变量来实现的.AIX系统主要使用两大类profile文件来定义用户环境.一类是用来为所有用户定制环境,另一类是为个人定义自己的环境. 登录时,sh ...

  2. pom.xml中引入局域网仓库

    <repositories> <repository> <id>nexus</id> <name>my-nexus-repository&l ...

  3. 解决X64操作系统PL/SQL连接报错问题 make sure you have the 32 bits oracle client installed

    Windows 64位下装Oracle 11g 64位,PLSQL Developer使用出现以下问题: 1.Database下拉框为空: 2.强制输入用户名.密码及Database,登录弹出: In ...

  4. 【leetcode】First Missing Positive(hard) ☆

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0]  ...

  5. 【编程题目】如何对n个数进行排序,要求时间复杂度O(n),空间复杂度O(1)

    转自:http://blog.csdn.net/vast_sea/article/details/8167968 看上去似乎任何已知的算法都无法做到,如果谁做到了,那么所有的排序方法:QuickSor ...

  6. .NET微信公众号开发-1.0初始微信公众号

    一.前言 微信公众号是开发者或商家在微信公众平台上申请的应用账号,该帐号与QQ账号互通,通过公众号,商家可在微信平台上实现和特定群体的文字.图片.语音.视频的全方位沟通.互动 .形成了一 种主流的线上 ...

  7. <context-param>与<init-param>

    <context-param>的作用: web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件w ...

  8. iOS开发之Xcode 相对路径与绝对路径

    iOS开发之 相对路径与绝对路径 https://developer.apple.com/library/mac/documentation/DeveloperTools/Reference/Xcod ...

  9. springMVC创建基础变量

    在springMVC中有一些变量是基础变量,可以在全局多个地方使用,在修改规则的时候,这样只用修改一个地方就好了,而且可以避免很多不必要的bug出现下面就来总结一下在我的项目中如何去创建一个全局基础变 ...

  10. LR结果分析——TPS和吞吐率

    针对吞吐率和TPS的关系,这个在结果分析中如何使用,就个人经验和朋友讨论后,提出如下建议指导,欢迎同僚指正. TPS:transaction per second 服务器每秒处理的事务数. 吞吐率:测 ...