無聊看看

發表文章

目前顯示的是 5月, 2015的文章

3.2 組織網頁應用產品(Webapp)

Yeoman介紹我們建議使用 Yeoman 來發展你的網頁應用產品，他整合很多JS前端的技術，例如 Bootstrap 、 Compass 、 Modernizr 、 CoffeeScript 、 Jasmine 、 PhantomJS 、 Grunt 等。 Yeoman軟體開發流程在軟體開發流程階段可以分為需求訪談、產品分析、產品開發、產品測試和上線，這些步驟Yeoman有提供完整前端開發工具與架構。在官方網站可以看到下圖Yeoman前端開發流程架構圖，從產品開發到上線，Yeoman 首先利用yo工具快速開發網頁的骨架、當會載入不同JS框架時可以應用bower框架之間相依性，最後產品上線前會經過壓縮、測試、打包 package 等佈署動作這些可以使用grunt完成。 Yeoman包含三套工具 (1) yo : 當建構新的應用系統，可以用來建立新的建構環境 (2) bower : 套件管理用來管理JS框架之間的相依關係 (3) grunt : 部屬前檔案壓縮、預覽、測試webapp專案 Yeoman環境安裝為了可以安裝Yeoman的架構，我們必須先安裝 node.js , Git for Windows 與 RubyInstaller 這三套工具，才可以安裝Yeoman的工具， Step1. 下載node.js，安裝node.js: https://nodejs.org/download/ 注意: 需要安裝python 2.6或是python 2.7 確定是否安裝成功 Step2. 下載git安裝，git : https://git-scm.com/ 確定git安裝成功 Step3. 下載ruby安裝 : http://rubyinstaller.org/downloads/ 安裝時，注意的事項 Yeoman安裝步驟一、確定node.js版本與npm的版本在命令列輸入: node --version && npm --version v0.12.3 2.9.1 步驟二: 安裝yo bower和 grunt套件 C:\Users\bryan\npm> npm install --global yo bow...

閱讀完整內容

3.1前言

我們接下來介紹使用AngularJS開發產品時，使用哪些工具或是方法會讓開發流程更有效率且符合軟體開發流程使用。如何規畫網頁應用程式開發用於快速應用程式開發模式使用Karma工具用於單元測試產品佈署時，將AngularJS編碼編譯為最小化使用Batarang來偵錯(debug) 簡化開發流程整合RequireJS來管理版本JS函式庫相依性

閱讀完整內容

AngularJS - 教學

1. 介紹AngularJS套件 1.1 AngularJS介紹 1.2 MVC 1.3 Template And Data Binding 1.4 Dependency Injection 1.5 Directive & Filter 2.AngularJS深入淺出 2.1 第一個AngularJS程式 2.2 List、Tables and Other Repeated Elements 2.3 過濾器 2.4 路由與多視圖 2.5 3.AngularJS前端開發 3.1 前言 3.2 組織網頁應用產品 3.3

閱讀完整內容

Router and Multiple Views

