发帖    主题    评论    推荐    标签    作者    订阅    查搜    注册   登陆   关注
 
面向对象 设计模式 领域驱动设计 企业架构 框架 开发教程 微服务 CQRS 扩展性 并发编程 事件溯源 分布式 SOA

AngularJS开发实战入门教程

    
2013-06-25 13:21
赞助商链接

Raible Designs | Developing with AngularJS - Part I: The Basics一文的实战教程比较贴近实战,要义翻译如下,有进一步兴趣可查原文:

需求设计如下页面:


将这个页面分割成几个widgets块,如下:


分为四种类型widgets:
1.Summary
2.Tasks
3.Charts
4.Reports

这些widget需要一个类似数据表结构的数据结构,定义widget数据结构如下:

"id": 1, // not necessary for display, but likely needed if we modify and save preferences
"title": "Appointments Today",
"type": "summary", // others include: task, chart, report
"value": 3,
"description": "10:30 Jim Smith",
"events": "url", // this can have click events
"order": 1 // used to determine order


下图是采取这种数据结构的widgets设计好的假设图:


下面开始了AngularJS基础:
准备AngularJS环境,如下目录结构:


app.js是用来加载其它js文件。
controller.js包含MVC的Controllers控制器。
本案例中模型数据如下:

var widgetData = [
{"id": 1, "title": "Appointments Today", "type": "summary", "value": 3, "description": "10:30 Jim Smith", "events": {"click": "alert('foo');"}, "order": 1},
{
"id": 12, "order": 2, "title": "Offer Approvals", "type": "task", "class": "sticky-note", "value": 1},
{
"id": 103, "title": "Browser market shares at a specific website, 2010", "order": 1, "type": "chart", "chartType": "pie",
"tooltip": {"pointFormat": "{series.name}: <b>{point.percentage}%</b>", "percentageDecimals": 1}, "series": [
{
"type": "pie", "name": "Browser share", "data": [
[
"Firefox", 45.0],
[
"IE", 26.8],
{
"name": "Chrome", "y": 12.8, "sliced": true, "selected": true},
[
"Safari", 8.5],
[
"Opera", 6.2],
[
"Others", 0.7]
]}
]},
...
];

在控制器中获得模型数据如下:

'use strict';

/* Controllers */
function WidgetController($scope) {
$scope.widgets = widgetData;
}

MVC的视图View代码如下:

<div ng-app="dashboard" class="dashboard">
<div class=
"container-widgets" ng-controller="WidgetController" ng-cloak>
<div class=
"row-fluid">
<div class=
"span9">
<ul class=
"widgets">
<li id=
"summary-bar">
<div class=
"heading">Summary</div>
<ul class=
"tiles">
<li class=
"span3" ng-repeat="widget in widgets | filter:{type: 'summary'} | orderBy: 'order'">
<h3 class=
"events">{{widget.value}}</h3>
<div class=
"title">{{widget.title}}</div>
<div class=
"desc">{{widget.description}}</div>
</li>
</ul>
</li>
<li id=
"task-bar">
<div class=
"heading">My Tasks</div>
<ul class=
"tasks">
<li class=
"task {{widget.class}}" ng-repeat="widget in widgets | filter: {type: 'task'} | orderBy: 'order'">
<div class=
"title events">{{widget.title}}</div>
<div class=
"value">{{widget.value}}</div>
</li>
</ul>
</li>
<li id=
"chart-bar">
<div class=
"heading">Charts</div>
<div id=
"chartCarousel" class="carousel slide">
<ol class=
"carousel-indicators">
<li data-target=
"#chartCarousel"
ng-repeat=
"widget in widgets | filter: {type: 'chart'} | orderBy: 'order'"
data-slide-to=
"{{$index}}" ng-class="{active: $index == 0}"></li>
</ol>
<div class=
"carousel-inner">
<div class=
"item chart"
ng-repeat=
"widget in widgets | filter: {type: 'chart'} | orderBy: 'order'"
ng-class=
"{active: $index == 0}">
<chart class=
"widget" value="{{widget}}" type="{{widget.chartType}}"></chart>
</div>
</div>
<a class=
"left carousel-control" href="#chartCarousel" data-slide="prev">‹</a>
<a class=
"right carousel-control" href="#chartCarousel" data-slide="next">›</a>
</div>
</li>
</ul>
</div>
<div class=
"span3">
<!-- clock and reports -->
</div>
</div>
</div>

非常特殊的是这些html中的标识,ng-app 匹配在 app.js中定义的名称,ng-controller是初始化WidgetController,ng-cloak是用来隐藏直至其被处理完成。如下:
<div ng-app="dashboard" class="dashboard">
<div class="container-widgets" ng-controller="WidgetController" ng-cloak>

在其中还可以使用filters 进行排序,如下:
<li class="task {{widget.class}}" ng-repeat="widget in widgets | filter: {type: 'task'} | orderBy: 'order'">
<div class="title events">{{widget.title}}</div>
<div class="value">{{widget.value}}</div>
</li>

其他更多细节可见原文,如何实现Drag-and-Drop等等。还有对话框与数据可见:http://css.dzone.com/articles/developing-angularjs-part-ii

1
2013-11-26 09:35

更详细的:
Angular教程

AngularJS     

赞助商链接

赞助商链接

返回顶部

移动版 关于本站 使用帮助 联系反馈 最佳分辨率1366x768
OpenSource JIVEJDON Powered by JdonFramework Code © 2002-20 jdon.com