Liên kết dữ liệu drupal với AngularJS - Hướng dẫn từng bước một

 Liên kết dữ liệu drupal với AngularJS - Hướng dẫn từng bước một

AngularJS là một javascript framework phổ biến tựa lưng bời Google. Bài viết này sẽ hướng dẫn cho bạn thiết lập một ứng dụng Angular đơn giả sử dụng dữ liệu đã tạo bằng Drupal. Nếu bạn là một người mới về Angular, bạn có thể thích:

http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/
https://docs.angularjs.org/tutorial/step_00

Cái bạn cần cho hướng dẫn này.

Drupal

jQuery Update

Libraries

AngularJS

Views

Views Datasource

Hướng dẫn này mang một kiến thức khá hợp của Drupal

Ứng dụng của chúng ta sẽ tổng hợp những code nhỏ ( sử dung content type 'Acticle' mặc định) lọc bằng 'section' taxonomy ( nói một chứ PHP, một chứ CSS) - Xem demo

Đầu tiên bạn enable các module contrid


 

 

 

 

 

 

 

 

 

 

 

Bây giờ chúng ta cấu hình những module đó /admin/config/development/angularjs

Chúng ta sử dụng CDN ở đây cho dễ sử dụng


 

 

 

 

 

 

 

 

/admin/config/development/jquery_update

 

 

 

 

 

 

 

 

 

Bây giờ chúng ta tạo một module gọi là “sections” và đặt nó trong /sites/all/modules/custom

Kết thúc sẽ giống như sau:

 

 

 

 

 

 

 

Tạo file sections.info

name = Sections

description = Angular sections

version = 7.x=1.0

core = 7.x

Tiếp theo enable “sections” module ở /admin/modules

Tạo sections.module

Trong đó chung ta sẽ thêm trang trả về và thêm js phụ thuộc của chúng ta:

/**

* Implement hook_menu().

*/

 

funtion sections_menu() {

$items ['sections'] = array (

'page callback' => 'all_sections_page',

'access arguments' => array('access content'),

);

return $items;

}

/**

* hook_theme()

*/

 

function sections_theme() {

return array(

'all_sections' => array(

'template' => 'all-section',

),

);

}

 

/**

* All sections callback

*/

function all_sections_page() {

$path = Drupal_get_path('module', 'sections');

Drupal_add_js($path.'/js/sectins.gen.js');

return theme('all_sections');

} Chúng ta đang gọi một file template như vậy chung ta cần tạo ra nó:

tron file có tên all-sections.tpl.php

<div id="sections-app" class="ng-container">

<div> ng-view="" class="anim"</div>

</div>

Cái mà chúng ta đang làm ở đây định nghĩa một nơi chứa đơn giản của ứng dụng (app). Cái quan trọng ở đây là ID “sections-app”. Trong regular AngularJS apps chúng ta nên sử dụng ng-app=sections-app, nhưng trong trường hợp này –----- bởi vì chung ta đang sử dụng Drupal, chung ta có thể tránh một vài lý do bằng cách khởi đầu với jQuery, nguồn của Drupal. ng-view định nghĩa nơi chưa cho những file html bên trong folder “templates”

Trước khi chúng ta thiết lập ứng dụng Angular, chúng ta thiết lập back end cái mà sẽ xây dwungj dữ liệu Angular-ready, cơ bạn đầu ra dữ liệu Drupal giống như Json với views và views data source.

Data

1) Môt taxonomy type đã được gọi “Section”

2) acticle content type, chúng ta sẽ thay đổi cái đó giống như:

 

 

 

 

 

 

3) View đầu tiên của chúng ta:

 

 

 

 

 

 

 

 

Một page với đường dẫn cần cho chúng ta điều khiển, những fields từ taxonomy, và một lọc đơn giản, sự kỳ diệu nằm trong định dạng rõ ràng, được cung cấp bởi những module views. Nó sẽ cho phép chúng ta trùng bày dữ liệu giống như json trong trình duyệt. ( không phải là rendering)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Tên của đối tượng gốc thì rất quan trọng ở đây. Chúng ta có thể dải đánh dấu hoặc không, nó thực sử phụ thuộc vào kiểu nội dung chúng ta có, nhưng rốt cuộc nó có thể thay đổi bằng cách reder với dữ liệu hoặc không ng-reder.

 

 

 

 

 

 

 

 

 

 

 

Chú ý bạn sẽ phải bỏ check views API mode.

4) View thứ hai của chúng ta