angularJS tiếng việt ạ- lập trình

Ngôn ng ữ l ậ p trình web JavaScript

L ị ch s ử phát tri ể n

- Đ ợc phát triển b i Brendan Eich tại Hãng truỳn thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript

JavaScript được giới thiệu lần đầu tiên trong trình duyệt Netscape phiên bản 2.0b3 vào tháng 12 năm 1995 Sau đó, ngôn ngữ lập trình này cũng được tích hợp vào trình duyệt Internet Explorer bắt đầu từ phiên bản 3.0, phát hành vào tháng 8 năm 1996.

Javascript có th ể làm đ ợ c nh ữ ng gì?

CH NG I: T Ổ NG QUAN V ANGULAR JS FRAMEWORK 1.1 Ngôn ngữ lập trình web JavaScript

- Đ ợc phát triển b i Brendan Eich tại Hãng truỳn thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript

JavaScript được giới thiệu lần đầu tiên trong trình duyệt Netscape phiên bản 2.0b3 vào tháng 12 năm 1995 Sau đó, ngôn ngữ này cũng được tích hợp vào trình duyệt Internet Explorer bắt đầu từ phiên bản 3.0, phát hành vào tháng 8 năm 1996.

JavaScript là một ngôn ngữ lập trình kịch bản dựa trên đối tượng, phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được sử dụng rộng rãi cho các trang web và cũng có khả năng tạo ra các script sử dụng các đối tượng có sẵn trong ứng dụng.

1.1.3 Javascript có thểlƠm đ c những gì?

Nhiều trang web hiện nay sử dụng JavaScript để tạo ra thiết kế động và hiệu ứng hình ảnh thông qua DOM JavaScript cho phép thực hiện các tác vụ mà HTML đơn thuần không thể làm được, như kiểm tra thông tin nhập vào và tự động thay đổi hình ảnh.

JavaScript có thể được sử dụng bên ngoài trình duyệt, chẳng hạn như trong tập tin PDF của Adobe Acrobat và Adobe Reader Ngoài ra, hệ điều hành Mac OS X phiên bản 10.4 cũng áp dụng JavaScript trong việc điều khiển Dashboard.

T̉ng quan v̀ AngularJs framework

L ị ch s ử phát tri ể n

AngularJS được khởi xướng vào năm 2009 bởi lập trình viên Misko Hevery tại Google trong khuôn khổ dự án Google Feedback Nhờ AngularJS, Misko đã giảm số dòng mã front-end từ 17.000 xuống chỉ còn khoảng 1.500, thể hiện sự hiệu quả vượt trội của framework này Thành công này đã dẫn đến quyết định tiếp tục phát triển của đội ngũ dự án Google Feedback.

Nguyễn Minh Sang 2 đang phát triển AngularJS theo hướng mã nguồn mở Theo dữ liệu từ Github, dự án AngularJS hiện thu hút gần 11,000 người theo dõi và đã có hơn 2,000 lượt fork.

Công nghệ HTML đã hỗ trợ tốt cho các trang web tĩnh từ trước năm 2000 Khi xây dựng một trang web với PHP, Node/Express, hay Ruby, nó vẫn chỉ là một trang tĩnh với nội dung thay đổi khi gửi yêu cầu đến máy chủ, và máy chủ sẽ render trang với nội dung tương ứng Tuy nhiên, sự phát triển của HTML5 đã mang lại nhiều thay đổi đáng kể, đặc biệt với sự ủng hộ từ các ông lớn như Google, Yahoo, Facebook, cùng với sự tham gia đông đảo của cộng đồng mã nguồn mở.

Douglas Crockford, nổi tiếng với JSON và JSLint, đã sử dụng sự chênh lệch và độ dày giữa hai cuốn sách "JavaScript: The Definitive Guide" và "JavaScript: The Good Parts" để châm biếm một cách hài hước về JavaScript.

Sự thành công của jQuery đã giúp JavaScript trở nên phổ biến nhờ vào tính đơn giản và dễ sử dụng Mặc dù việc phát triển website sử dụng AJAX với jQuery thông qua $.ajax không khó, nhưng để xây dựng một phần mềm có khả năng mở rộng, dễ kiểm thử, nâng cấp và bảo trì lại là một thách thức Bởi vì JavaScript không được thiết kế từ đầu để thực hiện những nhiệm vụ này, các framework như Sencha, Ember, Knockout, Backbone và AngularJS đã ra đời nhằm hỗ trợ lập trình viên trong việc phát triển ứng dụng web một cách có hệ thống.

Angular JS là gì?

Angular là một framework JavaScript mạnh mẽ, giúp mở rộng HTML cho các ứng dụng web và giảm bớt quy trình phát triển Trước đây, HTML chủ yếu được sử dụng để xây dựng các trang web tĩnh, nhưng giờ đây, Angular cho phép tạo ra các ứng dụng web động Nếu HTML được thiết kế để phát triển các ứng dụng web, thì Angular chính là sự tiến hóa của nó Mặc dù có thể ban đầu khó hiểu, nhưng khi bạn làm quen với Angular, bạn sẽ ngạc nhiên về những khả năng mà nó mang lại.

Trong Angular, có hai cách liên kết dữ liệu cho phép thay đổi giá trị thuộc tính của đối tượng và tự động cập nhật giao diện người dùng ngay lập tức Ví dụ, khi thay đổi giá trị của thuộc tính "Page.Title", giao diện sẽ tự động hiển thị giá trị mới Ngược lại, nếu người dùng nhập dữ liệu vào giao diện, thuộc tính của đối tượng cũng sẽ được cập nhật Tất cả quá trình này được Angular xử lý, giúp đơn giản hóa việc lập trình so với các framework JavaScript khác Chúng ta chỉ cần xác định model, và khi model thay đổi, sự thay đổi sẽ được phản ánh ở bất kỳ đâu trong ứng dụng Model trong Angular là cấu trúc JavaScript đơn giản nhưng rất hữu ích.

Tính năng mới của Angular, đặc biệt là các chỉ thị, tạo ra sự khác biệt lớn so với các framework JavaScript khác Chỉ thị cho phép mở rộng ngữ nghĩa của HTML, giúp trình duyệt hiểu và thực hiện các tác vụ mới Mặc dù HTML5 có nhiều thẻ, nhưng nó không đủ mạnh để xây dựng giao diện web hấp dẫn Với các chỉ thị trong Angular, chúng ta có thể tạo ra từ vựng HTML mới, như thẻ để thực hiện các chức năng kéo thả, mang lại trải nghiệm người dùng tốt hơn.

Nguyễn Minh Sang 4 trong tag draggable sẽ trở thành draggable trong trình duyệt, và chỉ cần định nghĩa hướng dẫn draggable trong ứng dụng Angular của chúng ta là hoàn tất Đây là một ví dụ đơn giản của Angular, nhưng nó có thể thực hiện nhiều tính năng hữu ích hơn Nó không chỉ giới hạn ở một phần tử HTML mà còn có thể áp dụng các thuộc tính, lớp hoặc chú thích HTML Directives trong Angular khác với directives tạo bởi HTML vì chúng có thể thực hiện nhiều hành vi động hơn.

- Nhìu framework cần có template nh ng Angular template lại chỉ là html

Dependency injection giúp phát triển ứng dụng Angular dễ dàng hơn bằng cách tổ chức mã thành các module, cho phép tạo ra các thành phần tái sử dụng và gọi chúng khi cần Điều này đặc biệt hữu ích cho các ứng dụng lớn, cần mở rộng, bảo trì và kiểm soát dễ dàng Nó là một phương pháp ghép nối mã, yêu cầu phân chia mã theo các chức năng riêng biệt như service, controller, hoặc provider mà không giới hạn chúng.

- Kiến trúc MVC, Two-way binding, Dynamic templates, Expressions, Modules, Scopes, Dependency injection, Directives, Routing, Services, Filters, Form validation, Testing in mind

Mô hình MVC (Model - View - Controller) là một kiến trúc phần mềm quan trọng trong phát triển ứng dụng Nó cho phép các lập trình viên phân tách ứng dụng thành ba thành phần độc lập: Model, View và Controller Mỗi thành phần đảm nhận một nhiệm vụ riêng biệt, giúp cải thiện tính tổ chức và khả năng bảo trì của mã nguồn.

- Mô h̀nh MVC đ ợc giới thiệu từ những năm 70 nh ṃt phần c a Smalltalk, nh ng đối với ǹn t̉ng web, thì nó mới đ ợc thịnh hành gần đây.

- Ý t ng đằng sau MVC l̀ để chia rõ 3 thành phần chính là model(xử lý, truy xuất database), view(giao diện), và controller(đìu h ớng yêu cầu từng i dùng)

MVC thể hiện tính chuyên nghiệp trong lập trình và phân tích thiết kế, nhờ vào việc chia thành các thành phần độc lập Điều này giúp phát triển ứng dụng nhanh chóng, đơn giản và dễ dàng nâng cấp, bảo trì Trong Angular, View tương ứng với DOM, Controller là các lớp JavaScript, và Model là dữ liệu được lưu trữ trong các thuộc tính của các đối tượng trong JavaScript.

Sau khi chứng kiến nhiều tranh luận về MV*, một tác giả của Angular đã tuyên bố rằng AngularJS là một framework MVW (Model – View – Whatever), trong đó "Whatever" được hiểu là bất cứ thứ gì phù hợp với nhu cầu của bạn.

A single page application, also known as a single page interface, is a web app or website that fits seamlessly on a single webpage, providing users with an experience similar to using a desktop application.

- L̀ ́ng ḍng chạy bên trong tr̀nh duyệt, không yêu cầu ph̉i t̉i lại tòn ḅ trang web mỗi lần sử ḍng.

Đặc tr ng

- Kiến trúc MVC, Two-way binding, Dynamic templates, Expressions, Modules, Scopes, Dependency injection, Directives, Routing, Services, Filters, Form validation, Testing in mind.

Mô hình MVC

Mô hình MVC (Model - View - Controller) là một kiến trúc phần mềm quan trọng trong kỹ thuật phát triển phần mềm, cho phép các lập trình viên phân chia ứng dụng thành ba thành phần độc lập: Model, View và Controller Mỗi thành phần đảm nhận một nhiệm vụ riêng biệt, giúp tăng cường khả năng quản lý và bảo trì mã nguồn.

- Mô h̀nh MVC đ ợc giới thiệu từ những năm 70 nh ṃt phần c a Smalltalk, nh ng đối với ǹn t̉ng web, thì nó mới đ ợc thịnh hành gần đây.

- Ý t ng đằng sau MVC l̀ để chia rõ 3 thành phần chính là model(xử lý, truy xuất database), view(giao diện), và controller(đìu h ớng yêu cầu từng i dùng)

MVC thể hiện tính chuyên nghiệp trong lập trình và phân tích thiết kế, nhờ vào việc chia thành các thành phần độc lập, giúp phát triển ứng dụng nhanh chóng, đơn giản và dễ dàng nâng cấp, bảo trì Trong Angular, View đại diện cho DOM, Controller là các lớp JavaScript, và Model là dữ liệu được lưu trữ trong các thuộc tính của các đối tượng trong JavaScript.

Sau khi chứng kiến nhiều tranh luận về MV*, một tác giả của Angular đã tuyên bố rằng AngularJS là một framework MVW (Model – View – Whatever), trong đó "Whatever" có nghĩa là bất kỳ phương pháp nào phù hợp với bạn.

SPA – Single Page Application

A single page application (SPA), also known as a single page interface, is a web app or website designed to fit seamlessly on a single webpage, providing users with an experience akin to using a desktop application.

- L̀ ́ng ḍng chạy bên trong tr̀nh duyệt, không yêu cầu ph̉i t̉i lại tòn ḅ trang web mỗi lần sử ḍng.

T i sao ph i s ử d ng AngularJs?

Angular được phát triển bởi Google, điều này rất quan trọng vì Google có kinh nghiệm sâu sắc trong việc phát triển các ứng dụng web và hiểu rõ những tinh tế của trang web Sự phát triển của Angular mang đến cho người dùng sự tin cậy và tính hiệu quả Nếu bạn đã sử dụng các sản phẩm của Google như Gmail hay Google Plus, bạn sẽ nhận thấy sự tương tác mượt mà của chúng, nhờ vào công nghệ AJAX cho phép gửi dữ liệu mà không cần làm mới toàn bộ trang Để sử dụng Angular, kiến thức cơ bản về JavaScript là điều cần thiết.

AngularJs đ c l ập trình nh th nào?

Ví ḍ đơn gỉn

Trong dấu ngoặc nḥn có thể ch́a biến v̀ các biểu th́c toán ḥc.

1 + 2 = {{ 1 + 2 }}

Ćc thƠnh ph̀n c̉a A ngularJs

Angular Template

Trong quá trình xây dựng hệ thống, file HTML có thể trở nên phức tạp Để giải quyết vấn đề này, chúng ta có thể chia nhỏ thành nhiều phần khác nhau AngularJS cung cấp một giải pháp hữu ích cho vấn đề này thông qua việc sử dụng template.

Template Angular là một định dạng khai báo, kết hợp với thông tin từ Model và Controller để tạo ra View được hiển thị trên trình duyệt Nó bao gồm DOM tĩnh, chứa HTML, CSS và các thành phần cũng như thuộc tính riêng của Angular Các thành phần và thuộc tính này giúp Angular thêm hành vi và chuyển đổi template DOM thành view DOM động.

- Nói 1 cách đơn gỉn nhất th̀ template trong AngularJS l̀ “HTML voi81 additional markup”.

Trong Angular, chúng ta có 2 cách để tạo ṃt template

Chúng ta có thể dùng thêm ṃt file html bên ngòi để làm template cho file chính, ví ḍ: message.html

Chúng ta có thể tích hợp thẳng template v̀o file hiện h̀nh thông qua thẻ script với type l̀ text/ng-template

Trong AngularJS, có hai phương pháp phổ biến để sử dụng template là ng-include và ngRoute Các phương pháp này giúp tối ưu hóa việc quản lý và hiển thị nội dung trong ứng dụng.

var app = angular.module('ExampleModule', []); app.controller('ExampleCtrl', function($scope) { $scope.template_name = 'message.html';

Modules

Trong thực tế, việc phân chia nội dung thành các thành phần khác nhau là rất quan trọng Dưới đây là những lợi ích của việc chia nhỏ nội dung:

 Dễd̀ng hơn cho việc qủn lý và khai báo ́ng ḍng cũng nh kiểm tra lại sau này

 Kh̉năng tái sử ḍng cũng nh tận ḍng các 3rd modules

 Nạp từng phần ́ng ḍng sẽnhanh hơn l̀ bục ph̉i nạp toàn ḅ ́ng ḍng vào rồi mới chạy

Trong AngularJS, module đ ợc hỗ trợ trong khai báo ng-app bên cạnh khai báo nó trong mã nguồn script, d ới đây l̀ ṃt template chuẩn c a angular sử ḍng modules:

Module trong AngularJS

Trong ví ḍ ǹy module đ ợc khai báo ngay trong thẻ với tên l̀ myModule. var app = angular.module('myModule',[]);

 ng-app="myModule": Khai báo ṃt angular app là myModule, sử ḍng myModule đ ợc khai báo trong script

 Trong script, angular.module() là hàm khai báo cho module

Cặp dấu ngoặc vuông [] đại diện cho các module sẽ được nạp cùng với ứng dụng, với module chính được khai báo trong ng-app Ví dụ: var app = angular.module('myModule', ['ngRoute', 'ngBootstrap']);

Trong ví dụ trên, chúng ta đã thấy cách khai báo module Vậy, controller trong ứng dụng sẽ được khai báo như thế nào? Hãy xem ví dụ dưới đây trong file index.html.

script.js var app = angular.module('ExampleModule', []); app.controller('ExampleController', function($scope) {

•Method controller c amodule sẽ đóng vai trò khai báo thêm ṃt controller cho module.

• Function đại diện cho controller đ ợc khai báo b̀nh th ng giống nh controller khai báo bên ngoài module

- AngularJS sử ḍng Dependence Injection để tách biệt giữa các modules

- Các dependency đ ợc đ a v̀o tựđ̣ng b i framework

T̉ ch c c̉a một ng d ng tḥc t

Thông th ng th̀ tổ ch́c ṃt ́ng ḍng thực tế sẽ đ ợc kh i tạo nh sau

 index.html chính là html documents

 style.css chính l̀ mư nguồn css cho document

 main.js chính l̀ mư nguồn cho module chính

 các files js khác l̀ các modules đ ợc module chính sử ḍng, nh vậy template c a chúng ta sẽ đ ợckhai báo lại nh sau index.html

Nguyễn Minh Sang 13 main.js var app = angular.module('ExampleModule', ['Module1', 'Module2', 'Module3']); app.controller('ExampleController', function($scope) {

Scope

'$scope' là đối tượng tham chiếu đến model trong controller, đóng vai trò là cầu nối giữa View và Controller Nó cung cấp các API như $watch để theo dõi các thay đổi của Model.

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

Model

Ng-model cho biết đối t ợng nhận giá trị c a input {{greeting}} sẽ in ra giá trị đ ợc nhập v̀o input.

Controller

var demo = angular.module('myApp',[]); demo.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hello World!';

Tạo ṃt module cho ́ng ḍng:

- Đặt biến “demo” ch́a module “myApp” c a ́ng ḍng. var demo = angular.module('myApp',[]);

- Tạo ṃt controller mới cho module ǹy demo.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hello World!';

'GreetingController' l̀ tên c a controller, cách đặt tên nên ch́a tên v̀ đuôi “Controller” để dễ nhận biết.

Viết h̀m sử ḍng với biến $scope.

Gán giá trị cho biến greeting Để in đ ợc giá trị c a greeting ra tr̀nh duyệt.

Ng-controller cho biết controller đang hoạt đ̣ng Đoạn mư ǹy sẽ in ra tr̀nh duyệt chuỗi

“Hello World! ” đ ợc khai báo trong “GreetingController”.

Expression (Biểu th́c)

Expression là một phần quan trọng trong AngularJS, cần nắm vững cách sử dụng và tính toán của nó Các biểu thức được bao bọc trong ký hiệu {{ }} Biến được khởi tạo từ controller thông qua $scope cũng được xem là một biểu thức trong AngularJS.

- Expression các snippets giống JS đ ợc đặt trong bindings, kiểu nh {{expression}}.

- Đ ợc xử lý b i $parse service

Angular sẽ tính toán giá trị trong biểu th́c v̀ xuất ra m̀n h̀nh kết qủ “2 + 2 = 4”.

Trong Angular, ṃt filter cung cấp ṃt định dạng dữ liệu để hiển thị tới ng i dùng

Theo tinh thần c a UNIX filters và sử ḍng các cú pháp t ơng tự | (pipe)

Angular cung cấp ṃt số filter đ ợc xây dựng sẵn nh : lowercase, date, number, currency, limitTo, orderBy…

Uppercased: {{ userInput | uppercase }} Khi ng i dùng nhập dữ liệu v̀o input th̀ giá trị đó sẽ đ ợc chuyển th̀nh chữ viết th ng.

Những th́ nh thục tính, class, tên c a 1 DOM element g̣i chung là directive AngularJS sẽ dựa v̀o chúng để attach các chỉ thị hoặc các sự kiện tới DOM element đó.

B̉n thân AngularJS đư có rất nhìu các directive : ng-bind, ng-model, ng-click, ng- controller

Việc dùng directive sẽ gỉm thiểu đ ợc số l ợng thẻ HTML , code HTML nhìn sẽ g̣n gàng và sáng s a hơn.

AngularJS cung cấp cho chúng ta 3 loại directive đó l̀ :

- Directive dạng element ( là 1 thẻ HTML ) viết tắt là E

- Directive dạng attribute ( thục tính c a 1 thẻ HTML ) viết tắt là A, dạng này là mặc định

- Directive dạng class( class CSS ) viết tắt là C

Chuẩn bị t̀i liệu HTML với 3 đ 3 loại directive:

AngularJS var app = angular.module('demoApp', []); app.controller('myController', function($scope) {

$scope.customer = { name: 'Sang', address: 'Quang Trung, Go Vap'

directive('myDirective', function() { return { restrict : 'C', template: 'Name: {{customer.name}}

Address: {{customer.address}}' // templateUrl: 'directive_template.html'

Trong myCtrl khai báo thông tin customer với name v̀ địa chỉ

Trong myDirective sẽ return ra 1 object còn việc hiển thịhay đổ dữ liệu v̀o directive nh nào là việc c a Angular chúng ta không cần quan tâm

L u ý: Tên directive ph̉i khai báo dạng camelCase còn khi g̣i thì có thể dùng dấu - để ngăn cách giữa các từ hoặc đểnguyên nh khi khai báo cũng đ ợc

 restrict : loại directive mặc định là E(element), C là class, A là attribute

 templateUrl: Liên kết tới 1 file template bên ngoài Template này ch́a ṇi dung c a directive

Name: {{customer.name}} Address: {{customer.address}}

 Nếu restrict:"A" thì sẽ có dữ liệu

 Nếu restrict:"C" thì sẽ có dữ liệu

 Nếu restrict:"E" thì sẽ có dữ liệu

Khi thay đổi restrict cần l u ý infect element đểxem nó đổ dữ liệu vào thẻ nào

AngularJS service là một đối tượng hoặc hàm chịu trách nhiệm cho một tác vụ cụ thể Việc tạo ra service giúp tổ chức và quản lý các đoạn mã logic một cách hiệu quả hơn.

Cũng giống nh mô h̀nh MVC tách phần xửlý, đìu h ớng và hiển thị riêng biệt

In AngularJS, services encapsulate all processing logic, while controllers receive requests and invoke the necessary services for handling them The model manages data from the controllers, the view is responsible for displaying this data, and the routing directs requests to the appropriate controller.

B̉n thân AngularJS cũng ch́a những service nh : $http, $scope, $window,

Có 2 ćch để t o service trong Angularjs

Cú pháp: module.service( 'serviceName', function );

Ví ḍ: var module = angular.module('myapp', []); module.service('userService', function(){ this.users = ['Sang', 'Nguyen', 'Minh'];

Cú pháp: module.factory('userService', function(){

Ví ḍ: var fac = {}; fac.users = ['John', 'James', 'Jake']; return fac;

C̉2 cách đ̀u tạo ra đ ợc service

Với cách 1 sau khi đăng ký tên service xong bạn sẽđ ợc cung cấp 1 thể hiện c a function mà bạn truỳn vào module.service

Với cách 2 sau khi đăng ký tên factory, trong function truỳn vào trong module.factory cần return thể hiện c a đối t ợng tạo bên trong nó

2.2.10 Multiple Views and Routing Đôi khi trong ṃt trang, nhìu khi chúng ta chỉ muốn hiển thị ṃt phần HTML ́ng với mỗi ch́c năng c̣ thể mà ta không cần chuyển đổi trang, Angular là ṃt full-stack framework hiệu qủ giúp chúng ta có thểl̀m đ ợc việc này nhanh chóng và dễ dàng Route là ḅđìu h ớng các yêu cầu từphía ng i dùng tới các controller t ơng ́ng để xử lý dựa theo các đối số truỳn trên thanh url Route trong AngularJS l̀ th̀nh phần quan tṛng giúp AngularJs tạo đ ợc ́ng ḍng SPA, chuyển trang m̀ không cần t̉i lại tr̀nh duyệt.

Trong AngularJs chúng ta sẽ sử ḍng $routeProvider để bắt các yêu cầu Biểu th́c route đ ợc tính từ sau dấu #

Từ phiên b̉n AngularJs 1.0.7 th̀ Route đư đ ợc tách th̀nh ṃt file js riêng biệt, v̀ để sử ḍng đ ợc nó ta ph̉i nhúng file angular-route.min.js v̀o ́ng ḍng.

Directive ng-view đ ợc sử ḍng để hiển thị dữ liệu.

To register an app as a module in AngularJS and set up basic routing, you need to utilize the ngRoute module Begin by creating your AngularJS application with the following code: `var app = angular.module('demoApp', ['ngRoute']);` Then, configure the routing by using the `$routeProvider` within the app's configuration function.

when('/, { templateUrl : index.html', controller : 'homeController'

.when('/post/:id', { templateUrl : 'detail.html',

Nguyễn Minh Sang 21 controller : 'postController'

 app.config l̀ method cho phép khai báo các Controller, View t ơng ́ng với url

Với route thế ǹy th̀ khi truy cập v̀o đ ng dẫn chính c a trang web th̀ tr̀nh duyệt sẽ load file index.html v̀ bind nó v̀o

Trong quá trình truy cập chi tiết bài đăng, dịch vụ $routeParams được sử dụng để nhận các tham số, cụ thể là ID của bài viết, giúp xác định chính xác bài viết cần hiển thị Đường dẫn truy cập chi tiết bài đăng có định dạng #/post/id, trong đó "id" là mã định danh của bài viết Khi cấu hình route, không cần thiết phải ghi dấu "#" trong đường dẫn.

Khi gặp đ ng dẫn có dạng #/post/id thì route sẽ g̣i tới controller là postController và sử ḍng template từ file detail.html

.when('/post/:id', { templateUrl : 'detail.html', controller : 'postController'

$routeProvider.otherwise xử lý cho route mặc định Khi đ ng dẫn không khớp với những route đư đ ợc thiết lập th̀ sẽđ ợc tái đìu h ớng v̀ trang ch

- Controls (input, select, textarea) là các cách mà ng i dùng nhập dữ liệu

- Form là ṃt tập các controls với ṃc đích nhóm các controls liên quan với nhau

- Form và controls cung cấp các validation services, để ng i dùng đ ợ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 ́ng ḍng

- Sử ḍng thục tính “novalidate” để tắt ch́c năng validation mặc định c a trình duyệt

 ng-valid: class đ ợc thêm vào phần tử nếu kiểm tra

 ng-invalid: class đ ợc thêm vào phần tử nếu không kiểm tra

 ng-pristine: class đ ợc thêm vào phần tử lúc ban đầu, tr ớc khi AngularJS xử lý kiểm tra

 ng-dirty: class đ ợc thêm vào phần tử khi AngularJS xử lý kiểm tra

Angular offers essential handling for most HTML5 input types, including text, number, URL, email, radio, and checkbox It also provides directives for validation, such as required, pattern, minlength, maxlength, min, and 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

- Validation có thể xuất hiện 2 chỗ

The Model to View update ensures that when the Model changes, all functions in the NgModelController#$formatters array are piped, allowing each function to format the value and update the validity state of the form control through NgModelController#$setValidity.

 View to Model update: t ơng tự nh vậy, khi ng i dùng t ơng tác với 1 control, nó g̣i NgModelController#$setViewValue Nó sẽ pipe – line tất c̉ các hàm trong

NgModelController#$parsers array, để mỗi hàm này lần l ợt chuyển đổi giá trị và trạng thái thay đổi c a form control thông qua NGModelController#$setValidity.

2.3 Lập trình AngularJS ph́a server với Node.js

Node.js là một nền tảng hoạt động trên môi trường V8 Javascript runtime, cho phép lập trình viên xây dựng các ứng dụng có tính mở rộng cao bằng Javascript trên server Nhờ vào việc porting từ C, Node.js có tốc độ xử lý nhanh chóng, mang lại hiệu suất tốt cho các ứng dụng web.

2.3.2.Node.js có thểlƠm đ c những gì?

- Xây dựng websocket server (Chat server)

- ng ḍng upload file rất nhanh trên client

- Hoặc bất kỳ ́ng ḍng dữ liệu th i gian thực nào

Nodejs không ph̉i là ṃt web framework.Nó không d̀nh cho ng i mới bắt đầu, không ph̉i là ṃt ǹn t̉ng thực thi các tác ṿ đa luồng

2.3.3 Block code và Non-block code

Ví d ̣ xây d ự ng ch ́c năng đ̣ c file và in ra d ữ li ệ u c a file

Logic Đ̣ c file t ừ Filesystem, gán d ữ li ệu t ơng ́ ng v ớ i bi ế n "contents"

Thực hiện công việc khác tiếp theo

Non-block code: Đ̣c file từ Filesystem

Sau khi đ̣c xong thì in dữ liệu (callback)

Block code var contents = fs.readFileSync 'hello.txt' ; // Dừng cho đ́n khi đọc xong file console.log(contents); console.log 'Tḥc hiện công việc khác' ;

Non-block code fs.readFile('hello.txt', function(contents){ console.log(contents);

}); console.log 'Tḥc hiện công việc khác' ;

Tốc độ xử lý của non-block code cao hơn so với block code, đặc biệt khi thực hiện công việc trên hai file cùng lúc, non-block code sẽ nhanh hơn rất nhiều so với block code.

2.3.4 ng d ng đ̀u tiên hello.js var http = require 'http' ; // đây là cách chúng ta require các modules http.createServer(function(request, response){ response.writeHead(200, {'Content-Type':'text/plain'}); // Status code và content type response.write "Xin chào lập trình viên!" ; // Thông điệp được gửi xuống client. response.end ; // Đóng ḱt nối

} listen 3000 ; // Ch̀ ḱt nối ở cổng 3000. console.log "Server đang ch̀ ḱt nối tại cổng 3000" ;

Ch ạ y server: node hello ho ặ c node hello.js > Server đang chờ k ế t n ố i t ạ i c ổ ng 3000

Mở trình duyệt và truy cập tới địa chỉ http://localhost:3000 hoặc dùng terminal: curl http://localhost:3000 > Xin chào lập trình viên

Directives