Angular JS 学习之控制器
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 学习之控制器的更多相关文章
- 适合我胃口的angular.js学习资料
断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Angular JS 学习之简介
1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js 学习笔记
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...
- Angular JS 学习笔记(二)
1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...
随机推荐
- Match:Milking Grid(二维KMP算法)(POJ 2185)
奶牛矩阵 题目大意:给定一个矩阵,要你找到一个最小的矩阵,这个矩阵的无限扩充的矩阵包含着原来的矩阵 思路:乍一看这一题确实很那做,因为我们不知道最小矩阵的位置,但是仔细一想,如果我们能把矩阵都放在左上 ...
- 用Mybatis返回Map,List<Map>
返回Map,Mybatis配置如下 : <select id="getCountyHashMap" resultType="java.util.HashMap&qu ...
- Quartz结合SPRING多任务定时调用
定义两个被调度的类 public class QuartzJob { public void work() { System.out.println(Spring Quartz的任务调度1被调用!&q ...
- iOS -类目,延展,协议
1.类目 类目就是为已存在的类添加新的方法.但是不能添加实例变量.比如系统的类,我们看不到他的.m文件,所以没有办法用直接添加方法的方式去实现. @interface NSMutableArray ( ...
- IOS- 堆和栈 详解
Objective-C的对象在内存中是以堆的方式分配空间的,并且堆内存是由你释放的,即release 栈由编译器管理自动释放的,在方法中(函数体)定义的变量通常是在栈内,因此如果你的变量要跨函数的话就 ...
- 安装jdk源码
step1:打开选择Window->Preference step2:选择Java->Installed JREs step3:选中你所安装的jre,点击Edit,进入Edit JRE,如 ...
- 从键盘输入成绩,找出最高分,并输出学生成绩等级。成绩>=最高分-10,为A,成绩>=最高分-20,为B,成绩>=最高分-30,为C,其余等级为D
import java.util.Scanner;public class TestStudent { public static void main(String[] args) { //从键盘获得 ...
- 我的JavaEE学习路线图
从学习Java开发到现在虽然也已经快三年了,但是要说到分享一下经验实在是不敢当.权当是对自己的一个总结吧,希望大家不吝指教,互相交流. 照旧,还是现来整理一下我学习Java的一个路线图吧,然后按照这个 ...
- hdu 2034人见人爱A-B
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2034 解题思路:set的基本用法 #include<iostream> #include& ...
- 四、优化及调试--网站优化--Yahoo军规中
8.避免使用CSS表达式(避免在CSS中使用Expressions) 什么是CSS表达式:是用来把CSS属性和JavaScript关联起来.