0

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!

aikorei
  • 570
  • 1
  • 7
  • 23
  • The `angular.js` should be included automatically by a template engine of Express. – runTarm Aug 16 '14 at 10:16
  • @runTarm it probably was, but how does that show up in my index.html file? How do I "pull" Angular in so I can use it's features? There's something I'm not getting. – aikorei Aug 16 '14 at 15:11
  • Are you saying the angular.js is really missing in the default page of a fresh meanjs install? It should be included by default, if not there might be something wrong. – runTarm Aug 17 '14 at 15:18
  • @aikorei jast run manually in terminal `bower install` after `npm install`. That's work, I've tested. – khex Aug 18 '14 at 22:52

3 Answers3

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.

khex
  • 2,778
  • 6
  • 32
  • 56
  • These were all present in my folder. It turns out my question was answered by this SO post: http://stackoverflow.com/questions/23398485/uncaught-referenceerror-angular-is-not-defined-mean-io – aikorei Aug 18 '14 at 15:32
0

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, i.e.:

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

Community
  • 1
  • 1
aikorei
  • 570
  • 1
  • 7
  • 23
0

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

user3681587
  • 566
  • 5
  • 12