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

简介: 上一节我们完成了开发工作流工具和环境准备,这一节我们将进行渐进式应用编程。熟悉 AngularJS 开发的同学请跳过。 上一节参考: AngularJS 实践:应用开发 :: ENA13 价格条码-(二) 添加 web 应用所依赖的 JavaScript, Stylesheet 引用 编辑 i

上一节我们完成了开发工作流工具和环境准备,这一节我们将进行渐进式应用编程。熟悉 AngularJS 开发的同学请跳过。

上一节参考: AngularJS 实践:应用开发 :: ENA13 价格条码-(二)

获取本节代码

https://code.aliyun.com/passpile/pricebarcode

添加 web 应用所依赖的 JavaScript, Stylesheet 引用

编辑 index.html
  1. 添加 bootstrap 和 font-awesome 的 CSS 库引用
  2. 添加 angularjs 的核心 js 以及一些插件:

    angular-ui-router,angular-barcode,lodash,angular-touch(option),angular-animate(option)
    

注:如果你现在处于 gulp serve 状态,则你每一次修改后的保存,将引起浏览器自动重新加载新的内容。

[BS] Serving files from: .
[BS] Reloading Browsers...
...
<!-- build:css(../) styles/vendor.min.css -->
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" />
<!-- endbuild -->
...
...
<!-- build:js(../) scripts/vendor.min.js -->
<script src="/bower_components/lodash/lodash.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-touch/angular-touch.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/bower_components/angular-barcode/dist/angular-barcode.js"></script>
<!-- endbuild -->

你可能会看到如下错误:
pricecode_illustration_04
这是由于我们在前一节漏掉了一个 JavaScript 的依赖库。我将使用如下命令安装遗漏的 lodash。如果你现在处于 browser sync 状态下,你可以 Ctrl + C 退出 browser sync 状态。再执行下述命令,或新打开一个 Terminal 来执行。

$ cd ~/webshop
$ bower install lodash --save

--save 参数将使我们安装的依赖库记入 ~/webshop/bower.json 文件

例如

...
"dependencies": {
  ...,
  ...,
  "lodash": "^4.6.1"
},
...

安装完成后,如果你先前停止了 browser sync ,你可以回到项目目录 cd ~/webshop/pricebarcode 通 过命令 gulp serve 开始 browser sync,这时 Chrome 会自动打开,你可检视到如下样本:
pricecode_illustration_05

Hello AngularJS

编辑 scripts/route.js 添加如下代码:
//console.log('Hi, console')
'use strict';
angular.module('pbcodeApp',[])
.controller('GreetingCtrl',function($scope){
    $scope.greeting = 'Hello AngularJS!';
});
编辑 index.html,修改并添加如下代码:
<!DOCTYPE html>
<html ng-app="pbcodeApp">
...
...
<!--h1>It's Work</h1-->
<h1 ng-controller="GreetingCtrl">{{greeting}}</h1>
...
</html>

这几处代码涉及到了 AngularJS 的 MVC, Data Binding, 模块申明 pbcodeApp, Scoping 对象的使用,还有 Expression 的使用,由于篇幅有限请自行参考学习 AngularJS 或其它相关资料

Tip: 如果你有过 ASP, JSP&Servlet 等的开发经验,这些对你来说应该很熟悉(比如:Scoping 对象就有点类似于 JSP&Servlet 的 application scope, session scope, request scope等, 并且JSP&Servlet 的 EL Expression 和 JSTL 在AngularJS也有类似概念),其差别在于一个(AngularJS)在浏览器中聚合呈现内容,另一个(ASP,JSP...)在服务器上聚合呈现内容

pricecode_illustration_06

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

目录
相关文章
|
1月前
|
JavaScript
基于Angular的简易在线购物车设计与实现
基于Angular的简易在线购物车设计与实现
21 3
|
8月前
|
设计模式 JavaScript 前端开发
12分布式电商项目 - AngularJS快速入门
12分布式电商项目 - AngularJS快速入门
23 0
|
8月前
|
设计模式 前端开发 JavaScript
11分布式电商项目 - AngularJS简介
11分布式电商项目 - AngularJS简介
32 0
|
移动开发 JavaScript 前端开发
「前端架构」前端框架(一部): Angular的内幕
「前端架构」前端框架(一部): Angular的内幕
|
开发工具 git
angularjs增删改查(2)--品牌管理
angularjs增删改查(2)--品牌管理
158 0
angularjs增删改查(2)--品牌管理
|
定位技术
angularJs集成百度地图
angularJs集成百度地图
104 0
|
API
Angular 2.x折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点
表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式。 首先需要操作表单的模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
155 0