AngularJS学习笔记3
6.AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
ng-controller 指令定义了应用程序控制器。
<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>
7. AngularJS 过滤器
过滤器 |
描述 |
currency |
格式化数字为货币格式。 |
filter |
从数组项中选择一个子集。 |
lowercase |
格式化字符串为小写。 |
orderBy |
根据某个表达式排列数组。 |
uppercase |
格式化字符串为大写。 |
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。
{{ lastName | uppercase }}
8.AngularJS 服务(Service)
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
$location 服务,它可以返回当前页面的 URL 地址。
<div ng-app="myApp" ng-controller="myCtrl"> <p> 当前页面的url:</p> <h3>{{myUrl}}</h3> </div>
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); });
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。
<div ng-app="myApp" ng-controller="myCtrl"> <p>欢迎信息:</p> <h1>{{myWelcome}}</h1> </div> <p> $http 服务向服务器请求信息,返回的值放入变量 "myWelcome" 中。</p> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); }); </script>
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
AngularJS $interval 服务对应了 JS window.setInterval 函数。
<div ng-app="myApp" ng-controller="myCtrl">
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); }); </script>
AngularJS学习笔记3的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
随机推荐
- mfc---添加背景图
添加背景图: CDC m_dcMem CBitmap m_bmpMem CDC * pDC = GetDC(); m_dc.CreateComparableDC(pDC); m_bmpMem.Load ...
- 1295: [SCOI2009]最长距离
1295: [SCOI2009]最长距离 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 960 Solved: 498[Submit][Status ...
- 1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富
1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富 Time Limit: 3 Sec Memory Limit: 64 MBSubmit: 498 Sol ...
- .进程&线程(&java.lang.Thread)详解
一.进程与线程 进程 我们在进行操作电脑的时候,通常会打开浏览器,通讯工具等应用程序,这个时候CPU通过作业调度在内存中就会分配一些空间让它们处于宏观上的运行状态(处于可以被CPU执行的状态),而这部 ...
- js动态加载的蒙板弹框
我们访问一些网站时总会遇到这种点击后,背景像被打上一层模板一样,这个是怎么做到的呢? 它是将这个弹框div独立于页面容器wrap,设置position为absolute,将其水平垂直之后都居中,设置弹 ...
- 【收集】sql查询统计,周,月,年
昨天 select * from tb where datediff(day, 时间字段 ,getdate()) = 1 今天 select * from tb where datediff(day, ...
- spring mvc和web-flow的整合方案
发现了一份整合spring MVC 和webflow的很好的资料,日后翻译出来发布.先记着. http://docs.spring.io/spring-webflow/docs/2.3.x/refer ...
- Internet Information Services安装与启动
Internet Information Services安装 1.打开控制面板——程序——启动或关闭windows功能 2.找到Internet Information Services ——将其全 ...
- Button颜色选择器进阶
drawable/button_color.xml <?xml version="1.0" encoding="utf-8"?> <selec ...
- 关于npm安装全局模块,require时报Error: Cannot find module 'XXX'的解决办法
系统环境:centos 下午使用npm安装"cheerio",想搞爬虫玩玩. npm安装有两种模式: 本地 # npm install cheerio 全局 # npm insta ...