把Drupal数据与AngularJS绑定- 手把手教程 （Fly译）

由 jyj1993126 提交于 19 October 2014

2014 10.10

作者： Alban Bailly   Fly jiang（译）

AngularJS 是一个由Google支持的流行javascript框架。这篇文章会教你使用由Drupal生成的数据来安装一个简单的Angular 应用。 如果你是Angular 新手，你会喜欢：

http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/

https://docs.angularjs.org/tutorial/step_00

准备工作：

Drupal jQuery Update Libraries AngularJS Views Views Datasource

该教程要求你有一定的Drupal基础。我们的Angular应用 会是一个经过‘章节’分类的代码片段集合（使用默认的‘文章’内容类型）。 - 在线演示

首先启用下列模块：

路径：/admin/modules

1.png

现在我们来配置这些模块：

路径：/admin/config/development/angularjs

（为了方便我们这里使用了CDN，但在生产环境中我们需要把它存在本地）

2.png

现在我们来新建一个自定义模块—“sections”，并把它放在 sites/all/modules/custom 目录

下面是最终的目录格式：

3.png

新建一个文件  sections.info

name = Sections

description = Angular sections

version = 7.x-1.0

core = 7.x

现在启用这个自定义模块

路径：/admin/modules

新建一个文件 sections.module

这里我们会添加我们的page callback回调函数， 并加载javascript依赖文件。

**

* Implement hook_menu().

*/

function 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-sections',

),

);

}

/**

* All sections callback

*/

function all_sections_page() {

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

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

  return theme('all_sections');

}

我们正在调用一个模板文件，所以我们需要创建它：

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

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

</div>

         这段代码所做的是，为我们的应用定义一个简单的容器。在这里要注意的是这个ID号”sections-app”. 通常在AngularJS应用里我们会使用另一种写法”ng-app = sections-app”,。但是在这里，由于我们使用了drupal，我们可以使用Jquery来帮我们避免一些问题。ng-view标签定义了那些在”template”文件夹里的html文件容器。

         在安装我们的Angular 应用之前，让我们安装一个后台来帮我们构建Angular-ready数据，用来输出JSON格式的Drupal数据(views 和 views源数据)

数据

1)一个分类类型叫做 “Section” (机读名称是 section)

2)一个文章内容类型，我们把它修改如下：

4.png

3)我们的第一个view:

5.png

非常基础。一个页面带一条路径，来自分类的字段，和一个简单的过滤器。魔力显然在格式上。有views提供的数据源模型会允许我们把数据暴露成JSON格式交给浏览器（不渲染输出）。

6.png

根对象名在这里非常重要，我们可以选择是否移除标记，它取决于我们又什么样的内容，它最终会影响我们渲染数据时是否有ng_render。

7.png

注意你需要取消选择views API mode的选择框。

4)我们的第二个view

8.png

这个是给 文章 内容类型准备的。 在此路径使用了一个由上下文过滤器定义的参数

9.png

这是主要的区别，除此之外我们还需要确保我们不会吧我们json设置中的html除掉，并使用’node’根对象名。

10.png

非常简单。

Angular 代码

  1. 应用

在 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/templates/sections.html',

  controller: 'sectionsCtrl'

})

.when('/section/:tid', {

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

controller: 'articlesCtrl'

})

.otherwise({

redirectTo: '/'

});

}]);

jQuery(document).ready(function() {

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

});

首先我们需要定义这个应用的依赖项，然后是路由；指向我们的模板和控制器。然后jQuery 调用这个app(上面所讲的应用)。这儿没有什么华丽的东西，都是些基础。

 

注意 ‘/section/:tid’ 是我们的分类的ID，当使用views条件过滤的时候主要是作为参数的作用。

  • 与下面我们将要定义的控制器组合)

 

  1. 控制器

在 sections.gen.js, 在之前的代码下面：

  'use strict';

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

  sectionsControllers

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

  function($scope, $http, $location) {

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

  $scope.sections = (function () {

  return result.taxonomy;

})();

});

}])

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

function($scope, $routeParams, $http, $sce) {

$http.get('/json/' + $routeParams.tid + '/articles')

.success(function(result) {

$scope.renderHtml = function (htmlCode) {

return $sce.trustAsHtml(htmlCode);

};

$scope.articles = (function () {

return result.node;

})();

});

}]);

现在我们来安装我们的两个控制器来取得Drupal数据。其中包含了$routeParams变量的第二个控制器会在第二个view(taxonomy id)设置的和上下文过滤器相互影响。它也包含了那个会安全地把json数据渲染成html的变量$sce.trustAsHtml(htmlCode)。

 

现在是模板

新建 sections.html 并把它放在 “templates” 文件夹下

<div class="section">

  <div class="search-section">

    <div class="wrapper">

      <input ng-model="query" placeholder="Quick Search" class="text" id="search"></div>

  </div>

  <ul class="ngdata"><li data-ng-repeat="section in sections | filter:query | orderBy:'name'" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'first':$first, 'last':$last}">

      <a href="#/section/{{section.tid}}" class="section-link">

        <div class="wrapper">

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

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

        </div>

      </a>

    </li>

  </ul></div>

新建 articles.html 并把它放在 “templates” 文件夹下

<div class="article">

  <div class="search-section">

    <div class="wrapper">

      <input ng-model="query" placeholder="Quick Search" class="text" id="search"></div>

  </div>

  <ul class="ngdata"><li ng-repeat="article in articles | filter:query | orderBy:'title'" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="{'first':$first, 'last':$last}" prism="">

      <div class="wrapper">

        <div class="articles">

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

          <div class="description" ng-bind-html="renderHtml(article.body)"></div>

        </div>

      </div>

    </li>

  </ul></div>

两者的最主要的区别是用ng-bind-html渲染html的方式，还有我们写在控制器里的方法。

这就是它，它需要创建一个基础的demo版本，减去主题和其他一系列方法。当然你可以通过创建由你选择的分类过滤的文章来填充内容。  当然我还有一些关于在线demo设置的指示，但这是通过调用脚本来高亮代码通过 prism (注①) 和 键盘导航，这不是这篇教程的目的。

这里还有很多地方需要改进，一旦我们有了大量并发，影响到性能时，尤其需要考虑如何让这个应用规模化。

上网寻找更多的资源，尤其是下面这篇视频教学：

https://www.youtube.com/watch?v=p3zSQieBIe8

愿你能在这里得到帮助！

注：

    ①：这里不知该如何翻译，棱镜？可能是一种工具

 

译者按：

原文地址：https://www.zivtech.com/blog/binding-drupal-data-angularjs-step-step-tutorial

由于本人对该工具还不熟悉，可能有一些翻译得不好或者不对的地方，欢迎大家指出！

Mail: 604766233@qq.com

板块
Drupal 译文及原创分享
标签
翻译
JavaScript
Drupal 版本
Drupal 7.x

分类

最新话题