Router and Multiple Views 介紹在angularJS提供一個很強大的功能叫作路由(router)，主要應用在切換不同model和views，更容易做出SPA( Single Page Application) 註一等級的產品。本章我們介紹如何利用ngRoute的模組切換不同的網頁視圖。註一 : SPA 的概念傳統的 HTML 網頁一樣，需要每做一個動作就整個更新網頁，但是SAP希望可以像視窗軟體一樣，只需要變更顯示的內容而不需更新整個網頁。載入路由功能 <head> <script src="angular.js" /> <script src="angular-route.js"/> </head> 定義路徑與規畫控制器我們利用$routeProvider來切換網頁內容，下列範例定/home, /viewItems 兩個畫面規畫。在mainApp.controller控制器來切換/home, /viewItems的之內容。 itemController.js var mainApp = angular.module("mainApp", [ 'ngRoute' ]); mainApp.config(function($routeProvider) { $routeProvider .when('/home', { templateUrl: 'home.html', controller: 'ItemController' }) ...

閱讀完整內容

Filters

過濾器(Filters) angularJS在資料格式顯示方面，他們使用過濾器轉換資料，首先我們需要了解過濾器可以處理範圍: 過濾器的格式: {{ filter_expression | filter : expression : comparator}} 過濾器類型說明 currency 貨幣格式 filter 搜尋集合符合條件的子集合 lowercase 轉換成小寫型態 orderBy 排序 uppercase 轉換成大寫型態 (1)currency 範例: 當宣告currency會補上$的符號 <body ng-app="myList" > <div ng-controller='ListController' > <div ng-repeat='item in items'> <span>{{item.title}}</span> <input ng-model='item.quantity'> <span>unit price: {{item.price | currency} }</span> <span>total: {{item.price * item.quantity | currency}} </span> </div>...

閱讀完整內容

Organizing Dependencies with Modules

工廠模式(Factory) 你可以使用工廠模式建立服務，並傳回資料給模組。 1. factory(name,Function()) 2. factory(name,[] , Function() ) <body ng-app="myShoppingList"> <div> <table ng-controller ="itemsController"> <tr ng-repeat="item in items" > <td>{{item.title}}</td> <td>{{item.description}}</td> <td>{{item.price | currency}}</td> ...

閱讀完整內容

List、Tables and Other Repeated Elements

複數元素資料當我們要顯示出多筆物件的資料時，angular有提供ng-repeat的元素它會複製每一筆資料出來範例一 <html ng-app="myApp" > <head> <script src="angular.js"></script> </head> <body> <form ng-controller="fruitController" > <ul> <li ng-repeat="f in fruit" > <a href="/fruit/view/{{f.id}}"> {{f.name}} </a> </li> ...

閱讀完整內容

Templates and Data Binding

樣版(templates) 使用Angular框架它是一種樣板的開發模式，我們會在HTML網頁上，規劃需要載入內容或是效果，其他交給Angular處理就可以 <div ng-model=”greeting” > {{greeting}} //->樣板開發方式 </div> 資料繫結(Data Binding) 你可以利用資料繫結去同步更新資料，這裡提供兩種寫法 (1) <p ng-bind ="greeting"></p> (2) <p>{{greeting}}</p>

閱讀完整內容

第一個AngularJS程式

開始撰寫第一個程式下載Angular套件: https://angularjs.org/ 載入套件: <script src="angular.js"></script> 宣告Angular’s Boundaries (1)和(2) 載入的範圍不同，用來告訴Angular該網頁哪個部分需要處理 (1)載入整個網頁為Template <html ng-app> … </html> (2)載入div元素之間為Template <html> … <div ng-app> … </div> … </html> 完整的網頁 <html ng-app="myList"> <head> <title>My Shopping List</title> <script src="angular.js"></script> </head> <body ng-controller='ListController'> <div > <div ng-repeat='item in items'> <span> {{item.title}} </span> ...

閱讀完整內容

MVC

Model View Controller (MVC) MVC架構在1970提出，模型Model(M)-檢視View(V)-控制Controller(C)三種介面分開，讓程式可以各司其職也讓開發人員可以分工合作，以達到一個較好的開發效率。檔案: ex1.html <html ng-app="myApp" > <head> <script src="angular.js"></script> </head> <body > <div ng-controller='HelloController' > <p> {{greeting.text}} , World</p> </div> </body> <script> var myApp = angular.module('myApp',[]); myApp.controller('HelloController', HelloController); </script> </html> 檔案:controllers.js function HelloController($scope) { $scope.greeting = { text: 'Hello' }; } 說明: 我們定義HelloController顯...

閱讀完整內容

AngularJS介紹

AngularJS由Google 打造的前端 JavaScript 框架，與其他JS框架( ExtJS 、 BackboneJS 、 EmberJS 、 KnockoutJS ) 不同，他可以直接延伸現有的 HTML 架構。以下有幾點關注的概念必須了解，對往後要使用AngularJS框架開發應用網頁會更為快速: 前端網頁MVC架構: 在AngularJS將前端AngularJS為控制器 (Controllers) 、檢視 (Views)與模組 (module)，控制器可以用來切換不同的檢視畫面其內容搭配模組 (module) 與相依性注入 (Dependency Injection) 來實做。當前端網頁也切割為MVC 架構表示我們可以自由的抽離這些實做，但是也會使開發人員學習複雜度增加。資料聯結(Data Binding) 資料繫結很多JS框架都有此功能，我們必須了解單向資料繫結(One-way Data-Binding) 和雙向資料繫結(Two- way Data Binding) 兩種，單向資料繫結產生檢視之前，將模組與模板先做合併的動作，但是如果有經過一些操做改變了模型資料內容，但是檢視上模型並不會改變造成不同步的狀況發生。雙向資料繫結改善單向的缺點，不管使用者在網頁上做了甚麼操作，AngularJS都會去偵查檢視的改變，同步去更新模型的資料內容。相依注入(Dependency Injection,DI) 相依注入是AngularJS 一個強項，它的目地讓程式的組件切割的更加清楚，主要它利用design pattern的方法來將模型靈活的使用，深入了解可以參考Dependency Injection。指示指令(Directives) 在HTML中觸發JavaScript行為的參數，舉例來說 ex1: <html ng-app ="myApp"> ex2: <div ng-controller ='HelloController'> ex3: <div ng-repeat ='item in items'>

閱讀完整內容