我一直在寻找一种方法来实现这一目标,我在这里发布了我的搜索结果。
首先创建您的新模块:
yo meanjs:angular-module admin
yo meanjs:angular-route adminHome
? Which module does this route belongs to? admin
? What do you want your route path to be? admin-home
? What do you want to call your view? admin-home
? What do you want to call your controller? AdminHome
create public/modules/admin/config/admin.client.routes.js
create public/modules/admin/controllers/admin-home.client.controller.js
create public/modules/admin/tests/admin-home.client.controller.test.js
create public/modules/admin/views/admin-home.client.view.html
完成第一步后,请检查继续:http://localhost:3000/#!/admin-home http://localhost:3000/#!/admin-home您有效地加载了生成的视图。
然后你开始生成你的快速路线和控制器:
yo meanjs:express-route admin
yo meanjs:express-controller admin
现在乐趣来了。这个想法是告诉 Express 在你点击时加载不同的布局视图集/admin
//Content of app/controllers/admin.server.controller.js
'use strict';
exports.index = function(req, res){
res.render('admin-index', {
user: req.user || null,
request: req
});
};
//Content of app/routes/admin.server.routes.js
'use strict';
module.exports = function(app) {
var admin = require('../../app/controllers/admin.server.controller');
app.route('/admin').get(admin.index);
};
复制粘贴:
app/views/index.server.view.html -> app/views/admin-index.server.view.html
app/views/layout.server.view.html ->app/views/admin-layout.server.view.html
Edit app/views/admin-index.server.view.html
:
{% extends 'admin-layout.server.view.html' %}
{% block content %}
<section data-ui-view></section>
{% endblock %}
Edit app/views/admin-layout.server.view.html
:
[...]
{% for jsFile in jsFiles %}<script type="text/javascript" src="/{{jsFile}}"></script>{% endfor %}
[...]
注意前面的“/”{{jsFile}}
最后的接触。因为您的浏览器现在正在加载 /admin 而 / 您需要告诉 ui-router 模板的路径是绝对的而不是相对的。
//Content of public/modules/admin/config/admin.client.routes.js
'use strict';
//Setting up route
angular.module('admin').config(['$stateProvider',
function($stateProvider) {
// Admin state routing
$stateProvider.
state('admin-home', {
url: '/admin-home',
templateUrl: '/modules/admin/views/admin-home.client.view.html'
});
}
]);
注意 templateUrl 内容开头的“/”
现在测试您的管理区域,方法是:http://localhost:3000/admin/#!/admin-home