在index.html文件中集成Angular

MeanJS - integrate Angular in index.html file

本文关键字：集成 Angular 文件 index html      更新时间：2023-09-26

我来自LAMP背景，作为一个学习项目，我下载了MEAN. js，所以我可以深入研究MEAN堆栈。我让所有的东西都运行起来了，但是我觉得我错过了一些东西。

我遵循http://meanjs.org/generator.html上的所有步骤，让Mongo运行，让我的服务器运行，等等。我的index.html文件加载到localhost:3000，生活很好。

所以在我的脑海里，我正在检查清单…

MongoDB - Check(运行完MongoDB .exe).

节点-检查(服务器在执行grunt后是否正在运行)。

Express - Check(绑定到Node作为服务器)。

Angular - ....??

我看到安装MEAN.JS为Angular安装了几个文件夹，但我不认为我的index.html文件神奇地"工作"于Angular。事实上，为了让Angular正常工作，我不得不在head元素中使用传统的方式:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

那么MEAN.JS到底做了什么呢?如果不是这样，我该如何对Angular进行积分呢?如果你能帮助我，我会很感激的。

谢谢!

Angular的最佳实践是不要在HEAD中加载脚本，而是在文档的末尾标签之前加载脚本。滚动到html文件的末尾，也许就在这里。

    !-- Application JavaScript Files -->
    <script src="lib/angular/angular.js" type="text/javascript"></script>
    <script src="lib/angular-resource/angular-resource.js" type="text/javascript"></script>
    <script src="lib/angular-animate/angular-animate.js" type="text/javascript"></script>
    <script src="lib/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>
    <script src="lib/angular-ui-utils/ui-utils.js" type="text/javascript"></script>
    <script src="lib/angular-bootstrap/ui-bootstrap-tpls.js" type="text/javascript"></script>
    <script src="config.js" type="text/javascript"></script>
    <script src="application.js" type="text/javascript"></script>
    .................//..............................
    <script src="modules/users/controllers/settings.client.controller.js" type="text/javascript"></script>
    <script src="modules/users/services/authentication.client.service.js" type="text/javascript"></script>
    <script src="modules/users/services/users.client.service.js" type="text/javascript"></script>
    <!-- Livereload script rendered -->
    <script src="http://localhost:35729/livereload.js" type="text/javascript"></script>
</body>

如果<script src="lib/angular/angular.js"...不在这里检查meanJsFolder/public/lib是否存在这些库

'angular
'angular-animate
'angular-bootstrap
.......
'bootstrap
'jquery

如果lib文件夹为空- Bower发生了一些事情-前端的包管理器。

我的问题在这里得到了回答:

Uncaught ReferenceError: angular is not defined -平均值。IO

简而言之，我打开/public/lib/bootstrap/，找到了我的小屋。json文件。我添加了上面链接中提到的行，即:

  {
  "name": "mean",
  "version": "0.3.0",
  "dependencies": {
    "angular": "latest",
    "angular-resource": "latest",
    "angular-cookies": "latest",
    "angular-mocks": "latest",
    "angular-route": "latest",
    "bootstrap": "latest",
    "angular-bootstrap": "0.10.0",
    "angular-ui-router": "#master"
  }

然后运行bower update，我的页面加载。

在命令行中输入" wer install"。这将安装angular库，并把它放在指定的目录中。

相关文章：