Dịch pro Angular js

About the Author xxiii About the Technical Reviewer xxv ■■Part 1: Getting Ready ■■Chapter 1: Getting Ready ■■Chapter 2: Your First AngularJS App .15 ■■Chapter 3: Putting AngularJS in Context 45 ■■Chapter 4: HTML and Bootstrap CSS Primer 55 ■■Chapter 5: JavaScript Primer 75 ■■Chapter 6: SportsStore: A Real Application 119 ■■Chapter 7: SportsStore: Navigation and Checkout 149 ■■Chapter 8: SportsStore: Orders and Administration 173 ■■Part 2: Working with AngularJS 205 ■■Chapter 9: The Anatomy of an AngularJS App 207 ■■Chapter 10: Using Binding and Template Directives 233 ■■Chapter 11: Using Element and Event Directives 263 ■■Chapter 12: Working with Forms 285 ■■Chapter 13: Using Controllers and Scopes 319 ■■Chapter 14: Using Filters .351 ■■Chapter 15: Creating Custom Directives 381 ■■Chapter 16: Creating Complex Directives 413 ■■Chapter 17: Advanced Directive Features .447 ■■Part 3: AngularJS Services 471 ■■Chapter 18: Working with Modules and Services 473 ■■Chapter 19: Services for Global Objects, Errors, and Expressions 489 ■■Chapter 20: Services for Ajax and Promises 523 ■■Chapter 21: Services for REST .551 ■■Chapter 22: Services for Views .579 ■■Chapter 23: Services for Animation and Touch .603 ■■Chapter 24: Services for Provision and Injection 613 ■■Chapter 25: Unit Testing 623 Index 651 AngularJs apps xây dựng dưa MVC design pattern với mục đích tạo ứng dụng: - Mở rộng: Thật dễ dàng để tìm cách angularjs app phức tạp làm việc bạn nắm vững – điều có nghĩa bạn dễ dàng extend chức cho app Bảo trì: app AngularJs dễ dàng debug fix, điều khiến cho việc bảo trì dễ dàng Testable: AngularJs hỗ trợ tốt cho việc test Chuẩn hóa: AngularJs tích hợp html5,… Các công nghệ cho apps bạn AngularJs thư viện js mã nguồn mở tài trợ trì google Điều kiện tiền đề: Html/css/js I Cấu trúc sách Sách chia làm phần, phần cover vài topics Part1: Chuẩn bị Cung cấp thông tin bạn cần để chuẩn bị cho đọc sách có hiệu Xây dựng ứng dụng AngularJs đơn giản để hiểu tiến trình xây dựng app cụ thể Part2: Làm việc với AngularJs Part xuyên suốt qua đặc điểm AngularJs library, bắt đầu cách xem xét tổng thể khác thành phần apps AngularJs, sau làm việc cụ thể với AngularJs có nhiều chức (hàm) tích hợp sẵn Part3: Phần sách giải thích vai trò thành phần quan trong AngularJs : modules services.Chúng ta tìm cách khác mà bạn tạo thành phần giải thích service mà angularJs cung cấp Những hỗ trợ cho việc đơn giản hóa việc phát triển ứng dụng Single-Page, Ajax RestFul APIs unit testing SinglePage: Với trang web truyền thống, người dùng u cầu trang web, server tính tốn trả trang web cho người dùng toàn trang web dạng mã html Hầu khơng có liên kết yêu cầu gần Do có nhiều yêu cầu diễn làm q trình tính tốn diễn lâu hơn, hệ thống phải tính toán nhiều thành phần trước trả trang web hoàn chỉnh Với SPA lại khác, lần request đầu tiên, hệ thống trả tất code xử lý code hiển thị toàn trang web, yêu cầu client phải requets phần cần, server trả liệu dạng thô, giúp rút ngắn thời gian truyền tải, giúp nâng cao trải nghiệm người dùng Có nhiều ví dụ? Cách tốt để học AngularJs qua ví dụ Và tơi cố để đưa vào nhiều ví dụ Để tối đa hóa số lượng ví dụ sách Tôi thông qua quy ước đơn giản đề tránh liệt kê nội dung tập tin nhiều lần Lần sử dụng file chương, tơi liệt kệ nội dung hồn chỉnh Ví dụ Ở ví dụ vào ví dụ hồn thiện tơi chỉ thành phần thay đổi Và liệt kê cục Bạn nhận thấy việc đặt (…) Ví dụ Bạn bắt đầu với AngularJs với : browser, text editor web server Nên chọn google chrome có extension hỗ trợ cho AngularJs, tên Batarang AngularJS Web server: NodeJs Code Editor: Visual studio code Chạy web server web server đơn giản phải cung cấp môi trường phát triển Và tạo sử dụng module Node.js gọi Connect Từ bên thư mục chạy nodejs , chạy đoạn lệnh sau npm install connect npm node package installer, pull tất file cần thiết cho module Connect Sau đó, tạo file gọi server.js(Vẫn bên folder chạy Node.js) set content với nội dung sau: File đơn giản tạo web server cổng 5000 phục vụ file folder angularjs Tạo folder angularjs level folder với NodeJs Tổng kết: Trong chương này, phác thảo cấu trúc sách phần mềm cần thiết cho việc học AngularJs Như nói trước, cách tốt để học AngularJs thơng qua ví dụ, chap nhẩy thẳng vào ví dụ cho bạn cách làm để tạo ứng dụng AngularJs Chapter Ứng dụng AngularJs Cách tốt để bắt đầu với AngularJs tạo thử web app I Chuẩn bị project Trong chương 1, có test nho nhỏ môi trường phát triển Nếu bạn muốn tiếp tục với ví dụ đảm bảo sẵn sàng Tạo file todo.html folder angularjs Từ bây giờ, mặc định add file vào folder angularjs Có thể download tất ví dụ trang web Apress.com Các ví dụ hoàn thiện tổ chức theo chapter File vừa tạo không sử dụng angularJs: Trong thực tế ko có element script để import AngularJs Giờ todo.html chứa thành phần tĩnh cung cấp khung app Trên đỉnh trang todo-items Hãy xem thử browser Chú ý: Để giữ cho ví dụ chương đơn giản, làm thứ với file todo.html Hiện chưa cần phải quan tâm cấu trúc tổ chức code Chúng ta bắt đầu quan tâm từ chương Sử dụng AngularJs HTML tĩnh file todo.html hoạt động giống placeholder cho chức mà tơi muốn tạo User nhìn thấy list todo-item, checkoff item hồn thành tạo item Trong chương này, add AngularJs vào sử dụng vài đặc điểm AngularJs để làm sống lại chương trình todo Để đơn giản giả sử có người dùng I Add AngularJs vào html file Thật dàng để add AngularJs vào html file Đơn giản cần add script element để import angular.js file, tạo AngularJs module áp dụng thuộc tính tới thành phần html Xem sau: AngularJs apps tạo thành từ nhiều modules Modules tạo việc gọi method angular.module, giống sau đây: var todoApp = angular.module("todoApp", []); Tôi mô tả module nhiều chương 18, bạn nhìn thấy tơi làm để tạo áp dụng module vào ví dụ 2-2 Đối số method angular.module tên module tạo dãy module cần thiết khác [] thể ko cần module khác Chú ý: lỗi phổ biến bỏ sót tham số thứ 2(tham số dependencies) Bạn phải cung cấp tham số phụ thuộc, khơng có dependencies để empty array Tơi giải thích việc dùng dependencies chapter 18 Tơi nói AngularJs làm để dự dụng module thông qua ng-app atribute AngularJs làm việc theo cách extend html việc thêm vào dó thành phần mới, thuộc tính mới, classes Thư viện AngularJs tự động biên dịch html tài liệu theo Bạn bổ sung vào chức tích hợp săn với js để tùy chỉnh hành vi app Chú y AngularJs biên dịch ko giống với C# Java Ở đơn giản modify html load lại trình duyệt Điều quan trọng thêm vào HTML thuộc tính ng-app , thành phần html liệt kê danh sách có chưa module cần phải compile xử lý AngularJs Khi AngularJs js framework sử dụng, cú pháp ap dụng thuộc tính ng-app tới tất thành phần html Nếu bạn sử dụng thêm jQuery, bạn làm hẹp lại cách sử dụng ng-app cho thành phần cần thiết II Creating a data model AngularJs hỗ trợ MVC pattern, mô tả chap cách ngắn gọn, MVC pattern yêu cầu bạn chia app thành phần khác nhau: Data app(model), logic xử lý data(controller), logic hiển thị data(views) Data app to-do phân phối qua html elements Tên user Ở vòng lặp items Tơi làm đơn giản hóa Model chứa logic yêu cầu tạo, load, lưu trữ modify data object Trong app AngularJs , logic thường server access web server Chương chi tiết điều Tôi định nghĩa đối tượng js gọi model với thuộc tính tương ứng với data thể html phần trước thuộc tính user định nghĩa tên user, thuộc tính items định nghĩa mảng đối tượng mô tả todo-items Thường định nghĩa model bạn định nghĩa phần khác MVC pattern Tuy nhiên ví dụ ko cần thiết Chú ý: Trong project AngularJs nào, ln có giai đoạn mà bạn cần phải định nghĩa phần MVC đắp chúng lại với III Tạo controller Controller định nghĩa business logic để hỗ trợ view, Mặc dù thuật ngữ business logic khơng hữu ích Logic đề cập đến việc lưu trữ lấy data phần model Logic đề cập đến việc định dạng liệu để hiển thị với người dùng Controller nằm model view connect chúng Controller nằm model view connect chúng Controller phản hồi lại tưởng tác người dùng, update liệu model cấp cho view data mà yêu cầu Đừng quan tâm nhiều đến vào lúc Controller tạo việc gọi method controller obj Module trả xử lý angular.module, làm sáng tỏ phần chương sau Đối số method Controller tên controller function gọi để định nghĩa chức controller Nó làm đoạn sau: 10 23 Tôi thêm vào behavior gọi addNewItem để nhận text todo-item thêm vào đối tượng , sử dụng text value action property setting done property false, giống sau: Đây behavior mà cho bạn cách để chỉnh sửa model, dự án thực tế có nhiều hành vi thực chỉnh sửa data model Chú ý behaviors định nghĩa giống js function với điều tơi update model sử dụng phương thức push js hỗ trợ cho arrays 24 Sự kì diệu ví dụ đến từ việc sử dụng directive, ví dụ Đây đầu tiên: Đây directive mà sử dụng setup check boxes, bạn thường xuyên gặp phải làm việc với form elements Điểm cần ý tên thuộc tính directive để update model lại phần model, tức actionText tên xa lạ so với model data Ng-model directive tự động tao property cho bên phạm vi controller , tác động tạo properies động model để xử lý userInput Tôi sử dụng dynamic property directive thứ ví dụ mà tơi thêm vào: Ng-click directive thiết lập xử lý để đánh giá expression click event is triggered Trong trường hợp này, expression gọi behavior addNewItem, truyền property dynamic actionText đối số Điều giúp cho thêm vào item mà người dùng nhập vào Filtering and Ordering Model Data Trong chap 14, I mơ tả tính AngularJs filter rõ ràng Nó cung cấp cahcs đẻ chuẩn bị data model dùng cho việc hiển thị mà ko cần phải tạo behaviors Khơng có sai việc sử dụng behaviors, filter tốt hơn(Cứ tạm biết đã) 25 Filter áp dụng cho phần data model bạn thấy sử dụng lọc để điều khiển data sử dụng ng-repeat directive để phần bổ tới thành phần table list todo-items Tôi sử dụng loại filter Filter filter(1 tên vô danh) orderBy fileter - Filter filter lấy đối tượng dưa tiêu chuẩn cấu hình Tơi dã áp dụng để lấy item mà chưa hồn thành, item hồn thành không Filter orderBy xếp data items tơi sử dụng để sort theo value action property Tơi giải thích filter cụ thể chap 14, bạn nhìn thấy tác động tơi tạo file todo.html, nhìn 2-9 Tip: Chú ý sử dụng orderBy filter, tơi thuộc tính mà tơi muốn sử dụng để xếp cách đặt ‘’ ký tự quote Khi bạn thêm vào item mới, insert vào list danh sách dựa theo thứ tự alphabetical bạn check vào box item bị ẩn (Data model không sort; chức sort xử lý ng-repeat directive xử lý để tạo hàng cho bảng) Improving the Filter Ví dụ trước làm sang tỏ cách filter làm việc, kết khà vơ dụng task check bị ẩn mãi với người dùng Rất may tạo lọc khác, 2-11 sau 26 Method filter định nghĩa obj module AngularJs xử dụng để tạo filter factory, trả hàm sử dụng để lọc tập data obj Đừng lo lắng factory thời điểm này; Chỉ cần biết using filter method yều cầu truyền vào hàm trả filtered data Tên mà cung cấp cho filter checkedItems, chức làm cơng việc filter thực có tham số: Đối số items cung cấp AngularJs tập đối tượng filtered Tôi cung cấp giá trị cho đối số showComplete áp dụng filter, sử dụng để biết task hoàn tất inclue vào filter data Bạn nhìn thấy cách mà tơi sử dụng custom filter 2-12 27 Tôi thêm vào check box sử dụng ng-model directive để set model value gọi showComplete, truyền tới custom filter thơng tha ng-repeat directive bảng: Cú pháp custom filters giống filter built-in support Tôi nên filter mà tạo method filter, theo sau dấu :, theo sau tên model property mà muốn truyền tới filter function Tôi showComplete model property, điều có nghĩa trạng thái check box dùng để điều khiển ẩn checked items Bạn nhìn thấy 2-10 28 Getting the Data via Ajax Lần thay đổi cuối thực lấy data giống JSON data thông qua Ajax request.(Tôi mô tả JSON chương bạn chưa biết nó) Tơi tạo tập tin gọi todo.json AngularJs folder, bạn nhìn thấy 2-13 Giống bạn nhìn thấy, JSON data định dạng giống cách mà obj js khai báo, lí khiển JSON định dạnh vượt trội web apps Trong 2-14 bạn nhìn thấy thay đổi tơi làm với todo.html để load data từ file todo.json hay việc khai báo mảng cục 29 30 I xóa arrays items add thêm vào lời gọi run method định nghĩa AngularJs module obj Method run nhận function executed AngularJs, pháp pháp chạy hàm sử dụng để viết hàm thực thi chỗ Tôi đối số $http function mà tơi truyền vào phương thức run, nói với AngularJs muốn sử dụng object service cung cấp để tạo Ajax calls Sử dụng đối số để nói với AngularJs đặc điểm bạn yều cầu phần phương pháp tiếng có tên dependency injection, mơ tả chương Service $http cung cấp quyền truy nhâp vào low-level Ajax request Tôi sử dụng $ http.get để tạo yều cầu HTTP get tới máy chủ Kết từ phương thức get promise, đối tượng đại diện cho công việc hồn thiện tương lại Tơi giải thích cách promise làm việc chương sau vào chi tiết chương 20, chương cần biêt gọi method success promise objct cho phép function gọi Ajax request đến server xong JSON lấy từ server truyền obj Js pass vào function success giống đối số data Tơi nhận data sử dụng để update model 31 Bạn không nhận khác biết khơng sử dụng F12 đế thấy có request thứ Thực tế tơi phải check trình duyệt để chứng minh Ajax dược sử dụng để làm sáng tỏ AngularJs dễ sàng làm việc với file data ntn Đấy chủ đề tơi nói sau, cần biết AngularJs hỗ trợ nhiều tính cho việc tạo ứng dụng web phức tạp Tổng kết Trong chương này, giới thiệu cho bạn cách tạo ứng dụng AngularJs đơn giản Chuyển từ HTML mock-up sang tới dynamic app triển khai theo MVC pattern Trong lúc xây dựng chạm đến nhứng thành phần AngularJs , thành phần cung cấp cho nhà phát triển cho bạn phần để tìm hiểu Bạn thấy AngularJs hay Bây lúc tìm hiểu chi tiết Bắt đầu với MVC pattern trình bày chương sau V Chương 3: Putting AngularJS in Context(Đưa AngularJs vào bối cảnh thực tế) AngularJs làm việc cách cho phép bạn extend HTML, ý tưởng kì quoặc bạn quen với app AngularJs thực tế HTMl doc pha trộn thẻ chuẩn thẻ extend MVC có vơ số biển thể nhiên tơi trình bày MVC chuẩn Understanding Where AngularJS Excels Nên dùng AngularJs nào? AngularJs ko phải giải pháp cho vấn đề, điều quan trọng cần phải biết sử dụng AngularJs cần tìm giải pháp để thay AngularJs cung cấp chức mà thường có server-side Điều có nghĩa AngularJs cần làm nhiều việc lần HTML doc chứa AngularJs load HTML element cần phải compiled, data binding cần phải 32 đánh giá, directive cần phải executed cần phải xây dựng sp cho tính mà tơi mơ tả Trong chương làm điều Loại công việc cần thời gian để thực hiện, khoảng thời gian phụ thuộc vào phức tạp tài liệu HTML, mã js liên quan chất lượng browser Cần phải suy nghĩ loại app web mà bạn xây dựng Theo thuật ngữ có loại web-app: Round-trip single-page Understanding Round-Trip and Single-Page Applications ? Angular jQuery Understanding the MVC Pattern Thuật ngữ Model-View-Controller sử dụng từ cuối thập kỷ 70 xuất phát từ dự án Smalltalk Xerox Parc, nơi mà hình thành với mục đích tổ chức số ứng dụng GUI Chìa khóa để áp dụng mơ hình MVC thực chia khối xử lý hiển thị Trong việc phát triển web phía client, điều có nghãi chia data, logic xử lý data thành phần HTML sử dụng data phần khác Điều tạo ứng dụng clinet-side dễ phát triển, bảo trì, test khối xây dựng model, controller , view Trong hình 3-2 bạn xem mơ hình MVC truyền thống dùng cho việc phát triển phía server Đây hình ảnh lấy từ sách ASP pro Framwork, mơ tả cách server-side triển khai MVC pattern Bạn thấy model lấy lên từ db mục tiêu app phục vụ HTTP request Đây cốt lỗi web round-trip(Như mơ tả trước đó) Dĩ nhiên, AngularJs nằm browser, điều dẫn đến méo mó MVC, hình 3-3 làm sáng tỏ điều Đây triển khai mơ hình MVC phía client-side Model nhận data từ thành phần phía serverside(Thường thơng qua Restful web service, mô tả chương 5) Mục địch controller view xử lý data model, sau dựa vào data để thao tác với DOM giống việc tạo quản lý thành phần HTML mà user tương tác Những tương tác người dùng đưa trở lại điều khiển 33 Sử dụng MVC framework giống AngularJs nghĩa bạn khơng cần sử dụng serverside MVC Framework, bạn thấy AngularJs tồn xử lý phức tạp mà trước tồn server Đây điều tốt bới thay xử lý server với khả kém, đẩy lên client thực phục vụ request khác Understanding Models Models, chữ M MVC – chứa data mà người dùng làm việc Có loại model phổ biến: view models: đại diện data truyền từ controller tới view Domain models: Chưa data lĩnh vực kinh doanh, với hoạt động, chuyển đổi, quy tắc cho việc tạo, lưu trữ điều chỉnh data Gọi chung model logic Rất nhiều dev phát triển mơ hình MVC bị nhầm lẫn với ý tưởng gộp logic vào data model, tin mục đích MVC pattern tách data khỏi logic Đây nhầm lẫn Mục tiêu MVC framework chịa ứng dụng thành phần, phần chưa logic data Mục tiêu có khơng phải loại bỏ logic từ model Thay vào đó, đảm bảo model chưa logic cho việc tạo quản lý model data Với thành phần MVC pattern, tơi mơ tả điều nên khơng nên bao gồm Model ứng dụng tích hợp MVC pattern nên: - Chứa domain data Chưa logic tạo, quản lý chỉnh sửa domain data(Ngay điều thực từ xa thông qua web service) Cung cấp API gọn gàng để cung cấp thao tác Model khơng nên: - Trình bày chi tiết cách model data lưu trữ quản lý(Nói theo cách khác, chi tiết chế lưu trữ liệu remote service không nên để lộ với controller view ) Chưa logic biến đổi model dựa tương tác user(Bởi công việc controller) Chứa logic hiển thị data với user(Bởi cơng việc view) Lợi ích việc đảm bảo model tách biệt với controller view bạn test logic cách dễ dàng Duy trì dễ dàng, extend dễ dàng Các model domain tốt chưa logic dùng cho việc lấy lưu trữ data cho tạo, đọc, update, delete Điều có nghĩa model chứa trực tiếp logic, thường model chưa logic gọi RESTful web service để gọi thao tác tới server side(Chương giải thích điều này) Understanding Controllers Controller mô liên kết ứng dụng AngularJs , hoạt động giống ống dẫn dữa data model view Controller add logic business domain vào scopes, tập model controller xây dựng cách sử dụng MVC nên: - Chứa logic cần thiết để koiwr tạo the scope Chứa logic/behaviors yêu cầu view để trình bày liệu từ the scope Chứa logic/hành vi cần thiết để update scope dựa tương tác user controller không nên - Chứa logic điều khiển DOM(Đó việc view) Chứa logic quản lí tính bền bỉ liệu(Đó cơng việc model ) 34 - Thao tác với data bên the scope Từ danh sách này, nói scopes có tác động lớn đến cách mà controller định nghĩa sử dụng Điều mô tả chi tiết chương 13 Understanding View Data Domain model không nguyên data AngularJs app Controller tạo view data(còn gọi với tên view model data view model ) để đơn giản hóa việc định nghĩa view Bạn thấy vài ví dụ view data chương 2, sử dụng ng-model directive để lấy text nhập người dùng View data thường tạo truy nhập thông qua scope controller , điều mô tả chap 13 Understanding Views AngularJs views xác định cách sử dụng phần từ HTML tăng lên khởi tạo HTML dựa vào việc sử dụng chế data binding directive Các AngularJs directive làm cho view linh hoạt chúng biến đổi phần tử HTML thành trang web động Tơi giải thích chi tiết data binding chap 10 mô tả cách sử dụng directive tích hợp sẵn hay cách tạo directive View nên: - Chứa logic đánh dấu cần thiết để trình bày liệu với người dùng View không nên: - Chứa xử lý phức tạp(Tốt nên đặt controller )\ Chứa logic tạo, lưu trữ, thao tác với domain model View có thê chứa logic, nên logic đơn giản sử dụng Đặt thứ vào view làm cho ứng dụng khó kiểm sốt Understanding RESTful Services Như tơi giải thích chương trước, logic cho domain model AngularJs app thường chia thành client server Server thường chứa logic lưu trữ, logic quản lý Trong trường hợp ứng dụng có db, ó bao gồm yều cầu mở kết nối tới database server, thực thi câu lệnh query xử lý kết để chúng gửi đến client We không muốn code client lại truy nhập trực tiếp vào nơi lưu trữ liệu- Việc tạo liên kết chặt client kho liệu -> Phức tạp việc test Bằng cách sử dụng server để làm trung gian truy nhập kho liệu, ngăn ngừa mối liên kết Logic client chịu trách nhiệm cho việc get data từ server, ko cần quan tâm xem data từ đâu đến Có nhiều cách để truyền liệu máy khách máy chủ Một cách phổ biến sử dụng Ajax để gọi server side, máy chủ gửi lại json(Đây cách mà chương làm để lấy data từ server, yều cầu url trả cho tơi json) Đừng sợ ko biết JSON, tơi nói Chap Cách tiếp cận hoạt động tốt tảng Restful web services, sử dụng chất request HTTP để tạo, đọc, update, delete data(CRUD) Trong RESTful web service, chức yêu cầu thể thông qua kết hợp HTTP method URL, ví dụ với URL sau: http://myserver.mydomain.com/people/bob 35 Khơng có tiêu chuẩn cho dịch vụ web RESTful, ý tưởng để URL tự giải thích Trong trường hợp này, rõ ràng có collection đối tượng people colletion có định danh Bob Khơng phải lúc bạn tạo URL dễ hiểu vậy, nhiên cố gắng giữ cho thứ thật đơn giản dễ hiểu URL obj data mà muốn thao tác, HTTP method loại thao tác mà muốn thực thi, xem mô tả kĩ hình sau: Bạn khơng cần phải sử dụng phương thức HTTP để thực thao tác mà mô tả bảng Một biến thể phổ biến method Post thường sử dụng để phục vụ cho việc update create, nghĩa phương thức put không sử dụng Tôi mô tả hỗ trợ mà AngularJs cung cấp với ajax chap 20 cách làm việc dễ dàng với RESTful services chap 21 IDEMPOTENT HTTP METHODS Bạn thực ánh xạ phương thức HTTP hoạt động kho liệu, khuyên bạn nên gắn bó chặt chẽ với quy ước mà tơi mơ tả bảng Nếu bạn bỏ qua cách tiếp cận thơng thường, bạn cần phải đảm bảo tơn trọng bảng chất phương thức HTTP Phương thức GET nullipotent, có nghĩa hoạt động bạn thực với phương pháp nên lấy data khơng chỉnh sửa Browser(Hoặc thiết bị nào, chẳng hạn proxy) hy vọng lặp lại GET request mà không làm thay đổi trạng thái máy chủ Các method PUT DELETE idempotent, có nghĩa nhiều yêu cầu giống hệt nên có chung kết giống thực single request Ví dụ, sử dụng phương thức DELETE với url: /people/bob nên xóa đối tượng Bob từ tập people lần request sau khơng làm với request phía sau(Dĩ nhiên, điều ko có client khác tạo đối tượng Bob) Phương thức POST nullipotenet idempotent Nếu ko có đối tượng Bob, sử dụng POST tạo cái, requst post sau với URL update đối tượng vừa tạo Tất điều quan trọng bạn triển khai Restful web service riêng Common Design Pitfalls số sai lầm phổ biến thiết kế Putting the Logic in the Wrong Place Vấn đề phổ biến đưa logic vào sai thành phần - Đưa business logic vào view, controller 36 - Đưa domain logic vào controller model Đặt logic data store client model sử dụng RESTful service Đây vấn đề lộ bước vào lúc trì phát triển Để biết logic nên đặt đâu cần phải có số kinh nghiệm, bạn phát vấn đề sớm bạn sử dụng unit testing Sẽ trình bày chap 25 Sau số rule cần nhớ: - View logic nên chuẩn bị data để hiển thị không modify model Controller logic không nên trực tiếp tạo, update, delete data bên model Client không truy nhập trực tiếp vào kho liệu Nhớ giữ vấn đề đầu Adopting the Data Store Data Format Trong thiết kế app AngularJs tốt, việc lấy data từ REST service, cơng việc server che giấu chi tiết liệu hiển thị với client data định dạng thích hợp Quyết định xem client cần bạn format data store, data store(database) khơng support việc format, cơng việc server, phải làm cơng việc format Tổng kết Trong chương này, cung cấp số ngữ cảnh AngularJs Tôi mô tả loại dự án mà nên khơng nên áp dụng Tơi giải tích AngularJs hỗ trợ MVC pattern Tôi qua vài đặc điểm RESTful Kết chương đưa vài vấn đề thiết kế Trong chương kế, cấp nhanh kiến thức HTML BootStrap Css mà sử dụng làm ví dụ suốt sách VI HTML and Bootstrap CSS Primer VII VIII IX 37 ... học AngularJs Như nói trước, cách tốt để học AngularJs thơng qua ví dụ, chap nhẩy thẳng vào ví dụ cho bạn cách làm để tạo ứng dụng AngularJs Chapter Ứng dụng AngularJs Cách tốt để bắt đầu với AngularJs... app AngularJs dễ dàng debug fix, điều khiến cho việc bảo trì dễ dàng Testable: AngularJs hỗ trợ tốt cho việc test Chuẩn hóa: AngularJs tích hợp html5,… Các cơng nghệ cho apps bạn AngularJs thư... (…) Ví dụ Bạn bắt đầu với AngularJs với : browser, text editor web server Nên chọn google chrome có extension hỗ trợ cho AngularJs, tên Batarang AngularJS Web server: NodeJs Code Editor: Visual