Giới thiệu về
AngularJS & Yeoman
TỔNG QUAN & CÁCH SỬ DỤNG ANGULARJS +
YEOMAN ĐỂ XÂY DỰNG SPA
Người trình bày: Đỗ Nam Khánh...
NỘI DUNG
• GIỚI THIỆU VỀ ANGULARJS
•
•

ANGULARJS LÀ GÌ?
CÁC ĐẶC TRƯNG CỦA ANGULARJS

• GIỚI THIỆU VỀ YEOMAN
•
•
•

YO
GRU...
Client Technology Stack

Saturday, 09 November 2013

www.qsoftvietnam.com

3
SPA???
Saturday, 09 November 2013

www.qsoftvietnam.com

4
SPA = Single Page Application
•

MỘT SING-PAGE APP, HAY CÒN ĐƯỢC GỌI LÀ SINGLE-PAGE INTERFACE, LÀ MỘT WEB
APP HAY WEBSITE ...
AngularJS là gì?
• Là một MVC framework dành cho các ứng dụng chạy trên nền
browser
• Được phát triển từ năm 2009 bởi Mišk...
Mục đích thiết kế
• Tách các thao tác với DOM ra khỏi application logic. Cải thiện
khả năng test của mã nguồn.
• Coi việc ...
Tại sao nên sử dụng AngularJS?
• Các thẻ HTML có sẵn vẫn chưa đáp ứng đủ
•
•
•
•

Rich text
Date picker
Cấu trúc lặp cho c...
Các đặc trưng của AngularJS
•
•
•
•
•
•

Kiến trúc MVC
Two-way binding
Dynamic templates
Expressions
Modules
Scopes

Satur...
Kiến trúc MVC
• Phân tách ứng dụng ra các thành phần presentation,
data, & logic
• Khuyến khích loose coupling giữa các th...
MVVM & MVW
• Sau nhiều lần refactorings và cải tiến API thì kiến
trúc của AngularJS đã trở nên gần hơn với MVVM
• $scope o...
Saturday, 09 November 2013

www.qsoftvietnam.com

12
Two-way binding
• Data-binding trong Angular web apps là việc tự động
đồng bộ hoá dữ liệu giữa model & view components.
• ...
Two-way binding

Saturday, 09 November 2013

www.qsoftvietnam.com

14
jQuery way:

Saturday, 09 November 2013

www.qsoftvietnam.com

15
AngularJS way:

Saturday, 09 November 2013

www.qsoftvietnam.com

16
Dynamic templates
• Angular template là 1 đặc tả dạng declarative (khai
báo), cùng với thông tin từ model & controller, tr...
Dynamic templates

Output:
• web
• element
• #14

Saturday, 09 November 2013

www.qsoftvietnam.com

18
Expressions
• Là các snippets giống JS được đặt trong
bindings, kiểu như {{expression}}.
• Được xử lý bởi $parse service
•...
Scopes
• Là object trong application model
• Là phần gắn kết giữa View và Controller
• Scope cung cấp các APIs để theo dõi...
Scopes

Saturday, 09 November 2013

www.qsoftvietnam.com

21
Scopes

Saturday, 09 November 2013

www.qsoftvietnam.com

22
Scopes

Saturday, 09 November 2013

www.qsoftvietnam.com

23
Dependence Injection
• AngularJS sử dụng DI để tách biệt các modules
• Các dependency được đưa vào tự động bởi
framework

...
Dependency Annotation
• Inferring Dependencies
• $inject Annotation
• Inline Annotation

Saturday, 09 November 2013

www.q...
Inferring Dependencies

Saturday, 09 November 2013

www.qsoftvietnam.com

26
$inject Annotation

Saturday, 09 November 2013

www.qsoftvietnam.com

27
$inject API
• $injector.get(name): Return an instance of the service.
• $injector.has(Name):Allows the user to query if th...
Inline Annotation

Saturday, 09 November 2013

www.qsoftvietnam.com

29
Dependence Injection
• Bất cứ function nào được gọi với $injector.invoke đều có thể
được inject
• Mặc định bao gồm:
•
•
•
...
Directives
• Là các tuỳ biến gắn vào các DOM (attribute, element
name, CSS class…) để HTML compiler của
AngularJS có thể t...
Built-in Directives
•
•
•
•
•
•
•
•
•
•
•
•
•

