用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上指定的模型参数同样工作在外层控制器内。唯一的不同点在于,这样会在表单项和指定的模型之间建立双向绑定关系。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值