标签归档:AngularJS

ui-router – 多个命名的视图

可以给ui-view指定名称,这样一个模板中就可以有多个ui-view。假设您有一个应用,需要动态填充graph、table data和filters,像下面这样:

当您需要使用多视图时,需要用到状态的views属性,views属性值是一个对象。

设置views属性将覆盖覆盖的template属性

如果在状态中定义了views属性,那么状态中的templateUrl、template 和 templateProvider属性将被忽略。

示例 – 名称匹配
views的属性key应该对应的ui-view的名称、像下面这样:

[code]<!– index.html –>
<body>
<div ui-view="filters"></div>
<div ui-view="tabledata"></div>
<div ui-view="graph"></div>
</body>[/code]

[code]$stateProvider
.state(‘report’, {
views: {
‘filters’: { … templates and/or controllers … },
‘tabledata’: {},
‘graph’: {},
}
})[/code]

然后views中的每一个 view 都可以设置自身的模板属性(template,templateUrl,templateProvider) 和控制器属性(controller,controllerProvider)。

[code]$stateProvider
.state(‘report’,{
views: {
‘filters’: {
templateUrl: ‘report-filters.html’,
controller: function($scope){ … controller stuff just for filters view … }
},
‘tabledata’: {
templateUrl: ‘report-table.html’,
controller: function($scope){ … controller stuff just for tabledata view … }
},
‘graph’: {
templateUrl: ‘report-graph.html’,
controller: function($scope){ … controller stuff just for graph view … }
},
}
})[/code]

视图名称 – 相对命名与绝对命名
在定义views属性时,如果视图名称中包含@,那么视图名称就是绝对命名的方式,否则就是相对命名的方式。相对命名的意思是相对于父模板中的ui-view,而绝对命名则指定了相对于哪个状态的模板。
在 ui-router 内部,views属性中的每个视图都被按照viewname@statename的方式分配为绝对名称,viewname是目标模板中的ui-view对应的名称,statename是状态的名称,状态名称对应于一个目标模板。@前面部分为空表示未命名的ui-view,@后面为空则表示相对于根模板,通常是 index.html。
例如,上面的例子可以写成如下方式:

[code].state(‘report’,{
views: {
‘filters@’: { },
‘tabledata@’: { },
‘graph@’: { }
}})[/code]

注意,这样的写法,视图的名称指定为绝对的名字,而不是相对的名字。这样 ‘filters’,’tabledata’和’graph’三个视图将加载到根视图的模板中(由于没有父状态,则根模板就是index.html)。

绝对命名的方式可以让我们完成一些强大的功能,让我们假设我们有几个模板设置(这里仅仅作为实例演示,有些不现实的地方),像下面这样:

[code]<!– index.html (root unnamed template) –>
<body ng-app>
<div ui-view></div> <!– contacts.html plugs in here –>
<div ui-view="status"></div>
</body>

<!– contacts.html –>
<h1>My Contacts</h1>
<div ui-view></div>
<div ui-view="detail"></div>

<!– contacts.detail.html –>
<h1>Contacts Details</h1>
<div ui-view="info"></div>[/code]

让我们来看看在contacts.detail状态中,相对命名和绝对命名的各种使用方式,请注意,一旦使用了@则表示绝对命名的方式。

[code]$stateProvider
.state(‘contacts’, {
// 根状态,对应的父模板则是index.html
// 所以 contacts.html 将被加载到 index.html 中未命名的 ui-view 中
templateUrl: ‘contacts.html’
})
.state(‘contacts.detail’, {
views: {
// 嵌套状态,对应的父模板是 contacts.html
// 相对命名
// contacts.html 中 <div ui-view=’detail’/> 将对应下面
"detail" : { },

// 相对命名
// 对应 contacts.html 中的未命名 ui-view <div ui-view/>
"" : { },
// 绝对命名
// 对应 contacts.detail.html 中 <div ui-view=’info’/>
"info@contacts.detail" : { }
// 绝对命名
// 对应 contacts.html 中 <div ui-view=’detail’/>
"detail@contacts" : { }
// 绝对命名
// 对应 contacts.html 中的未命名 ui-view <div ui-view/>
"@contacts" : { }
// 绝对命名
// 对应 index.html 中 <div ui-view=’status’/>
"status@" : { }
// 绝对命名
// 对应 index.html 中 <div ui-view/>
"@" : { }
});[/code]

你将发现,不仅仅可以在同一状态设置多个视图,而且祖先状态可以由开发者自由控制:)。
转自:http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/

招贤纳士

招聘企业:阿里巴巴集团-阿里云事业部
招聘职位
:前端工程师,java工程师,技术专家
职级:P5,P6,P7
工作地点:北京、杭州
入职:可以过完年以后入职
有意者可将简历发送到729120092#qq.com(#换成@)

Java开发—-P6岗位描述及要求
岗位描述:
1. 负责阿里云海外web主站的后台业务开发,研究和优化
2. 深入理解海外业务,参与需求分析,为业务开发提供架构设计;
3. 发现和解决存在的性能瓶颈等技术难题;
4. 核心部分代码的编写、指导和培训;
5. 对未来技术架构具有前瞻性和规划能力。

