I mentioned in a recent post that I’ve been working with a cool piece of technology called AngularJS recently. It’s been a long, long time since I’ve done any regular web work - but since picking up Angular, I can honestly say that building web applications has never been more enjoyable.
As a developer, I found the documentation reasonably sucky - it has a quick tutorial and jumps straight into API documentation. There’s no guide on overall architecture, which makes understanding how you should be building your app a bit difficult.
What follows is my quick and dirty list of notes for developers looking at using Angular in their app:
- Everything is a module - Every piece of code in AngularJS is attached to a module. - Modules can express dependencies on other modules. - Your application is a module - Modules can contain Services, Controllers and Directives
- Dependency Injection
- Angular provide dependency injection for all prototypes
- You have two options for specify a dependency:
- Lazily, by ensuring the name of the variable name in the signature matches the name of a service; or
- Explicitly, by providing an array of the service names followed by the function with arbitrary variable names
- Services - Services are singletons and are lazily created - so you’ll need to reference it in the app if you need them to be instantiated
- Controllers - Controllers are exactly what they sound like, if you need logic to glue the view model to service actions - this is where that lives
- Filters
- Filters can exist locally to a controller or globally on a module
- Be wary of the built-in
filter
module, if you use the string comparison this is actually a substring match (this has caught me out badly before). You probably want to make a global filter using angular.equals in these cases. - Directives - If you need a common Controller/Template to render the same object in your app, chances are you can bundle it together as a directive - Even if you’re not at the point where you need to use directives, it’s worth reading the AngularJS Directives Guide to understand how the Angular parser resolves directive names (and why the documentation shows directives in camelCase even though the examples you use dash-delimited).
- You need the extras
- Downloading AngularJS isn’t enough for single-page development, you’re likely going to need the following modules:
-
angular-route.js
- Provides thengRoute
module providing page routing for a single-page application -angular-resource.js
- Provides thengResource
module allowing you to easily create services backing onto REST interfaces
- Downloading AngularJS isn’t enough for single-page development, you’re likely going to need the following modules:
-
- Understand that AngularJS is javascript - No, really. If you build your entire site it won’t be indexable by search engines unless you prerender out a static copy. Read more here
I hope this is useful to other people starting out.