Another Intro to Angular

I’ve heard some pretty cool stuff about Angular– people seem to like it. MVC(ish) on the front end? Sounds awesome! Too bad the only thing I’ve done with it is make a todo list. There are a couple different types of parts in an angular application:

  • Controllers
  • Services
  • Directives
  • Factories

Each of these serve a different purpose, and can fulfill different roles throughout your application. Controllers manage actions like network requests, business logic for displaying elements, serving as an abstraction layer on top of other services, etc. whereas services are often used for managing data since they are singletons and only created once. Directives, on the other hand, are predominantly used for creating smaller, more isolated and testable components in your application. Factories are a bit of an outlier because they behave very similarly to services, however they’re really supposed to be used, as the name implies, as factories that create other objects similar to constructor functions in standard JS.

But that’s not all! This may seem well and good, but how do you fit your whole application into a couple different directives? For a while, this was pretty much as far as I got, and while this allows for some pretty cool self contained, single-purpose tools, there’s one key missing element that can take your Angular application from a tiny cluster of javascript to a fully fledged SPA. That key is a state controller. This allows you to not only define separate urls for various states of your application, but also handles transitioning and passing data between states. What’s cool about that? Well now you can define different views, and control and maintain a consistent state without the need for managing state on the back end.

mind blown

This can be done relatively simply by setting various ui-views in your markup! eg.

<body>
  <div ui-view="left-pane"></div>
  <div ui-view="right-pane"></div>
</body>

and then with your UI router you can do something like

app.config(function ($stateProvider) {
  $stateProvider
    .state("index", {
      url: "",
      views: {
        "left-pane": {
          template: "leftPage"
        },
        "right-pane": {
          template: "rightPage"
        }
      }
    });
});

This can make adding functionality like a sidebar or floating overlay both extremely easy and modular. Woohoo! Now combine this with using directives, controllers, services, and factories and you have yourself a fully fledged application!


Kyle Holzinger

I like to make stuff