AngularJS开发实战入门教程

banq
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是用来隐藏直至其被处理完成。如下：

在其中还可以使用filters 进行排序，如下：

  • {{widget.title}}
    {{widget.value}}

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