anjularjs 第一天

1.通过ng-app属性,告诉angular作用范围 <html ng-app="myapp">

2.通过ng-controller属性,angular找到该属性内的html内容,并创建$scope对象传递该区域内的变量<body ng-controller="acon">,传给用户名为“acon”的函数。所以一个acon函数可以控制多个ng-controller值为acon的html区域。

acon可以获取到它所需要的 $scope对象,而没有必要去创建它。

没有必要自己调用 acon的构造方法,或者指定何时去调用它。

3.ng-repeat

<div ng-repeat="item in items">

<span>{{item.title + $index + $first+ $last + $middle}}</span>

</div>

4.ng-bind 与 {{}}

显示文本

使用ng-bind 指令,你可以在UI 中的任何地方显示并刷新文本。它还有两种等价形式。

第一种是使用花括号的形式,我们已经见过了:

<p>{{greeting}}</p>

还有一种方式就是使用基于属性的指令,叫做ng-bind :

<p ng-bind="greeting"></p>

对于输出的内容来说两种形式是等价的。如果模型变量greeting 被设置为“Hi there”,

Angular 将会生成以下HTML :

<p>Hi there</p>

然后浏览器就会显示“Hi there”。

那么,你为什么要使用一种方式替代另一种呢?我们创建双花括号插值语法的目的是为

了阅读起来更加自然,并且需要输入的内容更少。虽然两种形式的输出内容相同,但是

使用双花括号语法的时候,在Angular 使用数据替换这些花括号之前,第一个加载的页面,

也就是应用中的index.html,其未被渲染好的模板可能会被用户看到。而使用第二种方

法的视图就不会遇到这个问题。

造成这种现象的原因是,浏览器需要首先加载HTML 页面,渲染它,然后Angular 才有

机会把它解释成你期望看到的内容。

好消息是,在大多数模板中你依然可以使用{{ }}。但是,对于index.html 页面中的数

据绑定操作,建议使用ng-bind。这样一来,在数据加载完成之前你的用户就不会看到

任何内容。

5. ng-model

<form ng-controller="SomeController">

<input type="checkbox" ng-model="youCheckedIt">

</form>

这样做的含义是:

1.当用户选中了复选框之后,SomeController 中$scope 的youCheckedIt 的属性

就会变成true。而反选复选框会让youCheckedIt 变为false。

2.如果你在SomeController 中把$scope.youCheckedIt 设置为true,那么UI 中的

复选框将会变成选中状态。设置为false 将会反选复选框.

6.ng-change

<div ng-controller="StartUpController">

Starting:<input ng-change="computeNeeded()" ng-model="funding.startingEstimate">

Recommendation:{{funding.needed}}

</div>

<script>

function StartUpController($scope){

$scope.funding = {startingEstimate:0,needed:0};

$scope.computeNeeded = function(){

$scope.funding.needed = $scope.funding.startingEstimate * 10;

};

}

</script>

7.$watch 实现监听变量

<div ng-controller="StartUpController">

Starting:<input ng-model="funding.startingEstimate">

Recommendation:{{funding.needed}}

</div>

<script>

function StartUpController($scope){

$scope.funding = {startingEstimate:0,needed:0};

$scope.computeNeeded = function(){

$scope.funding.needed = $scope.funding.startingEstimate * 10;

};

$scope.$watch(‘funding.startingEstimate‘,$scope.computeNeeded);

}

</script>

8.ng-submit 监听表单提交属性,提交时运行requestFunding,并组织浏览器向服务器post通信。

ng-click 非表单

<form ng-controller="StartUpController" ng-submit="requestFunding()">

Starting:<input ng-model="funding.startingEstimate">

Recommendation:{{funding.needed}}

<button stype="submit">sub</button>

</form>

9.ng-eventhandler

1。在所有浏览器中具有相同的行为。Angular 将会帮你屏蔽差异性。

2。不会在全局命名空间中进行操作。你所指定的表达式只能访问元素控制器作用域范围(ng-controller)内

的函数和数据。

3。

对于你的系统是否会遭遇这种耦合,我们有一种简单的测试方法可以验证:我们能否为

应用逻辑编写一个单元测试而不需要DOM 结构存在?

是的,在Angular 中我们可以编写包含业务逻辑的控制器,而无须引用DOM。问题不是

出在事件处理器上,而是之前我们编写JavaScript 的方式有问题。请注意,到目前为止

我们所编写的所有控制器中,都没有在任何地方引用DOM 或者DOM 事件。所有定位

元素和处理事件的工作都是在Angular 内部完成的。

在编写单元测试的时候这一点很重要。如果你需要DOM,你就需要在测试用例中首先

创建DOM,这就增加了测试的复杂性。并且,当你的页面发生变化时,还有更多的维

护工作要做,你需要为测试用例同步修改DOM。最后,访问DOM 的操作非常慢。很慢

的测试就意味着很慢的反馈,甚至很慢的交付。而Angular 的控制器测试就不会有这些

