Question

我正在构建一个非常大的应用程序。我来自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')

视图/ 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')

视图/ 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，我应该有重定向的路由，但这样我需要一个然后加载部分，这是不按照我想要的方式工作。

路由波纹管是我使用的路由的一个非常简化的部分，实际上在实际应用中，它是为任务，客户端分开的......

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

Answer 1

首次使用MEAN堆栈时，这是一个常见问题。

这个想法是后端路由 vs 单页应用

因此，当我加载www.website.com:9000/tasks时，您可以让后端的Express加载tasks.jade文件，它会。页面将加载，现在您正在运行Angular应用程序。

进入Angular应用程序后，您正在使用 ngRoute ，这为您提供$routeProvider在页面之间路由的能力......您真正在做的是加载单个HTML页面没有初始内容，您的网址似乎是www.website.com:9000/tasks/#/，所以您可以做的就是这样说

.when("/about", {
  templateUrl: "partials/about",
  controller: "AboutController"
})

这只是说当你想要在你的特殊div标签中注入HTML的网址是www.website.com:9000/tasks/#/about时（可能看起来像<ng-view></ng-view>而且这个标签是放置HTML的地方。控制器是你想在这个HTML上运行的javascript允许你在具有相同函数名，变量等的两个不同控制器中使用javascript，而不必担心它们在HTML视图之间发生冲突。

回到这一点 - 您想要加载您需要的clients.jade文件＆＃34;刷新＆＃34;您必须转到Node.js Web服务的页面，在www.website.com:9000/clients询问/请求页面，它将加载整个Angular Single Page Application。这是不在$routeProvider部分完成，这是一个简单的<a href='/clients'></a>或javascript window.location('/client');

这更像是一个设计问题。您希望用户打开新页面还是让他们保持在同一页面上。如果您选择相同的页面，那么您应该在快速布局中拥有一个视图，并在一个Angular应用程序中完成所有操作。如果你进入新的页面路线，那么你就开始打破ng-routing的原因，只是制作一堆静态网页。也没有正确的答案，这实际上取决于你想要完成的事情

Answer 2

我明白了：它可以通过延迟加载来解决。

大型应用程序的平均堆栈路由

2 个答案: