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的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  10. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. PCB行业ERP解决方案

    普实PCB管理系统包括PCB企业从接到订单开始,编排生产计划.制作工程指示.生产工具.准备物料.品质保障.工序生产.设备维护等一系列与企业运作密切相关的环节,使得企业的各个部门能够紧密联系.相互协调, ...

  2. virtualBox,webstorm,开虚拟机传代码

    一起git一个新技能 利用virtualBOX在本地开一个虚拟机,然后设置webstorm连接到虚拟机,将代码传到虚拟机里. 以下详细讲解: 第一步: 第二步:管理虚拟机的设置(我是用的是Xshell ...

  3. loadrunner:判断是否服务器连接池瓶颈

    分析Web Resources中的Connections per second可以判断是否服务器连接池瓶颈. connections per second会给出两种不同状态的连接数:中断的连接和新建的 ...

  4. Windows下GIT安装与使用(上传远程端)

    Windows下GIT安装与使用(上传远程服务器) 1.  登陆http://msysgit.github.io/并下载Git 2.  打开下载的exe文件,一路默认(路径可以去修改).有可能电脑需要 ...

  5. ubuntu 笔记

    Ubuntu学习之路还很长,做个笔记也不亏 terminal tab 补全忽略大小写: 在 /ect/inputrc文件中添加或修改 'set completion-ignore-case on' U ...

  6. PHP数据访问增删查(20161028)

    注:预定义数组   $_POST[ ]; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  7. 【js数据结构】栈解决括号不匹配问题

    栈可以用来判断一个算术表达式中的括号是否匹配. 思路:读取算术表达式,遇到左括号'{'.'['.'('压入栈,栈的特点是后入先出,所以当遇到右括号'}'.']'.')'的时候,取出栈顶元素,是否满足读 ...

  8. 消息队列-ActiveMQ

    1 业务需求描述 举例描述: 再警情通报的业务时通过发送消息界面可以选择 警情联络,和船情通报两种消息 发送方式可分为 一对一发送:部门对部门.个人对个人 一对多发送:部门对多部门.个人对多人 2 功 ...

  9. (11)连个工具类之间的比较4.Collections与Arrays

    集合框架中的工具类:特点:该工具类中的方法都是静态的. Collections:常见方法: 1, 对list进行二分查找: 前提该集合一定要有序. int binarySearch(list,key) ...

  10. java中有符号和无符号数据类型发生转换

    package com.itheima.test01;/* * byte short int long float double 是有符号位的数 * char boolean 是无符号位的数 * 补码 ...