【发布时间】：2016-11-25 22:34:36
【问题描述】：
我正在构建一个非常大的应用程序。我来自 PHP 和 jQuery，可能是我的逻辑错误，请帮助我。
我想有一个自定义的模块化结构，有前端的客户端文件夹和后端的服务器，具有分离的视图。 后端当然是在nodejs上搭建的，有mongoDb，jade会换成pug，暂时不是很重要。
让我们这样说吧。
├── client
│ ├── clients
│ │ ├── directives
│ │ ├── filters
│ │ ├── main.js
│ │ └── services
│ └── tasks
│ ├── directives
│ ├── filters
│ ├── main.js
│ └── services
├── server
└── views
├── clients
│ ├── form.jade
│ ├── index.jade
│ └── list.jade
├── clients.jade
├── index.jade
├── layout.jade
├── tasks
│ ├── form.jade
│ ├── index.jade
│ └── list.jade
└── tasks.jade
tasks.jade、clients.jade 和 index.jade 会有用于特定目的的 ng-view 和 js 文件。这个想法是不要在 index.jade 中加载所有 js 文件，因为我认为这会影响性能并且它会更干净。
视图中的 index.jade 如下所示：
extends layout
block body
h1 HTML5 Route Example
div(ng-view)
script(src='lib/angular/angular.js')
script(src='lib/angular-route/angular-route.js')
script(src='javascripts/app.js')
script(src='javascripts/services.js')
script(src='javascripts/controllers.js')
script(src='javascripts/filters.js')
script(src='javascripts/directives.js')
views/contact.jade
extends layout
block body
h1 HTML5 Route Example - contact
div(ng-view)
script(src='lib/angular/angular.js')
script(src='lib/angular-route/angular-route.js')
script(src='javascripts/app.js')
script(src='javascripts/contact/services.js')
script(src='javascripts/contact/controllers.js')
script(src='javascripts/contact/filters.js')
script(src='javascripts/contact/directives.js')
views/tasks.jade
extends layout
block body
h1 HTML5 Route Example - contact
div(ng-view)
script(src='lib/angular/angular.js')
script(src='lib/angular-route/angular-route.js')
script(src='javascripts/app.js')
script(src='javascripts/tasks/services.js')
script(src='javascripts/tasks/controllers.js')
script(src='javascripts/tasks/filters.js')
script(src='javascripts/tasks/directives.js')
这是我正在努力解决的部分：由于部分将被加载到特定页面的 ng-views，我应该有带有重定向的路由，但是这样我需要一个然后加载部分，这不起作用我喜欢的方式。
routing bellow 是我使用的路由的一个非常简化的部分，实际上在实际应用中，它是为任务、客户端、...分开的。
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: "partials/index",
controller: "MainController"
})
.when("/about", {
templateUrl: "partials/about",
controller: "AboutController"
})
.when("/contacts", {
templateUrl: "contacts/index",
controller: "ContactsController",
...
})
.when("/contacts/:id", {
templateUrl: "contacts/list",
controller: "ContactsController",
...
})
.when("/tasks", {
templateUrl: "tasks/index",
controller: "TasksController",
...
})
.when("/tasks/:id", {
templateUrl: "tasks/list.jade",
controller: "TasksController",
...
})
....
.otherwise( { redirectTo: "/" });
});
如果我这样使用，这些视图只能加载到views/index.jade，并且如前所述，我希望将它们分开，因此我尝试了这种方式 - 使用重定向，它不会在我看来，这是一种很好的做法：
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: "partials/index",
controller: "MainController"
})
.when("/about", {
templateUrl: "partials/about",
controller: "AboutController"
})
.when("/contacts", {
redirectTo: /contacts
})
.when("/contacts/:id", {
templateUrl: "contacts/list",
controller: "ContactsController",
...
})
.when("/tasks", {
templateUrl: "tasks/index",
controller: "TasksController",
...
})
.when("/tasks/:id", {
templateUrl: "tasks/list",
controller: "TasksController",
...
})
....
.otherwise( { redirectTo: "/" });
});
有不同的方法吗？我尝试了不同的方法，但都没有达到我想要的效果。
请注意，这是非常简化的介绍，我对堆栈非常陌生，仍在尝试学习最佳实践。
更新：这个应用程序已经在运行，可以在这里看到初稿（它还不是模块化的）https://github.com/tesis/meanstack
【问题讨论】：
标签： angularjs node.js pug mean-stack