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> 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

Cái này cho 'acticle content type'. Ở đây đường dẫn cần một đối số, đã được định nghĩa bởi contextual filter.

Đó là một khác biệt chính, loại trừ rằng chúng ta cũng cần làm chắc chắn rằng chúng ta không dải html trong cấu hình json và sử dụng 'node' tên đối tượng gốc.

Angular code

1) App

Trong file sections.gen.js

'use strict',

var sectionsApp = angular.module('sectionsApp', [

'ngRoute',

'ngSanitize',

'ngAnimate',

'sectionsDirectives',

'sectionsControllers'

]);

sectionsApp.config(['$routeProvider',

function($routeProvider) {

$routeProvider

.when('/', {

templateUrl: '/sites/all/modules/custom/sections/template/sections.html',

controller: 'sectionsCtrl'

})

.when('/section/:tid',

templateUrl: '/sites/all/modules/custom/sections/template/acticles.html',

controller: 'acticlesCtrl')

}

.otherwise({

redirectTo: '/'

});

]);

jQuery(document).ready(function() {

angular.boostrap(document.getElementById('sections-app'),['sectionsApp']);

});

Đầu tiên chúng ta xác định các ứng dụng phụ thuộc, sau đó chúng ta định tuyến trỏ đến template và controller của chúng ta tiếp theo gọi jQuery khởi tạo, không có gì là ở đây chỉ là những điều cơ bản.
Lưu ý '/section/:tid' đó chính là taxonomy ID của chúng ta. cái hành vi cơ bản giống như một đối số khi sử dụng views conditional filter (trong sự kết hợp với controller chúng ta sẽ định nghĩa bên dưới) .

2) Controller

Trong sections.gen.js thêm code bên dưới:

'use strict';

var sectionsControllers = angular.module('sectionsControllers', []);

sectionsControllers

.controller('sectionsCtrl', ['$scope', '$http', '$localtion',

function($scope, $html, $localtion) {

$html.get('/json/sections').success(function(result){

$scope.sections = (function() {

return result.taxonomy;

})();

});

}])

.controller('articlesCtrl', ['$scope', '$roueParams', '$http', '$sce',

function($scope, $roueParams, $html, $sce) {

$http.get('/json/' + $roueParams.tid + '/acticles')

.success(function(result) {

$scope.renderHtml = function (htmlCode) {

return $sce.trustAsHtml(htmlCode);

};

$scope.acticles = (function () {

return result.node;

})();

});

}]);

Ở đây chúng ta đã thiết lập hai controller sẽ tìm nạp dữ liệu Drupal. Điều thứ hai bao gồm các biến sẽ tương tác với contextual filter chúng ta thiết lập trong view thứ 2 (taxonomy id). Nó cũng bao gồm $sce.trustAsHtml(htmlCode) nó sẽ render html từ json an toàn.

Bây giờ là những templates

tạo sections.html và đặt nó trong folder “templates”

<div>

</div>

<h2>{{section.name}}</h2>

<div class="description">{{section.description}}</div>

</div>

</a>

</li>

</ul></div>

Tạo acticles.html và đặt trong folder “templates”

</div>

<div class="wrapper">\

<h2>{{articles.title}}</h2>

</div>

</div> ichio

</div>

Sự khác biệt giữa hai chủ yếu là cách chúng ta làm cho html với ng-bind-html và các chức năng chúng ta đã viết trong bộ điều khiển.

Xem video tại

https://www.youtube.com/watch?v=p3zSQieBIe8
https://www.zivtech.com/blog/binding-drupal-data-angularjs-step-step-tut...
Posted by: Alban Bailly
Translate chichio