ngApp
ngBind
ngBindHtml
ngBindTemplate
ngBlur
ngChange
ngChecked
ngClass
ng...
Ví dụ về directive
• http://jsfiddle.net/abhiroop/G3UCK/1/light/
• http://jsfiddle.net/donamkhanh/4YEG6/

Saturday, 09 Nov...
Routing
•
•
•
•
•

Dùng để tạo các app theo kiểu SPA (Single Page Application)
ngView thường được dùng để render template
...
Route Events
•
•
•
•

$routeChangeError
$routeChangeStart
$routeChangeSuccess
$routeUpdate

Saturday, 09 November 2013

ww...
$location service configuration
Để cấu hình $location service, cần sử dụng $locationProvider
thiết lập các tham số như sau...
Example configuration
$locationProvider.html5Mode(true);
http://example.com/hello-world
$locationProvider.html5Mode(true)....
$location methods
•
•
•
•
•
•
•
•
•

absUrl()
hash(hash)
host()
path(path)
port()
protocol()
replace()
search(search, para...
$location events
• $locationChangeStart
• $locationChangeSuccess

Saturday, 09 November 2013

www.qsoftvietnam.com

39
Services
•
•
•
•

Services là các phần dùng lại được của business logic
Được tạo dưới dạng các singleton object
Services l...
Các loại services
•
•
•
•
•

Constant
Value
Factory
Service
Provider

Saturday, 09 November 2013

www.qsoftvietnam.com

41
Constant service
• Là một service hữu dụng thường được dùng để cung cấp các
cấu hình mặc định trong directive
• Sử dụng nh...
Value service
• Tương tự như consant service, chỉ khác ở chỗ là ta có thể thay
đổi được giá trị

Saturday, 09 November 201...
Service Factory
• Là một service được sử dụng nhiều nhất & cũng là khái niệm
dễ hiểu nhất.
• Là một service mà có thể trả ...
Service
• Hoạt động gần giống như Factory
• Service nhận về một constructor, do
đó khi sử dụng lần đầu tiên nó sẽ
thực hiê...
Service Provider
• Service provider names bắt đầu bằng tên của service + hậu tố
Provider.
• app.provider('foo', function()...
Service Provider

Saturday, 09 November 2013

www.qsoftvietnam.com

47
Filters
• Định dạng dữ liệu để hiển thị cho user.
• Theo tinh thần của UNIX filters và sử dụng các cú pháp tương
tự | (pip...
Form validation
• Controls (input, select, textarea) là các cách users nhập data
• Form là 1 tập các controls với mục đích...
Form validation
• CSS Classes:
• ng-valid: class được add vào element nếu valid
• ng-invalid: class được add vào element n...
Form validation
• Custom Validation:
• Angular cung cấp các xử lý cơ bản cho hầu hết các kiểu input html5:
(text, number, ...
Form validation
• Validation có thể xuất hiện ở 2 chỗ:
• Model to View update: khi model thay đổi, tất cả các hàm trong
Ng...
Giới thiệu về Yeoman
• Gồm 3 ứng dụng:
• Yo
• Grunt
• Bower

• Yeoman không chỉ là tool mà còn được sử dụng như là 1
workf...
Yeoman features
• Lightning-fast scaffolding
• Dễ dàng tạo khung cho những dự án mới với các template tuỳ biến
được (vd: H...
Yeoman features
• Built-in preview server
• Tối ưu ảnh cực tốt
• Dùng OptiPNG và JPEGTran

• Package management cực ngon
•...
Workflow without Yeoman
1.
2.
3.
4.
5.
6.
7.
8.
9.

Tìm HTML Boilerplate
Download & add vào project
Tìm UI Boilerplate
Dow...
Yeoman workflow

Saturday, 09 November 2013

www.qsoftvietnam.com

57
Yeoman workflow
Includes:
• HTML5 Boilerplate
• Twitter Bootstrap
• AngularJS
• Karma Testrunner
• Scaffolding for
Models,...
Tool để tạo khung, lên khung các app mới, tạo config
cho Grunt và đưa vào các task Grunt cần cho build

Saturday, 09 Novem...
AngularJS generator

Saturday, 09 November 2013

www.qsoftvietnam.com

60
AngularJS generator
Available generators:
1. angular (aka angular:app)
2. angular:controller
3. angular:directive
4. angul...
• Bower là một công cụ quản lý package và các thành phần
phụ thuộc dành cho web.
• Được viết bởi Twitter Inc

Saturday, 09...
Bower commands
Việc sử dụng Bower chủ yếu thông qua 3 lệnh sau:
1. bower search <package name>
2. bower install <package n...
Bower components
• Hiện tại có khoảng 5435 bower components
• http://sindresorhus.com/bower-components

Saturday, 09 Novem...
•
•
•
•

Grunt là tool tự động hoá cho các dự án phát triển web.
Ta có thể minify code, biên dịch, unit test, validate, et...
Grunt tasks (in Yeoman)
• clean: xoá build trước đó
• copy: copy toàn bộ folder staging (intermediate/) sang
(publish/)
• ...
Case study: User management

https://github.com/donamkhanh/sample-user-management

Saturday, 09 November 2013

www.qsoftvi...
Case study: User management
Flow thực hiện bằng jQuery:
• Tạo mockup layout
• Xây dựng server API
• Thao tác với server AP...
Case study: User management
Flow thực hiện bằng AngularJS:
• Static template
• Angular templates
• XHRs & Dependency injec...
Case study: User management

Generate data: www.generatedata.com
Saturday, 09 November 2013

www.qsoftvietnam.com

70
Demo
• Generate skeleton app
•
•
•
•

yo angular:route hello
yo angular:directive hello
yo angular:controller hello
yo ang...
Tài liệu tham khảo
•
•
•
•
•

http://angularjs.org
http://yeoman.io
http://bower.io
http://gruntjs.com
http://angular-tips...
THANK YOU FOR
YOUR ATTENTION!

Saturday, 09 November 2013

www.qsoftvietnam.com

73
Upcoming SlideShare
Loading in …5
×

Giới thiệu Overview về AngularJS, Yeoman

12,698 views

Published on

AngularJS & Yeoman tool, dùng cho việc xây dựng & phát triển website theo phong cách SPA (Single Page Application) --- http://www.qsoftvietnam.com/

Published in: Technology
9 Comments
56 Likes
Statistics
Notes
No Downloads
Views
Total views
12,698
On SlideShare
0
From Embeds
0
Number of Embeds
1,141
Actions
Shares
0
Downloads
0
Comments
9
Likes
56
Embeds 0
No embeds

No notes for slide
  • SPA làgì?Xuhướngtừnăm 2006-2007?
  • Giới thiệu Overview về AngularJS, Yeoman

    1. 1. Giới thiệu về AngularJS & Yeoman TỔNG QUAN & CÁCH SỬ DỤNG ANGULARJS + YEOMAN ĐỂ XÂY DỰNG SPA Người trình bày: Đỗ Nam Khánh Technical Lead @ QSoft Vietnam Corporation khanhdn@qsoftvietnam.com Saturday, 09 November 2013 www.qsoftvietnam.com 1
    2. 2. NỘI DUNG • GIỚI THIỆU VỀ ANGULARJS • • ANGULARJS LÀ GÌ? CÁC ĐẶC TRƯNG CỦA ANGULARJS • GIỚI THIỆU VỀ YEOMAN • • • YO GRUNT BOWER • CASE STUDY: XÂY DỰNG ỨNG DỤNG QUẢN LÝ NGƯỜI DÙNG • DEMO • • • GENERATE SKELETON APP PREVIEW APPLICATION WITH BUILT-IN SERVER BUILD & DEPLOY APPLICATION Saturday, 09 November 2013 www.qsoftvietnam.com 2
    3. 3. Client Technology Stack Saturday, 09 November 2013 www.qsoftvietnam.com 3
    4. 4. SPA??? Saturday, 09 November 2013 www.qsoftvietnam.com 4
    5. 5. SPA = Single Page Application • MỘT SING-PAGE APP, HAY CÒN ĐƯỢC GỌI LÀ SINGLE-PAGE INTERFACE, LÀ MỘT WEB APP HAY WEBSITE HIỂN THỊ VỪA VẶN TRÊN MỘT MẶT TRANG WEB, VỚI MỤC ĐÍCH LÀ GIÚP USER CÓ TRẢI NGHIỆM GIỐNG NHƯ ĐANG DÙNG ỨNG DỤNG TRÊN DESKTOP. • LÀ ỨNG DỤNG CHẠY BÊN TRONG TRÌNH DUYỆT, KHÔNG YÊU CẦU PHẢI RELOAD LẠI TOÀN BỘ TRANG WEB MỖI LẦN SỬ DỤNG Saturday, 09 November 2013 www.qsoftvietnam.com 5
    6. 6. AngularJS là gì? • Là một MVC framework dành cho các ứng dụng chạy trên nền browser • Được phát triển từ năm 2009 bởi Miško Hevery và Adam Abrons • Sau khi Abrons rời khỏi dự án, Hevery cùng Igor Minár and Vojta Jína đã tiếp tục phát triển & trở thành dự án chính thức được Google hỗ trợ • Phiên bản 1.0 được đưa ra vào tháng 6 năm 2012 • Mục tiêu: để xây dựng các ứng dụng nghiệp vụ theo style CRUD • Được xây dựng với tư tưởng hướng đến việc testing. • Sử dụng một phần của jQuery để thao tác với DOM - jqLite Saturday, 09 November 2013 www.qsoftvietnam.com 6
    7. 7. Mục đích thiết kế • Tách các thao tác với DOM ra khỏi application logic. Cải thiện khả năng test của mã nguồn. • Coi việc kiểm thử quan trọng như việc viết mã nguồn. Khó khăn trong việc kiểm thử bị ảnh hưởng đáng kể bởi việc tổ chức code. • Tách riêng phần xử lý ở client của ứng dụng ra khỏi phần xử lý phía server. Điều này cho phép việc phát triển diễn ra song song và cho phép tái sử dụng ở cả hai phía. • Hướng dẫn các developer từ A-Z trong toàn bộ quá trình xây dựng ứng dụng: từ thiết kế UI, viết business logic, cho đến testing. Saturday, 09 November 2013 www.qsoftvietnam.com 7
    8. 8. Tại sao nên sử dụng AngularJS? • Các thẻ HTML có sẵn vẫn chưa đáp ứng đủ • • • • Rich text Date picker Cấu trúc lặp cho các nội dung động ... • HTML được xây dựng cho mục đích hiển thị các dữ liệu tĩnh • AngularJS làm cho HTML trở nên"động" • Giúp các team khác nhau có thể cùng làm việc song song • Front-end team: HTML, CSS, Javascript, AngularJS... • Back-end team: PHP API... Saturday, 09 November 2013 www.qsoftvietnam.com 8
    9. 9. Các đặc trưng của AngularJS • • • • • • Kiến trúc MVC Two-way binding Dynamic templates Expressions Modules Scopes Saturday, 09 November 2013 • • • • • • • Dependency injection Directives Routing Services Filters Form validation Testing in mind www.qsoftvietnam.com 9
    10. 10. Kiến trúc MVC • Phân tách ứng dụng ra các thành phần presentation, data, & logic • Khuyến khích loose coupling giữa các thành phần này • Cùng với services và “dependency injection”, MVC giúp các app Angular có tính cấu trúc tốt hơn, dễ bảo trì và dễ test hơn. Saturday, 09 November 2013 www.qsoftvietnam.com 10
    11. 11. MVVM & MVW • Sau nhiều lần refactorings và cải tiến API thì kiến trúc của AngularJS đã trở nên gần hơn với MVVM • $scope object được xem như là một ViewModel, có thể được decorate bởi một function, gọi là Controller • Sau khi chứng kiến nhiều tranh luận vô nghĩa về MV*, một trong các tác giả framework là Igor Minar đã tuyên bố AngularJS là một… MVW framework – Model-View-Whatever. • Whatever = whatever works for you Saturday, 09 November 2013 www.qsoftvietnam.com 11
    12. 12. Saturday, 09 November 2013 www.qsoftvietnam.com 12
    13. 13. Two-way binding • Data-binding trong Angular web apps là việc tự động đồng bộ hoá dữ liệu giữa model & view components. • Khi thực hiện data-binding, Angular luôn coi Model là “Single-Source of Truth” trong app. • View luôn luôn là thành phần hiển thị ra ngoài của Model. Khi Model thay đổi, View cũng thay đổi theo, và ngược lại. Saturday, 09 November 2013 www.qsoftvietnam.com 13
    14. 14. Two-way binding Saturday, 09 November 2013 www.qsoftvietnam.com 14
    15. 15. jQuery way: Saturday, 09 November 2013 www.qsoftvietnam.com 15
    16. 16. AngularJS way: Saturday, 09 November 2013 www.qsoftvietnam.com 16
    17. 17. Dynamic templates • Angular template là 1 đặc tả dạng declarative (khai báo), cùng với thông tin từ model & controller, trở thành rendered view mà user thấy trên mặt browser. Nó là static DOM, chứa HTML, CSS, và các thành phần, thuộc tính của riêng Angular. Các thành phần Angular và các thuộc tính giúp angular thêm các hành vi và biến đổi template DOM thành dynamic view DOM • Nói 1 cách đơn giản nhất thì Template trong AngularJS là “HTML với additional markup” Saturday, 09 November 2013 www.qsoftvietnam.com 17
    18. 18. Dynamic templates Output: • web • element • #14 Saturday, 09 November 2013 www.qsoftvietnam.com 18
    19. 19. Expressions • Là các snippets giống JS được đặt trong bindings, kiểu như {{expression}}. • Được xử lý bởi $parse service • Ex: <body> 1 + 2 = {{1+2}} </body> Saturday, 09 November 2013 www.qsoftvietnam.com 19
    20. 20. Scopes • Là object trong application model • Là phần gắn kết giữa View và Controller • Scope cung cấp các APIs để theo dõi các thay đổi của Model: $watch • Scope cung cấp các APIs để truyền bất kỳ thay đổi nào của Model tới View: $apply • Tự động đồng bộ dữ liệu giữa Model và View Saturday, 09 November 2013 www.qsoftvietnam.com 20
    21. 21. Scopes Saturday, 09 November 2013 www.qsoftvietnam.com 21
    22. 22. Scopes Saturday, 09 November 2013 www.qsoftvietnam.com 22
    23. 23. Scopes Saturday, 09 November 2013 www.qsoftvietnam.com 23
    24. 24. Dependence Injection • AngularJS sử dụng DI để tách biệt các modules • Các dependency được đưa vào tự động bởi framework Saturday, 09 November 2013 www.qsoftvietnam.com 24
    25. 25. Dependency Annotation • Inferring Dependencies • $inject Annotation • Inline Annotation Saturday, 09 November 2013 www.qsoftvietnam.com 25
    26. 26. Inferring Dependencies Saturday, 09 November 2013 www.qsoftvietnam.com 26
    27. 27. $inject Annotation Saturday, 09 November 2013 www.qsoftvietnam.com 27
    28. 28. $inject API • $injector.get(name): Return an instance of the service. • $injector.has(Name):Allows the user to query if the particular service exist. • $injector.instantiate(Type, locals): Create a new instance of JS type. • $injector.invoke(fn, self, locals): Invoke the method and supply the method arguments from the $injector. Saturday, 09 November 2013 www.qsoftvietnam.com 28
    29. 29. Inline Annotation Saturday, 09 November 2013 www.qsoftvietnam.com 29
    30. 30. Dependence Injection • Bất cứ function nào được gọi với $injector.invoke đều có thể được inject • Mặc định bao gồm: • • • • • • • controller directive factory filter provider $get (khi định nghĩa provider như là một object) provider function (khi định nghĩa provider như làm một hàm khởi tạo) service Saturday, 09 November 2013 www.qsoftvietnam.com 30
    31. 31. Directives • Là các tuỳ biến gắn vào các DOM (attribute, element name, CSS class…) để HTML compiler của AngularJS có thể thêm vào hoặc biến đổi DOM element. • Các loại directive • • • • E - Element: <my-directive></my-directive> A - Attribute: <div my-directive="exp"></div> C - Class: <div class="my-directive: exp;"></div> M - Comment: <!-- directive: my-directive exp --> Saturday, 09 November 2013 www.qsoftvietnam.com 31
    32. 32. Built-in Directives • • • • • • • • • • • • • ngApp ngBind ngBindHtml ngBindTemplate ngBlur ngChange ngChecked ngClass ngClassEven ngClassOdd ngClick ngCloak ngController Saturday, 09 November 2013 • • • • • • • • • • • • • ngCopy ngCsp ngCut ngDblclick ngDisabled ngFocus ngForm nghide ngHref ngIf ngInclude ngInit ngKeydown www.qsoftvietnam.com • • • • • • • • • • • • • ngKeypress ngKeyup ngList ngModel ngMousedown ngMouseenter ngMouseleave ngMousemove ngMouseover ngMouseup ngNonBindable ngOpen ngPaste • • • • • • • • • • • • ngPluralize ngReadonly ngRepeat ngSelected ngShow ngSrc ngSrcset ngStyle ngSubmit ngSwitch ngTransclude ngValue 32
    33. 33. Ví dụ về directive • http://jsfiddle.net/abhiroop/G3UCK/1/light/ • http://jsfiddle.net/donamkhanh/4YEG6/ Saturday, 09 November 2013 www.qsoftvietnam.com 33
    34. 34. Routing • • • • • Dùng để tạo các app theo kiểu SPA (Single Page Application) ngView thường được dùng để render template $routeProvider service được dùng để cấu hình route $location service dùng cho navigate $routeParams service dùng để nhận các param Saturday, 09 November 2013 www.qsoftvietnam.com 34
    35. 35. Route Events • • • • $routeChangeError $routeChangeStart $routeChangeSuccess $routeUpdate Saturday, 09 November 2013 www.qsoftvietnam.com 35
    36. 36. $location service configuration Để cấu hình $location service, cần sử dụng $locationProvider thiết lập các tham số như sau: • html5Mode(mode): {boolean} • true - see HTML5 mode • false - see Hashbang mode • default: false • hashPrefix(prefix): {string} • prefix used for Hashbang URLs (used in Hashbang mode or in legacy browser in Html5 mode) • default: "" Saturday, 09 November 2013 www.qsoftvietnam.com 36
    37. 37. Example configuration $locationProvider.html5Mode(true); http://example.com/hello-world $locationProvider.html5Mode(true).hashPrefix('!'); http://example.com/!/hello-world $locationProvider.html5Mode(false); http://example.com/#/hello-world $locationProvider.html5Mode(false).hashPrefix('!'); http://example.com/#!/hello-world Saturday, 09 November 2013 www.qsoftvietnam.com 37
    38. 38. $location methods • • • • • • • • • absUrl() hash(hash) host() path(path) port() protocol() replace() search(search, paramValue) url(url, replace) Saturday, 09 November 2013 www.qsoftvietnam.com 38
    39. 39. $location events • $locationChangeStart • $locationChangeSuccess Saturday, 09 November 2013 www.qsoftvietnam.com 39
    40. 40. Services • • • • Services là các phần dùng lại được của business logic Được tạo dưới dạng các singleton object Services là một phần của module Modules là nhóm các chức năng Saturday, 09 November 2013 www.qsoftvietnam.com 40
    41. 41. Các loại services • • • • • Constant Value Factory Service Provider Saturday, 09 November 2013 www.qsoftvietnam.com 41
    42. 42. Constant service • Là một service hữu dụng thường được dùng để cung cấp các cấu hình mặc định trong directive • Sử dụng như hằng số, các giá trị trong constant service sẽ không thể thay đổi được Saturday, 09 November 2013 www.qsoftvietnam.com 42
    43. 43. Value service • Tương tự như consant service, chỉ khác ở chỗ là ta có thể thay đổi được giá trị Saturday, 09 November 2013 www.qsoftvietnam.com 43
    44. 44. Service Factory • Là một service được sử dụng nhiều nhất & cũng là khái niệm dễ hiểu nhất. • Là một service mà có thể trả về bất cứ kiểu dữ liệu nào. Không cần biết làm thế nào để tạo ra đối tượng, bạn chỉ cần quan tâm đến việc trả về cái gì. Saturday, 09 November 2013 www.qsoftvietnam.com 44
    45. 45. Service • Hoạt động gần giống như Factory • Service nhận về một constructor, do đó khi sử dụng lần đầu tiên nó sẽ thực hiên new Foo() để khởi tạo đối tượng Saturday, 09 November 2013 www.qsoftvietnam.com 45
    46. 46. Service Provider • Service provider names bắt đầu bằng tên của service + hậu tố Provider. • app.provider('foo', function() {…}) • app.config(function(fooProvider) {…}) • Một service provider phải có $get function để có thể inject vào các thành phần khác trong ứng dụng Saturday, 09 November 2013 www.qsoftvietnam.com 46
    47. 47. Service Provider Saturday, 09 November 2013 www.qsoftvietnam.com 47
    48. 48. Filters • Định dạng dữ liệu để hiển thị cho user. • Theo tinh thần của UNIX filters và sử dụng các cú pháp tương tự | (pipe) • Built-in filters • • • • • • • • currency date json limitTo lowercase uppercase orderBy number Saturday, 09 November 2013 www.qsoftvietnam.com 48
    49. 49. Form validation • Controls (input, select, textarea) là các cách users nhập data • Form là 1 tập các controls với mục đích nhóm các controls liên quan đến nhau • Form và controls cung cấp các validation services, để users được báo các lỗi liên quan đến nhập dữ liệu • Server-side validation cũng cần thiết để đảm bảo độ an toàn của app. • Sử dụng thuộc tính “novalidate” để tắt chức năng validation mặc định của trình duyệt Saturday, 09 November 2013 www.qsoftvietnam.com 49
    50. 50. Form validation • CSS Classes: • ng-valid: class được add vào element nếu valid • ng-invalid: class được add vào element nếu invalid • ng-pristine: class được add vào element lúc ban đầu, trước khi AngularJS xử lý validation • ng-dirty: class được add vào element khi AngularJS xử lý validation Saturday, 09 November 2013 www.qsoftvietnam.com 50
    51. 51. Form validation • Custom Validation: • Angular cung cấp các xử lý cơ bản cho hầu hết các kiểu input html5: (text, number, url, email, radio, checkbox) kèm directives để validate (required, pattern, minlength, maxlength, min, max) • Có thể tự đưa ra validate riêng bằng cách tự tạo directive để đưa hàm validate của mình vào ngModel controller Saturday, 09 November 2013 www.qsoftvietnam.com 51
    52. 52. Form validation • Validation có thể xuất hiện ở 2 chỗ: • Model to View update: khi model thay đổi, tất cả các hàm trong NgModelController#$formatters array được pipe-lined, để mỗi hàm này có thể format được value và thay đổi trạng thái valid của form control thông qua NgModelController#$setValidity. • View to Model update: tương tự như vậy, khi user tương tác với 1 control, nó gọi NgModelController#$setViewValue. Nó sẽ pipeline tất cả các hàm trong NgModelController#$parsers array, để mỗi hàm này lần lượt convert value và trạng thái thay đổi của form control thông qua NgModelController#$setValidity. Saturday, 09 November 2013 www.qsoftvietnam.com 52
    53. 53. Giới thiệu về Yeoman • Gồm 3 ứng dụng: • Yo • Grunt • Bower • Yeoman không chỉ là tool mà còn được sử dụng như là 1 workflow, tập hợp các "best practices" để giúp cho việc phát triển web dễ dàng hơn Saturday, 09 November 2013 www.qsoftvietnam.com 53
    54. 54. Yeoman features • Lightning-fast scaffolding • Dễ dàng tạo khung cho những dự án mới với các template tuỳ biến được (vd: HTML5 Boilerplate, Bootstrap), AngularJS v.v… • Great build process • Minification and concatenation (thu nhỏ và cố kết ?) • Tối ưu tất cả image files, HTML • Compile CoffeeScript and Compass files • Automatically lint your scripts • Tất cả scripts đều được tự động chạy qua JSHint để đảm bảo nó tuân theo những best-practices. Saturday, 09 November 2013 www.qsoftvietnam.com 54
    55. 55. Yeoman features • Built-in preview server • Tối ưu ảnh cực tốt • Dùng OptiPNG và JPEGTran • Package management cực ngon • Dễ dàng search được packages mới thông qua command-line, cài đặt và update chúng mà không cần mở browser. • PhantomJS Unit Testing • Dễ dàng chạy unit tests trong WebKit thông qua PhantomJS. Saturday, 09 November 2013 www.qsoftvietnam.com 55
    56. 56. Workflow without Yeoman 1. 2. 3. 4. 5. 6. 7. 8. 9. Tìm HTML Boilerplate Download & add vào project Tìm UI Boilerplate Download & add vào project Download project libs, add Copy boilerplate cho models, views, setup Setup test runner Setup build process Viết code! Saturday, 09 November 2013 www.qsoftvietnam.com 56
    57. 57. Yeoman workflow Saturday, 09 November 2013 www.qsoftvietnam.com 57
    58. 58. Yeoman workflow Includes: • HTML5 Boilerplate • Twitter Bootstrap • AngularJS • Karma Testrunner • Scaffolding for Models, Directives, Routes, Views, Values, Constants, Service s, Factories, ... • DI-aware JavaScript minification • CoffeeScript support Saturday, 09 November 2013 www.qsoftvietnam.com 58
    59. 59. Tool để tạo khung, lên khung các app mới, tạo config cho Grunt và đưa vào các task Grunt cần cho build Saturday, 09 November 2013 www.qsoftvietnam.com 59
    60. 60. AngularJS generator Saturday, 09 November 2013 www.qsoftvietnam.com 60
    61. 61. AngularJS generator Available generators: 1. angular (aka angular:app) 2. angular:controller 3. angular:directive 4. angular:filter 5. angular:route 6. angular:service Saturday, 09 November 2013 7. angular:provider 8. angular:factory 9. angular:value 10. angular:constant 11. angular:decorator 12. angular:view www.qsoftvietnam.com 61
    62. 62. • Bower là một công cụ quản lý package và các thành phần phụ thuộc dành cho web. • Được viết bởi Twitter Inc Saturday, 09 November 2013 www.qsoftvietnam.com 62
    63. 63. Bower commands Việc sử dụng Bower chủ yếu thông qua 3 lệnh sau: 1. bower search <package name> 2. bower install <package name> 3. bower uninstall <package name> Saturday, 09 November 2013 www.qsoftvietnam.com 63
    64. 64. Bower components • Hiện tại có khoảng 5435 bower components • http://sindresorhus.com/bower-components Saturday, 09 November 2013 www.qsoftvietnam.com 64
    65. 65. • • • • Grunt là tool tự động hoá cho các dự án phát triển web. Ta có thể minify code, biên dịch, unit test, validate, etc. Có thể tự động hoá rất nhiều thứ để giảm effort của bạn. Mở rộng được. Saturday, 09 November 2013 www.qsoftvietnam.com 65
    66. 66. Grunt tasks (in Yeoman) • clean: xoá build trước đó • copy: copy toàn bộ folder staging (intermediate/) sang (publish/) • css: gộp các file CSS thành 1 file, thay thế @imports và “nén” CSS files • html: tối giản HTML (từ mức đơn giản đến mức tối đa) • img: tối ưu file .png/.jpg qua OptiPNG/JPEGtran • mkdirs: chuẩn bị các thư mục build • rev: tự động rename các file build theo revision • usemin: thay thế các tham chiếu thành scripts / stylesheets chưa giản lược Saturday, 09 November 2013 www.qsoftvietnam.com 66
    67. 67. Case study: User management https://github.com/donamkhanh/sample-user-management Saturday, 09 November 2013 www.qsoftvietnam.com 67
    68. 68. Case study: User management Flow thực hiện bằng jQuery: • Tạo mockup layout • Xây dựng server API • Thao tác với server API • Phải viết khá nhiều code Saturday, 09 November 2013 www.qsoftvietnam.com 68
    69. 69. Case study: User management Flow thực hiện bằng AngularJS: • Static template • Angular templates • XHRs & Dependency injection • Routing & multiple views • REST and custom services Saturday, 09 November 2013 www.qsoftvietnam.com 69
    70. 70. Case study: User management Generate data: www.generatedata.com Saturday, 09 November 2013 www.qsoftvietnam.com 70
    71. 71. Demo • Generate skeleton app • • • • yo angular:route hello yo angular:directive hello yo angular:controller hello yo angular:view hello • Preview application with built-in server • grunt server • Build application • grunt build Saturday, 09 November 2013 www.qsoftvietnam.com 71
    72. 72. Tài liệu tham khảo • • • • • http://angularjs.org http://yeoman.io http://bower.io http://gruntjs.com http://angular-tips.com/blog/2013/08/understanding-servicetypes • http://pivotal.github.io/jasmine • http://karma-runner.github.io/0.10/index.html Saturday, 09 November 2013 www.qsoftvietnam.com 72
    73. 73. THANK YOU FOR YOUR ATTENTION! Saturday, 09 November 2013 www.qsoftvietnam.com 73

    ×