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

开发者社区> 开发与运维> 正文
登录阅读全文

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

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

分享: