I. Giới thiệu
AngularJS là 1 thư viện javascript cực kì phổ biến, cho phép bạn nhanh chóng và dễ dàng để tạo ra các trang web, ứng dụng web phong phú. Trong bài viết này tôi sẽ chỉ cho bạn cách tích hợp AngularJS vào ứng dụng Rails của bạn. Tôi sẽ xây dựng 1 ứng dụng AngularJS đơn giản gọi là VisitorsCenter. Ứng dụng VisitorsCenter cho phép người dùng theo dõi khách truy cập khách đến và đi từ tòa nhà giống như là tòa nhà văn phòng. Hãy cùng bắt đầu.
II. Cài đặt môi trường trong ứng dụng rails
Trước khu chúng ta bắt đầu, chúng ta phải thêm một vài thư viện vào trong Gemfile. Gem angularJs-rails tích hợp thư viện AngularJS vào ứng dụng rails. Gem bootstrap-sass chỉ bổ sung hỗ trợ bootstrap để chúng ta có thể tập trung vào mã code chứ không phải là giao diện của ứng dụng. Thêm những gem này vào trong tệp Gemfile
1 2 3 | gem <span class="token string">'angularjs-rails'</span><span class="token punctuation">,</span> <span class="token string">'~> 1.2.25'</span> gem <span class="token string">'bootstrap-sass'</span><span class="token punctuation">,</span> <span class="token string">'~> 3.2.0.2'</span> |
Và sau đó chạy bundle install để cài đặt các gem.
Tiếp đó, chúng ta cần tạo một model gọi là Visitor trong ứng dụng. Model này sẽ đại diện cho khách truy cập vào văn phòng. Chạy lệnh như dưới đây để tạo ra model Visitor:
1 2 3 | rails g model <span class="token constant">Visitor</span> first_name<span class="token symbol">:string</span> last_name<span class="token symbol">:string</span> reason<span class="token symbol">:string</span> rake db<span class="token symbol">:migrate</span> |
Tuyệt vời, bây giờ chúng ta hãy tạo VisitorsController để tương tác với model Visitor. VisitorsController sẽ có 3 action trong ví dụ này. Action đầu tiên, index sẽ trả lại trang liệt kê danh sách lượng Visitor truy cập. Action thứ 2 là create có trách nhiệm tạo ra một Visitor. Action thứ 3 là destroy sẽ xóa đi 1 Visitor. Chạy lệnh sau để tạo ra VisitorsController:
1 2 | rails g controller Visitors index create destroy |
Bây giờ hãy chỉnh sửa file routes.rb để cài đặt đường dẫn và root url cho ứng dụng.
1 2 3 4 5 | <span class="token constant">Rails</span><span class="token punctuation">.</span>application<span class="token punctuation">.</span>routes<span class="token punctuation">.</span>draw <span class="token keyword">do</span> resources <span class="token symbol">:visitors</span><span class="token punctuation">,</span> only<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token symbol">:index</span><span class="token punctuation">,</span> <span class="token symbol">:create</span><span class="token punctuation">,</span> <span class="token symbol">:destroy</span><span class="token punctuation">]</span><span class="token punctuation">,</span> defaults<span class="token punctuation">:</span> <span class="token punctuation">{</span>format<span class="token punctuation">:</span> <span class="token symbol">:json</span><span class="token punctuation">}</span> root to<span class="token punctuation">:</span> <span class="token string">"visitors#index"</span> <span class="token keyword">end</span> |
Đoạn mãdefaults: {format: :json} nói với Rails rằng chúng ta muốn trả về json mặc định cho các action trong controller. Chúng ta làm điều này vì hầu hết các tương tác trong ứng dụng của chúng ta đều thông qua JSON. Theo mặc định, AngularJS không biết gì về CSRF trong ứng dụng của chúng ta. Chúng ta cần một cách để nói với Angular rằng làm thế nào để tương tác với Rails thông qua các bảo vệ CSRF. May mắn thay chúng ta có 1 cách để làm điều đó. Mở ApplicationController và thêm vào đoạn mã sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token keyword">class</span> <span class="token class-name">ApplicationController</span> <span class="token operator"><</span> <span class="token constant">ActionController</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Base</span> <span class="token comment"># Prevent CSRF attacks by raising an exception.</span> <span class="token comment"># For APIs, you may want to use :null_session instead.</span> protect_from_forgery with<span class="token punctuation">:</span> <span class="token symbol">:exception</span> after_action <span class="token symbol">:set_csrf_cookie_for_ng</span> <span class="token keyword">def</span> set_csrf_cookie_for_ng cookies<span class="token punctuation">[</span><span class="token string">'XSRF-TOKEN'</span><span class="token punctuation">]</span> <span class="token operator">=</span> form_authenticity_token <span class="token keyword">if</span> protect_against_forgery<span class="token operator">?</span> <span class="token keyword">end</span> <span class="token keyword">protected</span> <span class="token keyword">def</span> verified_request<span class="token operator">?</span> <span class="token keyword">super</span> <span class="token operator">||</span> valid_authenticity_token<span class="token operator">?</span><span class="token punctuation">(</span>session<span class="token punctuation">,</span> request<span class="token punctuation">.</span>headers<span class="token punctuation">[</span><span class="token string">'X-XSRF-TOKEN'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token keyword">end</span> <span class="token keyword">end</span> |
Mã trên sẽ tạo ra một cookie gọi là XSRF-TOKEN sẽ chứa form_authenticity_token. Bất cứ lúc nào yêu cầu được thực hiện, AngularJS sẽ chuẩn bị token ở trong HTTP header cho yêu cầu. Bây giờ hãy sửa VisitorsController để truy cập vào model Visitor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token keyword">class</span> <span class="token class-name">VisitorsController</span> <span class="token operator"><</span> <span class="token constant">ApplicationController</span> respond_to <span class="token symbol">:json</span> <span class="token keyword">def</span> index respond_to <span class="token keyword">do</span> <span class="token operator">|</span>format<span class="token operator">|</span> format<span class="token punctuation">.</span>json <span class="token punctuation">{</span> render json<span class="token punctuation">:</span> <span class="token constant">Visitor</span><span class="token punctuation">.</span>all <span class="token punctuation">}</span> format<span class="token punctuation">.</span>html <span class="token keyword">end</span> <span class="token keyword">end</span> <span class="token keyword">def</span> create respond_with <span class="token constant">Visitor</span><span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span>visitor_params<span class="token punctuation">)</span> <span class="token keyword">end</span> <span class="token keyword">def</span> destroy respond_with <span class="token constant">Visitor</span><span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span>params<span class="token punctuation">[</span><span class="token symbol">:id</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token keyword">end</span> <span class="token keyword">private</span> <span class="token keyword">def</span> visitor_params params<span class="token punctuation">.</span><span class="token keyword">require</span><span class="token punctuation">(</span><span class="token symbol">:visitor</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">permit</span><span class="token punctuation">(</span><span class="token symbol">:first_name</span><span class="token punctuation">,</span> <span class="token symbol">:last_name</span><span class="token punctuation">,</span> <span class="token symbol">:reason</span><span class="token punctuation">)</span> <span class="token keyword">end</span> <span class="token keyword">end</span> |
Đoạn code phía trên là điển hình của Rails, với ngoại lệ là chúng ta sẽ trả về JSON. Kể từ đây ứng dụng của chúng ta sẽ giao tiếp chủ yếu thông qua AJAX, chúng ta không cần HTML khác cho action index, mà sẽ trả lại html hoặc json tùy theo yêu cầu. Tiếp theo chúng ta cần thêm hỗ trợ cho cả AngularJS và Bootstrap vào tệp application.js. Mở tệp application.js và sửa đổi nó như sau:
1 2 3 4 5 6 7 8 | //= require jquery //= require jquery_ujs //= require turbolinks //= require angular //= require angular-resource //= require bootstrap-sprockets //= require_tree . |
Trong đoãn mã trên, chúng ta đã thêm hỗ trợ AngularJS cũng như Boostrap cho ứng dụng. Chúng ta cần thêm hỗ trợ nữa gọi là angular-resource cho phép chúng ta dễ dàng thao tác với Rails. Bây giờ hãy thêm css cho bootstrap. Tạo một tệp mới có tên là bootstrap_config.scss và sửa nó như sau:
1 2 3 | <span class="token variable">@import</span> <span class="token string">"bootstrap-sprockets"</span><span class="token punctuation">;</span> <span class="token variable">@import</span> <span class="token string">"bootstrap"</span><span class="token punctuation">;</span> |
Điều tiếp theo chúng ta cần làm là tạo ra ứng dụng AngularJS. Các ứng dụng AngularJS thường bao gồm cả mã Javascript kết hợp với HTML. Để bắt đầu làm điều này, điều đầu tiên chúng ta cần làm là đổi tên tệp visitor.js.coffee thành visitor.js và sửa đổi nó trông giống như dưới đây. Bạn cũng có thể viết lại trong CoffeeScript, nhưng tôi sẽ dùng JavaScript cho những người chưa biết về CoffeeScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | var visitorCenter <span class="token operator">=</span> angular<span class="token punctuation">.</span><span class="token keyword">module</span><span class="token punctuation">(</span><span class="token string">'VisitorCenter'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'ngResource'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> visitorCenter<span class="token punctuation">.</span><span class="token function">factory</span><span class="token punctuation">(</span><span class="token string">"Visitor"</span><span class="token punctuation">,</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token variable">$resource</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token variable">$resource</span><span class="token punctuation">(</span><span class="token string">"visitors/:id"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token string">'@id'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> index<span class="token punctuation">:</span> <span class="token punctuation">{</span> method<span class="token punctuation">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span> isArray<span class="token punctuation">:</span> <span class="token keyword">true</span><span class="token punctuation">,</span> responseType<span class="token punctuation">:</span> <span class="token string">'json'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> update<span class="token punctuation">:</span> <span class="token punctuation">{</span> method<span class="token punctuation">:</span> <span class="token string">'PUT'</span><span class="token punctuation">,</span> responseType<span class="token punctuation">:</span> <span class="token string">'json'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> visitorCenter<span class="token punctuation">.</span><span class="token function">controller</span><span class="token punctuation">(</span><span class="token string">"visitorsController"</span><span class="token punctuation">,</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token variable">$scope</span><span class="token punctuation">,</span> <span class="token constant">Visitor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>visitors <span class="token operator">=</span> <span class="token constant">Visitor</span><span class="token punctuation">.</span><span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>addVisitor <span class="token operator">=</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> visitor <span class="token operator">=</span> <span class="token constant">Visitor</span><span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token variable">$scope</span><span class="token punctuation">.</span>newVisitor<span class="token punctuation">)</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>visitors<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>visitor<span class="token punctuation">)</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>newVisitor <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>deleteVisitor <span class="token operator">=</span> <span class="token function">function</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token punctuation">{</span> visitor <span class="token operator">=</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>visitors<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token constant">Visitor</span><span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>visitor<span class="token punctuation">)</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>visitors<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Có rất nhiều thứ cần tìm hiểu trong đoạn mã trên, vì vậy tôi sẽ chia chúng ra thành nhiều phần và giải thích chúng, dòng đầu tiên:
1 2 | var visitorCenter <span class="token operator">=</span> angular<span class="token punctuation">.</span><span class="token keyword">module</span><span class="token punctuation">(</span><span class="token string">'VisitorCenter'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'ngResource'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Định nghĩa một module AngularJS. Các module AngularJS có thể được coi là các thành phần riêng lẻ trong ứng dụng của bạn. Bạn sẽ nhận thấy tôi bao gồm ngResource như một đối số. ngResource để truy cập dễ dàng vào các RESTful resource như ứng dụng Rails. Các dòng tiếp theo:
1 2 3 4 5 6 7 | visitorCenter<span class="token punctuation">.</span><span class="token function">factory</span><span class="token punctuation">(</span><span class="token string">"Visitor"</span><span class="token punctuation">,</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token variable">$resource</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token variable">$resource</span><span class="token punctuation">(</span><span class="token string">"visitors/:id"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> id<span class="token punctuation">:</span> <span class="token string">'@id'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> index<span class="token punctuation">:</span> <span class="token punctuation">{</span> method<span class="token punctuation">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span> isArray<span class="token punctuation">:</span> <span class="token keyword">true</span><span class="token punctuation">,</span> responseType<span class="token punctuation">:</span> <span class="token string">'json'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> update<span class="token punctuation">:</span> <span class="token punctuation">{</span> method<span class="token punctuation">:</span> <span class="token string">'PUT'</span><span class="token punctuation">,</span> responseType<span class="token punctuation">:</span> <span class="token string">'json'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Định nghĩa một service, trong trường hợp này, nó liên kết trong ng-Resource service đã được nói trước đó và bảo AngularJS giao tiếp với ứng dụng của chúng ta như thế nào. Các dòng tiếp theo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | visitorCenter<span class="token punctuation">.</span><span class="token function">controller</span><span class="token punctuation">(</span><span class="token string">"visitorsController"</span><span class="token punctuation">,</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token variable">$scope</span><span class="token punctuation">,</span> <span class="token constant">Visitor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>visitors <span class="token operator">=</span> <span class="token constant">Visitor</span><span class="token punctuation">.</span><span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>addVisitor <span class="token operator">=</span> <span class="token function">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> visitor <span class="token operator">=</span> <span class="token constant">Visitor</span><span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token variable">$scope</span><span class="token punctuation">.</span>newVisitor<span class="token punctuation">)</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>visitors<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>visitor<span class="token punctuation">)</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>newVisitor <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>deleteVisitor <span class="token operator">=</span> <span class="token function">function</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token punctuation">{</span> visitor <span class="token operator">=</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>visitors<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token constant">Visitor</span><span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>visitor<span class="token punctuation">)</span> <span class="token variable">$scope</span><span class="token punctuation">.</span>visitors<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Định nghĩa một controller. Controller bảo AngularJS làm thế nào để tương tác với ứng dụng Rails của chúng ta tương tự như các controller của Rails được sử dụng để nói với rails cách các views được tương tác với models. Bây giờ chúng ta đã viết ứng dụng Javascript, chúng ta cần tạo view để mọi thứ có thể kết hợp với nhau. Mở index view cho VisitorController và sửa nó như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"container"</span> ng<span class="token operator">-</span>app<span class="token operator">=</span><span class="token string">"VisitorCenter"</span><span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span><span class="token constant">Visitors</span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>div ng<span class="token operator">-</span>controller<span class="token operator">=</span><span class="token string">"visitorsController"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"well"</span><span class="token operator">></span> <span class="token operator"><</span>h3<span class="token operator">></span><span class="token constant">Add</span> a <span class="token keyword">new</span> <span class="token class-name">Visitor</span><span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span>form ng<span class="token operator">-</span>submit<span class="token operator">=</span><span class="token string">"addVisitor()"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"row"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col-xs-6"</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> ng<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"newVisitor.first_name"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"form-control"</span> placeholder<span class="token operator">=</span><span class="token string">"First Name"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col-xs-6"</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> ng<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"newVisitor.last_name"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"form-control"</span> placeholder<span class="token operator">=</span><span class="token string">"Last Name"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"row"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col-xs-12"</span><span class="token operator">></span> <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> ng<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"newVisitor.reason"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"form-control"</span> placeholder<span class="token operator">=</span><span class="token string">"Reason for Visit"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"row"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col-xs-12 text-center"</span><span class="token operator">></span> <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"Submit"</span> value<span class="token operator">=</span><span class="token string">"Add Visitor"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btn btn-primary"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>h3<span class="token operator">></span><span class="token constant">Currently</span> <span class="token constant">Visiting</span><span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span>hr <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>table <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"table table-bordered table-striped"</span><span class="token operator">></span> <span class="token operator"><</span>thead<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>th<span class="token operator">></span><span class="token constant">First</span> <span class="token constant">Name</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span> <span class="token operator"><</span>th<span class="token operator">></span><span class="token constant">Last</span> <span class="token constant">Name</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span> <span class="token operator"><</span>th<span class="token operator">></span><span class="token constant">Reason</span> <span class="token keyword">for</span> <span class="token constant">Visit</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span> <span class="token operator"><</span>th<span class="token operator">></span><span class="token operator">&</span>nbsp<span class="token punctuation">;</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>thead<span class="token operator">></span> <span class="token operator"><</span>tbody<span class="token operator">></span> <span class="token operator"><</span>tr ng<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">"!visitors.length"</span><span class="token operator">></span> <span class="token operator"><</span>td colspan<span class="token operator">=</span><span class="token string">"4"</span><span class="token operator">></span><span class="token constant">No</span> visitors <span class="token keyword">in</span> the building<span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr ng<span class="token operator">-</span>repeat<span class="token operator">=</span><span class="token string">"visitor in visitors"</span><span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> visitor<span class="token punctuation">.</span>first_name <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> visitor<span class="token punctuation">.</span>last_name <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> visitor<span class="token punctuation">.</span>reason <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>a <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btn btn-danger"</span> ng<span class="token operator">-</span>click<span class="token operator">=</span><span class="token string">"deleteVisitor($index)"</span><span class="token operator">></span><span class="token constant">Remove</span><span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tbody<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
Đoạn mã như dưới đây:
1 2 3 4 | <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"container"</span> ng<span class="token operator">-</span>app<span class="token operator">=</span><span class="token string">"VisitorCenter"</span><span class="token operator">></span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
Các div bên ngoài trên dòng đầu tiên có 1 thuộc tính gọi là ng-app. Thuộc tính ng-app cho Angular biết đây là 1 phần của ứng dụng AngularJS của chúng ta. Trong trường hợp này chúng ta định tên cuả module AngularJS, VisitorCenter.
1 2 3 4 | <span class="token operator"><</span>div ng<span class="token operator">-</span>controller<span class="token operator">=</span><span class="token string">"visitorsController"</span><span class="token operator">></span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
Div bên dòng tiếp theo chứa 1 thuộc tính gọi là ng-controller. Thuộc tính này cho AngularJS biết rằng chúng ta muốn sử dụng VisitorsController làm controller cho phần này của ứng dụng
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token operator"><</span>form ng<span class="token operator">-</span>submit<span class="token operator">=</span><span class="token string">"addVisitor()"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"row"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col-xs-6"</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> ng<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"newVisitor.first_name"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"form-control"</span> placeholder<span class="token operator">=</span><span class="token string">"First Name"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col-xs-6"</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> ng<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"newVisitor.last_name"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"form-control"</span> placeholder<span class="token operator">=</span><span class="token string">"Last Name"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"row"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col-xs-12"</span><span class="token operator">></span> <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> ng<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"newVisitor.reason"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"form-control"</span> placeholder<span class="token operator">=</span><span class="token string">"Reason for Visit"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"row"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"col-xs-12 text-center"</span><span class="token operator">></span> <span class="token operator"><</span>br <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"Submit"</span> value<span class="token operator">=</span><span class="token string">"Add Visitor"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btn btn-primary"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>form<span class="token operator">></span> |
Thuộc tính ng-submit trên form của chúng ta cho Angular biết rằng chúng ta muốn sử dụng phương thức addVisitor() trên controller để xử lí yêu cầu của form. Mỗi input đầu vào chứa một thuộc tính của ng-model. Thuộc tính này ánh xạ các phần tử đầu vào vào model của chúng ta.
1 2 3 4 | <span class="token operator"><</span>tr ng<span class="token operator">-</span>show<span class="token operator">=</span><span class="token string">"!visitors.length"</span><span class="token operator">></span> <span class="token operator"><</span>td colspan<span class="token operator">=</span><span class="token string">"4"</span><span class="token operator">></span><span class="token constant">No</span> visitors <span class="token keyword">in</span> the building<span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> |
Thuộc tính ng-show ở trên hàng đầu tiên nói với AngularJS rằng chúng ta chỉ muốn hiển thị hàng này nếu điều kiện được đề cập là phù hợp. Trong trường hợp này là không có visitor truy cập
1 2 3 4 | <span class="token operator"><</span>tr ng<span class="token operator">-</span>repeat<span class="token operator">=</span><span class="token string">"visitor in visitors"</span><span class="token operator">></span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> |
Thuộc tính ng-repeat là một vòng lặp. Vòng lặp này cho AngularJS biết rằng chúng ta muốn lặp lại từng visitor.
1 2 3 4 | <span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> visitor<span class="token punctuation">.</span>first_name <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> visitor<span class="token punctuation">.</span>last_name <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> visitor<span class="token punctuation">.</span>reason <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> |
Văn bản chứa trong {{…}} là một phương thức của AngularJS. Trong trường hợp này chúng ta đang nói với AngularJS để hiển thị các trường được đề cập tới trong biểu thức đó.
1 2 | <span class="token operator"><</span>td<span class="token operator">></span><span class="token operator"><</span>a <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"btn btn-danger"</span> ng<span class="token operator">-</span>click<span class="token operator">=</span><span class="token string">"deleteVisitor($index)"</span><span class="token operator">></span><span class="token constant">Remove</span><span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> |
Nút ng-click cho AngularJS chạy vào hàm trong controller được chỉ định khi thẻ html tag được click. Trong trường hợp này chúng ta chạy mã để xóa đi visitor đã chỉ định.
Đây là phần giới thiệu về AngularJS và Rails. Cảm ơn các bạn đã đọc bài.