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;
});

['ngTouch','ngAnimate','ui.router'] 为 AngularJS 的依靠注射(DI)
.config(... 为我们的 MVC 配置，据此我需要一个命名为"FrontCtrl"的 Controller 和一个名称为"front.html"的页面文件作为视图 (partial view)。
.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 的编写，完成控制器，视图，与数据绑定等。待续...