MeanJS-将Angular集成到index.html文件中

Question

I'm coming from a LAMP background, and as a learning project I downloaded MEAN.JS so I can dive into the MEAN stack. I got the whole thing running, but I feel like I'm missing something...

I followed all of the steps at http://meanjs.org/generator.html , got Mongo running, got my server running, etc. My index.html file loads on localhost:3000 and life is good.

So in my mind, I'm going down the checklist...

MongoDB - Check (running after executing mongod.exe).

Node - Check (server is running after executing grunt).

Express - Check (tied to Node as server).

Angular - ....??

I see that installing MEAN.JS installed several folders for Angular, but I don't think my index.html file is magically "working" for Angular. In fact, to get Angular working, I had to do it the good old fashioned way in my head element:

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

So what did MEAN.JS actually do here? And how should I be integrating Angular if not this way? I'd appreciate any help here on this.

Thanks!

Answer 1

Angular best practices is to load scripts not in the HEAD, but in the end of documenet before the tag. Scroll to the end of your html file, maybe it's here.

    !-- 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>

If <script src="lib/angular/angular.js"... is not here check meanJsFolder/public/lib for the presence of these libraries

\angular
\angular-animate
\angular-bootstrap
.......
\bootstrap
\jquery

If lib folder is empty - something happens with Bower - package manager for frontend. It installs all angular libraries.

Answer 2

It turns out my question was answered here:

Uncaught ReferenceError: angular is not defined - Mean.IO

In short, I opened /public/lib/bootstrap/ and found my bower.json file. I added in the lines, noted in the above link, ie:

  {
  "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"
  }

Then ran bower update and my page loaded.

Answer 3

Enter "bower install" in the CLI. That will install the angular library and place it in its designated directory.