2

I am currently working on my first AngularJS app and my directories are setup like this

app/
    assets/
        <css, js, images etc...>
    bower_components/
        <various bower things>
    components/
        <controllers, directives etc. in sub folder components>
    partials/
    app-controller.js
    app.css
    index-async.html
    index.html
node_modules/
    <various node things>
test/
    <karma>
bower.json
package.json

I am extremely confused as to how bower/node packages fit into this equation. I started this project using the angular-seed git repo, and have since modified the structure to match google's best practices structure.

The Angular seed project references files in the html by using "bower_components/component", but than it has the bower_components folder ignored in the .gitignore file. If the bower_components and the node components folders are ignored, than wouldnt it be bad to reference these in your html if they are not supposed to go along with the final product?

Metropolis
  • 6,542
  • 19
  • 56
  • 86

1 Answers1

3

This is because the command bower install will install all the dependencies for your project into that directory based on whats listed in your bower.json file.

There is no need to check in the dependencies in your git repo, just check in bower.json.

When installing new packages with bower the -s flag can be added to the command to persist the new package to the bower.json file. bower install -S <package>

Normally Grunt or Gulp has build task set up to run the bower install command for you when you build your project.

But do not reference libraries in the node_modules folder in your client side app, only on the server side.

But the same goes for node_modules the folder should be git ignored, but make sure to check in your packages.json file which is npm's (node package manager) bower.json equivelent.

furier
  • 1,934
  • 1
  • 21
  • 39
  • Ah....that makes more sense. So it is okay to reference these files than? Is this the same for node? – Metropolis Jun 06 '14 at 14:52
  • You will have to also install it with bower if you want to use it both on the client and server – furier Jun 06 '14 at 15:02
  • OHHH....So bower is for client side and node is for server side. Man you have helped me understand this whole thing so much better! How do I actually use it server side then? – Metropolis Jun 06 '14 at 15:03
  • You are correct, bower is for client side npm is for server side. Tho I dont know any usecases for requirejs on the server side with node as node has its own require implementation for requiring node modules. – furier Jun 06 '14 at 15:06
  • I actually was trying to find a way to dynamically load JS files with angularjs so that I was not loading every js file in the html file all at once. Is this wrong? – Metropolis Jun 06 '14 at 15:07
  • Angularjs is client side only, and has nothing to do with server side code, so you use bower if you want to use requirejs in your client app. But Angularjs have its own dependency injection system so you dont need requirejs. – furier Jun 06 '14 at 15:13
  • Okay so if it has its own dependency injection system, does that mean I should just load all of my controllers, directives etc in the html file and it will take care of the rest? Or is there another way to do that? I could not find documentation on this type of thing. – Metropolis Jun 06 '14 at 15:22
  • Thats the common way to do it. – furier Jun 06 '14 at 15:34
  • 1
    Did you change your comment or did i misread it? the dependency injection system in angular don't try to solve the problem of script load ordering or lazy script fetching. [Requirejs and Angularjs can live side by side...](http://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js) – furier Jun 06 '14 at 15:51
  • Im confused now lol. In your first comment you said that the common way to do it was load all controllers/directives etc in the html file, but then you pointed me to a link saying that using requirejs works well? – Metropolis Jun 06 '14 at 16:01
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55216/discussion-between-metropolis-and-furier). – Metropolis Jun 06 '14 at 16:08
  • BTW, -s is for silent. That needs to be capital -S. – Metropolis Jun 06 '14 at 16:27