岗位要求:
1. 计算机相关专业本科或以上学历,三年以上J2EE项目开发经验;
2. 扎实的编程基础,精通java开发语言,熟悉jvm,web开发、缓存,分布式架构、消息中间件等核心技术;
3. 精通Java EE相关的主流开源框架,能了解到它的原理和机制
4. 思路清晰,良好的沟通能力与技术学习能力;
5. 具有大型电子商务网站,海外电子商务网站,银行业核心系统、电信boss系统设计与研发经验背景的优先考虑
6. 英语流利者优先考虑。

前端开发—-P6岗位描述及要求
岗位描述:
1. 负责阿里云国际站点的 Web 前端开发,研究和优化
2. 运用良好的模块化设计思想和架构,迅速搭建站点
3. 在理解产品业务,海外业务及使用者习惯的基础上,结合前端技术建立或优化Web的用户体验
4. 参与前端框架的设计与实现,平台易用性与用户体验的持续改进
5. Web前沿技术研究和新技术调研,指导和培训新人
岗位要求:
1. 熟悉和了解web设计和编码,精通 (X)HTML、CSS、JavaScript 等前端技术
2. 深刻理解Web标准,对可用性、可访问性等相关知识有实际的了解和实践经验,具有模块化编程思想、良好的代码书写习惯
3. 至少具备一门服务端开发语言(如:PHP、Java、Python、NodeJS 等),对业界前言技术有较强的敏感度
4. 至少具备1年以上的海外网站开发,安全,性能优化等方面经验
5. 具有较强前瞻能力和执行力,能够主导项目、管理项目进度和提升团队专业能力
6. 个性乐观开朗,逻辑性强,善于和各种背景的人合作
7. 英语能力优秀者加分

angularjs工具方法

angular.bind(self, fn, args)

  • 作用:返回一个新的函数,绑定这个函数的this指向self
  • 参数:
    • self:新函数的上下文对象
    • fn:需要绑定的函数
    • args:传递给函数的参数
  • 返回值:this指向self的新函数

注意:bind会根据你的参数类型来决定调用call或apply,所以args可以是一个个数据,也可以是一个数组哦。

angular.copy(source, [destination])

  • 作用:对象的深拷贝
  • 参数:
    • source:源对象
    • destination:拷贝的对象
  • 返回值:拷贝的对象

angular.equals(o1, o2)

  • 作用:正常比较和对象的深比较
  • 参数:
    • o1:比较的对象
    • o2:比较的对象
  • 返回值:boolean

angular.extend(dst, src)

  • 作用:对象的拓展
  • 参数:
    • dst:拓展的对象
    • src:源对象
  • 返回值:拓展的对象

angular.forEach(obj, iterator, [context])

  • 作用:对象的遍历
  • 参数:
    • obj:对象
    • iterator:迭代函数
    • context:迭代函数中上下文
  • 返回值:obj

angular.fromJson(string)

  • 作用:字符串转json对象
  • 参数:
    • string:字符串
  • 返回值:json对象

angular.toJson(json,pretty)

  • 作用:json对象转字符串
  • 参数:
    • json:json
    • pretty:boolean number 控制字符串输出格式
  • 返回值:字符串

angular.identity(value)

  • 作用:返回这个函数的第一个参数
  • 参数:
    • value:参数
  • 返回值:第一个参数

angular.isArray(value)

  • 作用:判断一个数据是否是数组
  • 参数:
    • value:数据
  • 返回值:boolean

angular.isDate(value)

  • 作用:判断一个数据是否是Date类型
  • 参数:
    • value:数据
  • 返回值:boolean

angular.isDefined(value)

  • 作用:判断一个数据是否是defined类型
  • 参数:
    • value:数据
  • 返回值:boolean

angular.isUndefined(value)

  • 作用:判断一个数据是否是undefined类型
  • 参数:
    • value:数据
  • 返回值:boolean

angular.isFunction(value)

  • 作用:判断一个数据是否是函数
  • 参数:
    • value:数据
  • 返回值:boolean

angular.isNumber(value)

  • 作用:判断一个数据是否是Number类型
  • 参数:
    • value:数据
  • 返回值:boolean

angular.isObject(value)

  • 作用:判断一个数据是否是对象
  • 参数:
    • value:数据
  • 返回值:boolean

angular.isString(value)

  • 作用:判断一个数据是否是字符串
  • 参数:
    • value:数据
  • 返回值:boolean

angular.lowercase(string)

  • 作用:将字符串大写字母变小写
  • 参数:
    • string:字符串
  • 返回值:改变后的新字符串

angular.uppercase(string)

  • 作用:将字符串小写字母变大写
  • 参数:
    • string:字符串
  • 返回值:改变后的新字符串

angular.noop()

  • 作用:空函数

转载自:http://segmentfault.com/a/1190000002625738