【问题标题】:Having trouble to understand the MEAN.JS scaffolding and how Angular bootstraps难以理解 MEAN.JS 脚手架以及 Angular 如何引导
【发布时间】:2016-12-05 01:27:22
【问题描述】:

仍在学习 MEAN 的基础知识并从 article 创建了一个示例项目,然后决定使用一些脚手架工具为我的项目创建干净的文件夹结构,我遇到了 YEOMANMEANJS。使用npm install -g yonpm install -g generator-meanjsyo meanjs,一切都像魅力一样运作,我面前有一个项目。您可以下载整个MEAN project here。 尽管分析了一整天的代码结构,但很少有我不明白的事情:

  1. Angular 是如何在此处引导/加载的?整个角度 东西位于public 文件夹中,谁来引导它?
  2. app/views 文件夹中的一些 HTML 文件有什么用?特别是像 index.server.view.htmllayout.server.view.html 这样的文件正在服务 作为所有其他 Angular 视图文件/HTML 文件的模板。如何 他们甚至上钩了?
  3. application.js 是 AngularJS 的主要 应用程序文件,是谁将其变为现实?

我没有使用 GruntGulpKarma 之类的东西来进行应用程序的第一次切割,并且可能会决定稍后对其进行扩展,所以我如何删除这些以获得一个 MEAN 准系统架构,以便它的易于理解并开始使用。

【问题讨论】:

    标签: javascript angularjs node.js template-engine meanjs


    【解决方案1】:

    是的,您所有的前端内容都在 public 文件夹中,而您关于 app/views 文件夹的问题实际上是您的 Angular 如何引导的答案:

    • app/views 文件夹包含一个 html 页面,该页面将根据您请求到服务器的路由下载,因此如果您要求服务器呈现 localhost:3000/,它将为您提供 @987654327 @ 并且可能是 index.html 文件。你的布局文件可能有一个ng-app="YourApp",这就是引导角度的原因,它可能在你的application.js文件下,类似angular.module('YourApp')。请注意,'YourApp' 必须是布局/索引文件中指令 ng-app 的名称,这就是 angular 的设置方式。

    • 好的,知道您应该注意localhost:3000/home/ 将呈现layout.html 加上home.html 文件,等等。因此,这些app/views 页面中的每一个都应该有几个partials 来作为用户的SPA 应用程序,例如:localhost:3000/home#profile 将与localhost:3000/home#dashboard 是相同的视图页面,改变的是角度部分。

    【讨论】:

    • 非常感谢您的时间。在阅读 MEAN JS 文档后我的理解是:他们使用称为 Swig 模板引擎的东西将 Angular public 文件夹视图挂钩到 MEAN 堆栈中的 app/views。正如你所说,我的布局 HTML 文件没有像 ng-app="YourApp" 这样的东西。
    • @BeingSuman 您的布局文件没有任何 ng-app 引用,因为 MEAN.JS 0.3.3 使用 Angular manual bootstrap。如果你检查你的 application.js 文件,你会看到这一行:angular.bootstrap(document, [ApplicationConfiguration.applicationModuleName]);
    • @user3632710 谢谢。我留在 MEAN.JS 0.3.3 的原因是 AngularJS Module Sub-Generator 命令 $ yo meanjs:angular-module <module-name> 有一些问题。但是出于好奇提出一个问题:最新的 MEAN.JS 是否提供了更好的引导方法?
    • 最新版本仍然使用相同的手动引导。
    • process 是一个nodejs global object。您可以使用您的 gruntfile 来控制 NODE_ENV,例如,某些任务可能在测试环境中运行,而不是在开发环境中。
    猜你喜欢
    • 2017-10-14
    • 1970-01-01
    • 2018-09-16
    • 2016-05-04
    • 2014-05-17
    • 1970-01-01
    • 2011-01-20
    • 1970-01-01
    • 2010-10-28
    相关资源
    最近更新 更多