AngularJS 实践：应用开发 :: ENA13 价格条码-(四)

上节我们做了个 Hello AngularJS，这一节我开始构建用户界面和用户操作控制等。

上节回顾 AngularJS 实践：应用开发 :: ENA13 价格条码-(三)

本节我将使用 Bootstrap HTML, CSS, and JS 框架，相关知识请参考官网文档 Bootsrap Getting Started

本节代码获取

如果已经 Clone 了代码库，你只需要执行 git checkout codetrip-1

$ git clone https://code.aliyun.com/passpile/pricebarcode.git
$ git checkout codetrip-1

为首页添加顶部导航和左侧菜单(可选)

index.html (由于篇幅有限，咱们只例示关键部分，其它可参照代码库)

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 ...
            <a class="navbar-brand" ui-sref="front">Price Barcode</a>
...
</nav>
<div class="container-fluid">
    ...
                <li ui-sref-active="active"><a ui-sref="front">EAN13 价格条码</a></li>
    ...
        <div class="col-lg-10">
            <div class="view-container">
            <div class="view-frame" ui-view></div>
            </div>
        </div>
   ...
</div>

ui-sref, ui-sref-active, ui-view 请参见 UI Router API Reference

修改 scripts/route.js，申明我们的视图状态 front, 这里涉及到 UI Router State Manager

'use strict';
angular.module('priceBarcodeApp',[
    'ngTouch',
    'ngAnimate',
    'ui.router'
])
.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/front');
    $stateProvider.state('front',{
        url: '/front',
        templateUrl: 'front.html',
        controller: 'FrontCtrl'
    });
})
.controller('FrontCtrl',function($state,$scope){
    $scope.frontHeading = 'ENA13 价格条码生成器说明';
})
.run(function($rootScope, $state,$stateParams){
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
});

1. ['ngTouch','ngAnimate','ui.router'] 为 AngularJS 的依靠注射(DI)
2. .config(... 为我们的 MVC 配置，据此我需要一个命名为"FrontCtrl"的 Controller 和一个名称为"front.html"的页面文件作为视图 (partial view)。
3. .controller(...为我们的 Controller 申明(按照 AngularJS 是最佳实践提示，可以分列 Controllers 到一个单独文件并通过 DI 引入，这里我们暂且申明在同一个文件中)

front.html

<hr/>
<ui-view/>
<div class="panel panel-info">
    <div class="panel-heading">{{frontHeading}}</div>
    ...
</div>

{{frontHeading}} Expression 将绑定 Scoping 变量 $scope.frontHeading

如果你的 Terminal 保持在 browser sync 状态，你将看到如下界面。这样我们就完成了一个基本的 MVC 模式和视图状态管理下导航控制

:( 。我们调整一下 styles/main.scss 就行了。加入以下片段

body{
  padding-top: 70px;
}

由于我们的gulpfile 加入了 gulp.watch('./styles/**/*.scss', ['styles']); 这样我们只要改修并保存了相应文件 browser-sync 插件将会为我们自动加载新的内容。这个可以说是 WYSIWYG 的开发效果吧。:)

为 front.html 添加用户输入表单和条形码条目列表后我们将看到如下界面。由于篇幅原因请参考代码库。(本节开头处 本节代码获取 有说明)

下一节我们将进行 Controller 的编写，完成控制器，视图，与数据绑定等。待续...