One Year with Angular

Table of Contents

Roughly one year ago I left baidu and joined a openstack startup. I was set to build a notification driven web application. At the very beginning it's basically a one man project. I cloud chose any language and framework as I want. I settled on nodejs and socket.io for real time bi-directional communication between server and client. But for front end stuff, there were simply too much choices. Although I've been building web apps with konckoutjs I decided to give Angularjs a try, it's very popular, which make it easier for us to hiring developers in the future.

Actually we've built two nontrivial single page app with angular. One of our project have approximately 6,000 lines of jade, and nearly 20,000 lines of coffeescript. Below is the approximate numbers of angular building blocks in that project:

directives 250
factories/services/providers 40
filters 20
controllers 110

Directives

We wrote a lot of directives, which large reduced the amount of jade code, actually jade itself is very terse compared to HTML. With directive, you can define your own tag, which will be expended to html by angular. Directive is not just a DSL for generating HTML, you can put logic into directives, and your application can be built by composing directives.

Coffeescript

Implicit return, simpler object notation and argument destructing makes it a really a good fit for angular. And also block string for inline template. But angular2 will use typescript anyway.

ui-router

I thought ui-router was amazing when I first learned the trick to trigger a modal when entering a state, the user refreshes the browser and the modal stays, or you can make a redirect and a modal pops out. And there are named views and state hierarchy. But months later, I use directives instead of named views, it's dead simple, and more easier to compose. I've also completely ditched state hierarchy in one project, due to the constantly changing application structure, you got a lot of broken links to fix. And now I avoid "persistent" modals as long as I can for performance issue, state transition is expensive. We are still using ui-router, but for new project, we might just use the new angular router, which is expected to be landed in angular 1.4.

Bootstrap Integration

There are two popular libraries for boostrap binding, ui-bootstrap from agular-ui team and AngularStrap. From the first glance, AngularStrap was more actively developed, and looked more slick. But later, I found some issues with AngularStrap, some directives were poorly implemented, like dropdown and typeahead, and finally I migrated one project to ui-bootstrap. But ui-bootstrap has it's own problem too, it's moving too slow, supporting for angular1.3 sill not released yet. Now I found it not a good idea to have all those components bundled together, package dedicated to a single component would be more appropriate.

ng-annotate

Use ng-annotate for javascript minification, otherwise the script can't be mingled, unless you specified the dependencies for each controller/factory/etc explicitly, that's not cool.

Project Layout

At first I put all controllers in controllers/, templates in views/. As the project grows, I moved the corresponding controller and template into their own directory gradually. And that seems to be very close to angular2's concept of component.

Some Gotchas for Starters

  • the "dot rule"
  • ng-repeat, ng-if creates scope, use $parent
  • $scope.$apply or $timeout

Angular 2

I'm still not sure how can we migrate our projects to angular2 in the future. There are several issues, we use jade for template, but it won't work with angular2. We won't ditch jade and I don't think we will switch to typescript either. Maybe we just stick with angular 1.x.