MyException - 我的异常网
当前位置:我的异常网» Web前端 » 用angularjs开发下一代web应用(2):angularjs应用

用angularjs开发下一代web应用(2):angularjs应用骨架(二)

www.MyException.Cn  网友分享于:2014-08-05  浏览:0次
用angularjs开发下一代web应用(二):angularjs应用骨架(二)

1.浅谈非入侵式JavaScript

        <div ng-click="doSomething()">...</div>这些指令和原来的事件处理器有以下不同之处:
        在所有浏览器中具有相同的行为。Angular将会帮你屏蔽差异性。

         不会在全局命名空间中进行操作。你所指定的表达式只能访问元素控制器作用域范围内的函数和数据。     

2.列表、表格以及其他迭代型元素

        ng-repeat可能是最有用的Angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝。不管在什么地方,只要你想创建一组事物的列表,你就可以使用这条令。

        js代码:

var students = [{name:'Mary Contrary', id:'1'},
{name:'Jack Sprat', id:'2'},
{name:'Jill Hill', id:'3'}];
function StudentListController($scope) {
$scope.students = students;
$scope.insertTom = function () {
$scope.students.splice(1, 0, {name:'Tom Thumb', id:'4'});
};
}
        html代码:

<ul ng-controller='StudentListController'>
<li ng-repeat='student in students'>
<a href='/student/view/{{student.id}}'>{{student.name}}</a>
</li>
</ul>
<button ng-click="insertTom()">Insert</button>
        ng-repeat指令可以通过$index返回当前引用的元素序号;还可以通过$first、$middle及$last,ng-repeat指令返回布尔值,告诉你当前元素是否是集合中的第一个元素、中间的某个元素,或者最后一个元素。

html代码:

<table ng-controller='AlbumController'>
<tr ng-repeat='track in album'>
<td>{{$index + 1}}</td>
<td>{{track.name}}</td>
<td>{{track.duration}}</td>
</tr>
</table>
js代码:

var album = [{name:'Southwest Serenade', duration: '2:34'},
{name:'Northern Light Waltz', duration: '3:21'},
{name:'Eastern Tango', duration: '17:45'}];
function AlbumController($scope) {
$scope.album = album;
}

3.隐藏和显示
       这个例子将会使用ng-show和ng-hide。这两条指令的功能是等价的,但是运行效果正好相反,它们都可以根据你所传递的表达式来显示或者隐藏元素。

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

4.CSS类和样式

       Angular提供了ng-class和ng-style指令。这两个指令都可以接受一个表达式,表达式执行的结果可能是如下取值之一:
                          表示CSS类名的字符串,以空格分隔。  
                          CSS类名数组。  
                          CSS类名到布尔值的映射。  

    css代码:

.selected {
background-color: lightgreen;
}

在模板中,我们把ng-class设置为{selected:  $index==selectedRow}。这样做的效果就是,当模型属性selectedRow的值等于ng-repeat中的$index时,selected样式就会被设置到那一行上。

js代码:

function RestaurantTableController($scope) {
$scope.directory = [{name:'The Handsome Heifer', cuisine:'BBQ'},
{name:'Green's Green Greens', cuisine:'Salads'},
{name:'House of Fine Fish', cuisine:'Seafood'}];
$scope.selectRestaurant = function(row) {
$scope.selectedRow = row;
};
}

html代码:

<table ng-controller='RestaurantTableController'>
<tr ng-repeat='restaurant in directory' ng-lick='selectRestaurant($index)'
ng-class='{selected: $index==selectedRow}'>
<td>{{restaurant.name}}</td>
<td>{{restaurant.cuisine}}</td>
</tr>
</table>

5.反思src和href属性

       由于浏览器会优先使用并行的方式来加载图片和其他内容,所以Angular没有机会拦截到数据绑定请求。
      这里应该使用ng-src指令,你的模板应该写成这样:
             <img ng-src="/images/cats/{{favoriteCat}}">
       类似地,对于<a>标签,应该使用ng-href指令:
      <a ng-href="/shop/category={{numberOfBalloons}}">some text</a>

6.表达式

      表达式是通过Angular内置的解析器执行的。在这款解析器中,你找不到循环结构(for、while等)、流程控制操作符(if-else、throw),以及修改数据的操作符(++、--)。当你需要这些类型的操作符时,请在你的控制器中执行或者通过指令执行。虽然在很多方面这里的表达式比JavaScript更严格,但是它们对undefined和null的容错性更好。如果遇到错误,模板只是简单地什么都不显示,而不会抛出一个NullPointerException错误。

7.区分ui和控制器的职责

        在应用中控制器有三种职责:

    1> 为应用中的模型设置初始状态。 
    2> 通过 $scope对象把数据模型和函数暴露给视图(UI模板)。
    3> 监视模型其余部分的变化,并采取相应的动作。

   为视图中的每一块功能区域创建一个控制器。

    有两种主要的方法可以把控制器关联到DOM节点上,第一种是在模板中通过ng-controller属性来声明,另一种是通过路由把它绑定到一个动态加载的DOM模板片段上,这个模板叫做视图。     

<div ng-controller="ParentController">
<div ng-controller="ChildController">...</div>
</div>
虽然我们把这种方式叫做控制器嵌套,但真实的嵌套发生在$scope对象上。通过内部的原型继承机制,父控制器对象上的$scope会被传递给内部嵌套控制器的$scope。具
体到上面例子就是,ChildController的$scope对象可以访问ParentController的$scope对象上的所有属性(和函数)。

8.利用$scope暴露模型数据

        对于显式地创建$scope属性我们已经看到过很多例子了,例如$scope.count  =  5。还可以间接地通过模板自身创建数据模型。你可以通过以下几种方式来实现这一点。
      1>通过表达式。

  <button ng-click='count=3'>Set count to three</button>

       2>在表单输入项上使用ng-model。与表达式类似,ng-model上指定的模型参数同样工作在外层控制器内。唯一的不同点在于,这样会在表单项和指定的模型之间建立双向绑定关系。


文章评论

程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
那些争议最大的编程观点
那些争议最大的编程观点
 程序员的样子
程序员的样子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
老程序员的下场
老程序员的下场
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员应该关注的一些事儿
程序员应该关注的一些事儿
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
我是如何打败拖延症的
我是如何打败拖延症的
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
漫画:程序员的工作
漫画:程序员的工作
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Java程序员必看电影
Java程序员必看电影
总结2014中国互联网十大段子
总结2014中国互联网十大段子
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
10个调试和排错的小建议
10个调试和排错的小建议
为什么程序员都是夜猫子
为什么程序员都是夜猫子
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
中美印日四国程序员比较
中美印日四国程序员比较
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
一个程序员的时间管理
一个程序员的时间管理
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
每天工作4小时的程序员
每天工作4小时的程序员
代码女神横空出世
代码女神横空出世
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
如何成为一名黑客
如何成为一名黑客
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员必看的十大电影
程序员必看的十大电影
程序员和编码员之间的区别
程序员和编码员之间的区别
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
编程语言是女人
编程语言是女人
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员都该阅读的书
程序员都该阅读的书
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有