问题。

10.ng-show ng-hide

这两条指令的工作原理是:根据实际情况把元素的样式设置为display:block 来显示元

素;设置为display:none 来隐藏元素

时间: 2024-07-30 19:54:03

anjularjs 第一天的相关文章

模仿,anjularjs 双向绑定 ,纯javascript实现

anjularjs中的双向绑定很有意思,下面模仿其源码,写了一个简单的版本,就是鲁棒性差了点. 从"wo zi ji de"中可以看到,当输入框的内容变化时,其上2排内容也在动态变化.有点小兴奋啊.其中x变量用angularjs的双向绑定,y变量用的自己的(zi ji de). HTML: <p>angularjs</p> <p ng-bind='x'></p> <input type='text' ng-model='x'; cl

移除数组中第一个负数后的所有负数

scala> val a = ArrayBuffer[Int](1, 2,3, 5, -1, 2, -3, -5) a: scala.collection.mutable.ArrayBuffer[Int]= ArrayBuffer(1, 2, 3, 5, -1, 2, -3 , -5)   scala> :paste // Entering paste mode (ctrl-D tofinish)   var foundFirstNegative = false val keepIndexes

C#认证第一章1 题 11题

C#第一章第一题 C#认证第一章  11题

0919MYSQL中取当前周/月/季/年的第一天与最后一天

http://blog.csdn.net/cleanfield/article/details/41447585 整理后的sql代码,全部可执行 #当年第一天: SELECT DATE_SUB(CURDATE(),INTERVAL dayofyear(now())-1 DAY); #当年最后一天: SELECT concat(YEAR(now()),'-12-31'); #当前week的第一天: select date_sub(curdate(),INTERVAL WEEKDAY(curdate

计算机网络安全第一章

计算机网络不安全因素:偶发因素.自然因素.认为因素(被动攻击.主动攻击.邻近攻击.内部人员攻击.分发攻击) 不安全的主要原因: 1.互联网具有不安全性:开放的网络,国际性的网络,自由性的网络 2.操作系统存在的安全问题:操作系统软件自身的不安全性,留下"后门".操作 系统体系结构造成的不安全隐患.操作系统可以创建进程.操作系统的无口令入口及隐蔽通道 3.数据安全问题 4.传输线路安全问题 5.网络应用存在的安全问题 6.网络安全管理问题 计算机网络安全是一门涉及计算机科学.网络技术.通

第一课 MongoDB 概述与安装

1.课程大纲 本次课主要介绍 MongoDB 背景知识和 MongoDB 的安装与配置,让大家对 MongoDB 有一个初认识. 其基本的知识点包含: NoSQL数据库概述 MongoDB 数据库简单介绍 Linux 下安装 MongoDB 数据库 Mac 和 Windows 下安装 MongoDB 数据库 2.课程简单介绍 MongoDB是由MongoDB.inc研发的一款NoSQL类型的文档型数据库,MonogoDB名字来源于英文单词humongous,这个单词的意思是巨大无比.暗喻Mong

反思:毕业入职的第一家公司

得到这第一份工作,说来还真有几分传奇.大四下学期一开学,就买好去深圳的火车票,和同学几个踏上了南漂的路.由于是穷学生,所以买了硬卧票,很巧的是在火车上遇到了一个潜江的老乡,反正火车要开一天一夜也怪无聊的,于是在火车过道找了个桌子几个年轻小伙就开始畅谈人生和憧憬未来.这位刚认识的老乡年龄和我们差不多,但社会经验比我们丰富很多,于是就说起他在中专技校里面是如何半夜溜出去上网,毕业如何被分配到工厂做车厂机加工人,说和自己同班出来做机加工人的一个女同学的女同事由于金属镁粉过敏全身都红肿,那个女同学见到这

Django的第一个页面

1.创建目录 django-admin startproject myblog 2.项目结构: (1)manage.py 与项目进行交互的命令行工具集的入口(项目管理器) 里面有一个命令 runserver(我们可以通过它来执行程序) 在runserver后面加端口号 python manage.py runserver 9999 (2)myblog目录(默认和项目是一样的) (1)__init__.py 声明模块的文件,内容默认为空(myblog变成了一个模块,可以直接在电脑中使用) (2)s

2017 计蒜之道 初赛 第一场 A、B题

A题 阿里的新游戏 题目概述: 阿里九游开放平台近日上架了一款新的益智类游戏--成三棋.成三棋是我国非常古老的一个双人棋类游戏,其棋盘如下图所示: 成三棋的棋盘上有很多条线段,只能在线段交叉点上放入棋子.我们可以用坐标系来描述棋盘: 如果一条线段上的三个交叉点都被同一玩家的棋子占据的话,则称这条线段被该玩家 成三.现在,小红和小明两人在游戏平台上下棋,其中小红的棋子是黑色的.请你帮小红计算他成三的线段数. 样例对应的棋盘如下: 输入格式 输入第一行两个整数 n,m(3 \le n, m \le