学习笔记-AngularJs(二)
在接下来学习angularjs中,我按照的就是之前 学习笔记-AngularJs(一)所讲的目录来搭建一个学习的项目,做一个互联网大佬人物简介的例子,当然也可以使用angualrjs上面提供的官方例子,phonecat,其实大同小异,都是差不多的,可以用git下载下这个学习环境 git clone https://github.com/angular/angular-phonecat ,然后
cd angular-phonecat
node scripts/web-server.js
记住不要关闭命令行,就可以测试了!
这里先写hello world开始:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
就这样hello world就简单地写好了,{{'world'}}这里面就是一个表达式,这里这个表达式是个字符串,但我们要把它改成Hello * ,World可以动态改变任意字符串,可以这样写:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{ yourname ||'World'}}!
</body>
</html>
ng-model绑定了一个yourname的变量(双向数据绑定),这样'World'即可以改变成其他的字符串了!那我们还想说把它得到的字符串用alert弹出来,可以怎么做:
html:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="example2" ng-controller="Cntl1">
<h1>{{init}}</h1>
Name: <input ng-model="name" type="text"/>
<button ng-click="greet()">Greet</button>
</div>
</body>
</html>
js:
function Cntl1($window, $scope){
$scope.name = 'World';//实现数据双向绑定
$scope.init = 'Hello xiaobin';
$scope.greet = function() {
($window.mockWindow || $window).alert('Hello ' + $scope.name);
}
}
<!--补充:表达式计算是发生在作用域中的。Javascript默认是以window为作用域的。AngularJS要使用window作用域的话得用$window来指向全局window对象。 比如说,你使用window中定义的alert()方法,在AngularJS表达式中必须写成$window.alert()才行。这是为了防止意外进入全局作用域(各种bug的来源)而设计的。 -->
这里可以看到html的模板里面ng-model绑定了一个变量name,js里面的Cntl1控制器在scope作用域中也定义了一个那么变量$scope.name,这里就可以很深刻体现出数据的双向绑定了,两处的值的改变都会影响另外一个的值变化。上面给button绑定了一个ng-click指令,没错,里面的greet()函数正是我们在控制器文件里面定义的函数,通过这种方式我们实现了视图和控制器的交互,至于谁是模板,谁是控制器,上面的代码已经很详细!
那么如果是有这样的另外要求,需要在视图遍历某个数组,那可以这样做:
html:
<!doctype html>
<html ng-app>
<head>
<meta charset='utf8'/>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Cntl2" class="expressions">
{{hello}}
<br>
Expression:
<input type='text' ng-model="expr" size=""/>
<button ng-click="addExp(expr)">Evaluate</button>
<ul>
<li ng-repeat="exprd in exprs">
[ <a href="" ng-click="removeExp($index)">X</a> ]
<tt>{{exprd}}</tt> => <span ng-bind="$parent.$eval(exprd)"></span>
</li>
</ul>
</div>
</body>
</html>
js:
function Cntl2($scope) { //$scope注入的作用域
var exprs = $scope.exprs = []; //这是通过$scope.创建的数组
$scope.expr = '3*10|currency'; //添加默认模型属性,对应模板的input框中相对应有模型变量的默认值
$scope.hello = '小斌开始学习angularJs拉!';
$scope.addExp = function(expr) {
exprs.push(expr);//压入数组(push)
}; $scope.removeExp = function(index) {
exprs.splice(index, 1); //删除某个数组项(splice)
};
} //模型和视图分离,但是他们两者确实是同步的
这里感觉会比之前两个例子有些复杂,这是希望通过在input框填写内容,点击确定按钮,下面列表会多增加一项内容!这里面绑定的addExp和removeExp函数是执行增加内容项和删除内容项的作用,每增加一个就会往exprs压入一个数组项,在视图是这样输出来的,通过ng-repeat = "exprd in exprs "添加到li标签下,然后遍历出来的。
补充:ng-bind指得是绑定某个内容,输出到span标签里面,对应的还有ng-template-bind,之后详学http://t.cn/RUbL4rP!
$parent.$eval(exprd)指得是执行exprd,可以看一下上面的代码, ‘3*10|currency’其实加了货币过滤器(angular自带),至于$parent不是很理解,有知道的人就告诉我一下呢!
学习笔记-AngularJs(二)的更多相关文章
- 学习笔记-AngularJs(十)
前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...
- 学习笔记-AngularJs(三)
学习笔记-AngularJs(二)写了个所有程序语言入门时都必须要写的Hello World,那么从现在开始做那个之前说过的互联网大佬介绍的学习例子,当然这里开始会慢慢按照之前说过的目录来搭建这个学习 ...
- 《Java编程思想》学习笔记(二)——类加载及执行顺序
<Java编程思想>学习笔记(二)--类加载及执行顺序 (这是很久之前写的,保存在印象笔记上,今天写在博客上.) 今天看Java编程思想,看到这样一道代码 //: OrderOfIniti ...
- Hibernate学习笔记(二)
2016/4/22 23:19:44 Hibernate学习笔记(二) 1.1 Hibernate的持久化类状态 1.1.1 Hibernate的持久化类状态 持久化:就是一个实体类与数据库表建立了映 ...
- X-Cart 学习笔记(二)X-Cart框架1
目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 四.X- ...
- C#可扩展编程之MEF学习笔记(二):MEF的导出(Export)和导入(Import)
上一篇学习完了MEF的基础知识,编写了一个简单的DEMO,接下来接着上篇的内容继续学习,如果没有看过上一篇的内容, 请阅读:http://www.cnblogs.com/yunfeifei/p/392 ...
- DuiLib学习笔记(二) 扩展CScrollbar属性
DuiLib学习笔记(二) 扩展CScrollbar属性 Duilib的滚动条滑块默认最小值为滚动条的高度(HScrollbar)或者宽度(VScrollbar).并且这个值默认为16.当采用系统样式 ...
- guava 学习笔记(二) 瓜娃(guava)的API快速熟悉使用
guava 学习笔记(二) 瓜娃(guava)的API快速熟悉使用 1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: Introduction Guava Collection ...
- Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填、禁用以及可见
我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置. 一.动态设 ...
随机推荐
- ZZNU 正约数之和
#include<stdio.h> #include<string.h> #include<math.h> #include<time.h> #incl ...
- [osg][原]osg的坐标系:使用右手法则Y轴向前、X向、右Z向上。camare的默认姿态:向下看(Z轴负向),头向前(Y轴正向)
参考:http://blog.csdn.net/tmljs1988/article/details/7561887 图中上半边为opengl坐标系,下半边的osg坐标系: osg::Camare的默认 ...
- Spring Bean 定义继承
本例子源于:W3CSchool,在此作记录 bean 定义可以包含很多的配置信息,包括构造函数的参数,属性值,容器的具体信息例如初始化方法,静态工厂方法名,等等. 子 bean 的定义继承父定义的配置 ...
- Given d and e, factorize N to attack RSA
题目如下: RSA算法的使用一般要求每个不同的用户有一个独立的模数N.有天,Bob脑洞大开,认为似乎没有必要这样做.只需要一个模数N,然后给不同的用户分发不同的e和d就好了.可惜这种做法有严重的安全漏 ...
- MYSQL常用函数(系统信息函数)
DATABASE() 返回当前数据库名 BENCHMARK(count,expr) 将表达式expr重复运行count次 CONNECTION_ID() 返回当前客户的连接ID FOUND_ ...
- Eclipse无法使用springboot2.x
<!-- 阿里云提供的镜像地址 --> <mirror> <id>nexus-aliyun</id> <mirrorOf>*</mir ...
- jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第一话):初次启动jenkins,输入给定密码后登录失败问题解决
Jenkins是一个持续集成平台,它能够从git等源码管理服务器拉取代码.打包并发布到tomcat等中间件,只要配置好相关插件,就可以做到项目的自动化构建.部署,不论是对开发来说监控代码质量,还是对测 ...
- Android中简单活动窗口的切换--Android
本例实现Android中简单Activity窗口切换:借助intent(意图)对应用操作(这里用按钮监听)等的描述,Android根据描述负责找对应的组件,完成组件的调用来实现活动的切换……案例比较简 ...
- WCF开发框架形成之旅--个人图片信息的上传保存
WCF开发框架形成之旅--个人图片信息的上传保存 http://www.cnblogs.com/wuhuacong/archive/2011/12/23/2299614.html 一般在业务系统里面, ...
- 使用jquery.mobile和WebSQL实现记事本功能
1.记事本列表页 1.1.页面结构与样式: <div data-role="page" id="home"> <div data-role=& ...