您的位置:首页 > Web前端 > JavaScript

angular js 的一些特性

2017-06-06 16:26 94 查看
1. 路由

.state(‘xxx’,{
abstract: true,
url: ‘xxx’,
template: ‘<div></div>’,  //或者templateUrl: ‘xxx/a.html’
controller: ‘xxxCtrl’,
resolve: { }
})


abstract:表示抽象模版,不能被显性激活,只能被子模版隐性激活,可以传递作用域变量$scope给子模板。一旦这个路由设置了abstract:true  如果下面没有子模版,那么模版不会被渲染出来,也就是说这种情况下必须设置子模版。

resolve 页面渲染前的预加载,一般用来处理异步数据调用。

2.component组件

js文件:

angular.module('myApp')
.component('myComponent',{
templateUrl: '...',
bindings: {
myAttribute1: ' < ',
myAttribute2: ' & '
},
controller:{
var $ctrl = this;
}
});

html文件:

<my-component my-attibute1="a1" my-attibute2="a2">
</my-component>

bindings 用来绑定属性,<  表示单向绑定,只有父scope能影响子scope。

可以直接使用$ctrl,而不必用controllerAs。

3. 刷新当前路由(不是强制刷新整个页面)

比如在创建页面, 如果有“保存并继续创建”按钮,此时需要继续停在该页面,并且页面中的信息清空。即重新进入该路由。如果使用window.location.reload(); 整个页面会被刷新,数据请求量比较大。

(1)在路由中增加这个属性  reload:true,

.state('app.add', {
url: '/add',
templateUrl: 'views/add.html',
controller: 'AddCtrl',
reload: true
})
(2)在AddCtrl中

$state.go('app.add',{},{reload:true});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: