Drupal8中使用AngularJS

  1. Drupal8中使用AngularJS

Drupal8中使用AngularJS

首先我们需要一个基础模块引入并启动angular

OK,先创建一个模块,我们起名叫cloud_angular

cloud_angular中,我们新建目录libs,里面存放所有与angular相关的库文件,js目录,里面存放angular的启动js:app.js

接着,定义angular的library,就像这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
cloud_angular.angular:
version: VERSION
css:
angular:
libs/angular-loading-bar/build/loading-bar.css: {}
js:
libs/angular/angular.js: {}
libs/angular-animate/angular-animate.js: {}
libs/angular-ui-router/release/angular-ui-router.js: {}
libs/oclazyload/dist/ocLazyLoad.js: {}
libs/angular-loading-bar/build/loading-bar.js: {}
js/app.js: {}
dependencies:
- core/drupalSettings
- core/drupal

保存为cloud_angular.libraries.yml文件

最后,打开cloud_angular.module,实现pagehook,引入上面定义的库,就像下面这样:

1
2
3
4
5
6
/**
* Implements hook_preprocess_page().
*/
function cloud_angular_preprocess_page(&$variables) {
$variables['#attached']['library'][] = 'cloud_angular/cloud_angular.angular';
}

这样我们在启用cloud_angular模块的时候,就全局加载了angular


好了,有了angular的启动支撑模块,接下来看下其它模块怎么使用angular

举个例子,用户模块,命名:cloud_user,我们定义一个路由profile/console,用于显示用户的控制台首页(俗称dashboard)

按照drupa8的路由定义规则,我们需要新建一个文件cloud_user.routing.yml定义路由:

1
2
3
4
5
6
7
cloud_user.console:
path: '/profile/console'
defaults:
_controller: '\Drupal\cloud_user\Controller\UserController::console'
_title: '控制台首页'
requirements:
_permission: 'access content'

接着,在cloud_user模块下新建src目录及其子目录Controller,里面存放路由指定的控制器文件UserController.php,就像下面这样:

cloud_user模块目录解构

控制器代码如下:

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
<?php
/**
* @file
* @contains \Drupal\cloud_user\Controller\UserController.
*/
namespace Drupal\cloud_user\Controller;
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Database\Connection;
use Symfony\Component\DependencyInjection\ContainerInterface;
class UserController extends ControllerBase {
protected $database;
protected $userPath;
function __construct($database) {
$this->database = $database;
$this->userPath = drupal_get_path('module', 'cloud_user');
}
public static function create(ContainerInterface $container) {
return new static(
$container->get('database')
);
}
function console() {
$build = array(
'#theme' => 'cloud_common',
);
// 这里我们把用户模块的路径传递到前端
$build['#attached']['drupalSettings']['userPath'] = $this->userPath;
return $build;
}
}

cloud_common的theme模版cloud-common.html.twig统一输出是

1
<div ui-view></div>

用于angular前端路由加载模版

接着,在cloud_user模块下新建scripts目录及其子目录controllerdirective,对了,在scripts目录下新建文件user.route.js,用于定义用户模块的前端路由:

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
(function(angular, drupalSettings) {
'use strict';
/**
* @name verycloud
* @description all user's ng route here.
*
*/
var verycloud = angular.module('verycloud');
verycloud.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('dashboard', {
url: '/profile',
templateUrl: 'dashboard/container.html',
resolve: {
loadMyFile: function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'console',
files: [
drupalSettings.userPath + '/scripts/directive/header/header.js'
]
})
}
},
abstract: true
})
.state('dashboard.console', {
url: '/console',
templateUrl: 'dashboard/dashboard.html',
controller: 'ConsoleCtrl',
resolve: {
loadMyFile: function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'console',
files: [
drupalSettings.userPath + '/scripts/controller/consoleController.js'
]
})
}
}
});
}]);
})(angular, drupalSettings);

接下来将这个路由文件定义成库,保存为cloud_user.libraries.yml

1
2
3
4
cloud_user.user_route:
version: VERSION
js:
scripts/user.route.js: {}

最后,回到angular的支撑模块cloud_angular,打开cloud_angular.module文件,在hook_page中引入用户模块的js库文件,就像下面这样:

1
2
3
4
5
6
7
/**
* Implements hook_preprocess_page().
*/
function cloud_angular_preprocess_page(&$variables) {
$variables['#attached']['library'][] = 'cloud_angular/cloud_angular.angular';
$variables['#attached']['library'][] = 'cloud_user/cloud_user.user_route';
}

启用cloud_user模块,尝试访问’profile/console’

script>