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 价格条码-(四)

目录
相关文章
|
6月前
|
JavaScript
基于Angular的简易在线购物车设计与实现
基于Angular的简易在线购物车设计与实现
70 3
|
3月前
|
前端开发 UED 开发者
深度剖析Angular表单控件:从模板驱动到响应式表单的最佳实践,带你全面掌握Angular表单处理机制,提升前端开发效率与用户体验的终极指南
【8月更文挑战第31天】本文通过代码示例详细介绍了 Angular 中两种主要的表单处理方式:模板驱动表单和响应式表单。模板驱动表单适用于简单场景,可在 HTML 模板中直接定义表单控件并实现数据绑定和验证。响应式表单基于 RxJS,提供更灵活的表单管理和复杂的逻辑处理。通过具体示例展示了每种方式的最佳实践,帮助开发者简化表单处理,提高开发效率和用户体验。
30 0
|
3月前
|
JavaScript 应用服务中间件 nginx
玩转现代化部署:Angular与Docker的完美邂逅——细说如何通过容器化技术让您的Angular应用飞速上线,实现一键部署的高效与便捷,彻底告别复杂流程
【8月更文挑战第31天】容器化技术已成现代软件部署标配,为应用提供一致的运行环境。本文通过具体示例详细介绍了如何使用 Docker 容器化 Angular 应用,包括创建 Angular 项目、编写 Dockerfile 以及构建和运行 Docker 镜像的过程,显著提升了部署效率与可靠性。无论在本地调试还是生产部署,Docker 均提供了高效解决方案。
45 0
|
设计模式 JavaScript 前端开发
12分布式电商项目 - AngularJS快速入门
12分布式电商项目 - AngularJS快速入门
31 0
|
设计模式 前端开发 JavaScript
11分布式电商项目 - AngularJS简介
11分布式电商项目 - AngularJS简介
49 0
|
开发工具 git
angularjs增删改查(2)--品牌管理
angularjs增删改查(2)--品牌管理
179 0
angularjs增删改查(2)--品牌管理
|
API
Angular 2.x折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点
表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式。 首先需要操作表单的模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
169 0