Using RequireJS With Angular
Since attending Fluent Conf 2013 and watching the many AngularJS talks and seeing the power of its constructs, I wanted to get some experience with it.
Most of the patterns for structuring the code for single page webapps, use some sort dependency management for all the JavaScript instead of using global controllers or other similar bad things. Many of the AngularJS examples seem to follow these bad-ish patterns. Using angular.module('name' , []), helps this problem (why don't they show more angular.module() usage in their tutorials?), but you can still end up with a bunch of dependency loading issues (at least without hardcoding your load order in your header). I even spent time talking to a few engineers with plenty experience with Angular and they all seemed to be okay with just using something like Ruby's asset pipeline to include your files (into a global scope) and to make sure everything ends up in one file in the end via their build process. I don't really like that, but if you are fine with that, I'd suggest you do what you are most comfortable with.
Why RequireJS?
I love using RequireJS. You can async load your dependencies and basically remove all globals from your app. You can use r.js to compile all your JavaScript into a single file and minify that easily, so that your app loads quickly.
So how does this work with Angular? You'd think it would be easy when making single page web apps. You need your 'module' aka your app. You add the routing to your app but to have your routing, you need the controllers and to have your controllers you need the module they belong to. If you do not structure your code and what you load in with Require.js in the right order, you end up with circular dependencies.
Example
So below for my directory structure. My module/app is called "mainApp".
My base public directory:
directory listing
Here is my boot file, aka my main.js.
javascripts/main.js
You'll notice how I am not loading my mainApp in. Basically we are bringing in the last thing that needs to configured for your app to load, to prevent circular dependencies. Since the Routes need the mainApp controllers and the controllers need the mainApp module, we just have them directly include the mainApp.js.
Also we are configuring require.js to bring in angular and angular-resource (angular-resource so we can do model factories).
Here is my super simple mainApp.js
javascripts/modules/mainApp.js
And here is my mainRoutes file:
javascripts/routes/mainRoutes.js
You will notice I require the listCtrl, but actually use its reference. Including it adds it to my mainApp module so it can be used.
Here is my super simple controller:
javascripts/controllers/listCtrl.js
So you'll notice, I have to include that mainApp again, so I can add the controller to it. I also have a dependency on Item, which in this case is a factory.The reason I include that, is so that it gets added to the app, so the dependency injection works. Again, I don't actually reference it, I just let dependency injection do its thing.
Lets take a look at this factory really quick.
javascripts/factories/Item.js
Pretty simple, but again, we have to pull in that mainApp module to add the factory to it.
So finally lets look at our index.html, most if it is simple stuff, but the key part is the ng-view portion, which tells angular where to place the view. Even if you don't use document in your bootstrap and opt to use a specific element, you still need this ng-view.
index.html
| Sent from Evernote |
No comments:
Post a Comment