AngularJS 实践:应用开发 :: ENA13 价格条码-(四)-阿里云开发者社区

开发者社区> 开发与运维> 正文

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 模式和视图状态管理下导航控制

pricecode_illustration_07

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

body{
  padding-top: 70px;
}

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

pricecode_illustration_08

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

pricecode_illustration_09

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章