ngPittsburgh - Angular: Models, Views and Whatever

ngPittsburgh - Angular: Models, Views and Whatever

A talk on the basics of Angular, what it's about, and some simple examples of it's use.


Ben Lesh

March 27, 2014


  1. 2.

    What is Angular? “AngularJS is a toolset for building the

    framework most suited to your application development”
  2. 3.

    That’s nice, but what is it really? • It’s a

    framework to implement two-way binding between the DOM and “plain old” JavaScript objects. • It’s a way to organize and encapsulate your JavaScript code base in a highly testable way. • It’s a tool to build single page applications. • It’s a way to extend HTML with custom functionality.
  3. 4.

    But what can it do for me, specifically? What are

    its features? • Dependency Injection - It’s built around an IOC container. • Model, View, Controller architecture - It helps you organize your code in a testable way. • HTML extensions (directives) - show and hide DOM elements, or create repeating lists with HTML attributes and other custom HTML markup. • Form Validation - Validate forms real-time in the browser using standard HTML5 validation attributes and some extended attributes built into Angular.
  4. 5.

    But what can it do for me, specifically? What are

    its features? • Output formatting - Use “filters” to format common outputs like dates, numbers and currency. • AJAX - Built in XHR wrapper • Promises - An A+ compliant Promise implementation • Create your own HTML elements - Use “directives” to create your own custom HTML elements, attributes and even comments that have custom behaviors.
  5. 6.

    But what can it do for me, specifically? What are

    its features? • Client-side routing - Enabling single-page applications by integrating with history state management • “Modules” - Creating reusable modules that can reference one another to help organize reusable code. • Development Tooling - Angular has a suite of development tools around it to help you build larger, more powerful JavaScript applications.
  6. 7.

    All you need to get started: “Hello World” <html ng-app>

    <script src=“angular.js”></script>
 Hello, {{name}}!
 <input type=“text” ng-model=“name”/>
  7. 8.

    What about the “Models, Views and Whatever” I was promised?

    Well, technically, at this point you’ve seen a “View”. … It’s just HTML. And we do have controllers, actually. ! Here’s one way to wire up a controller: ! Example: ! <div ng-controller=“MyCtrl”>! Who am I controlled by? {{controllerName}}! </div>
  8. 9.

    Services: Reusable, Injectable Goodness • Services are everywhere: $scope, $http,

    $location, $window, etc. • Services can be injected into any Angular component: Controllers, Filters, Directives, and other Services. • Services are “singleton” instances unless they return a constructor function (JavaScript class) • Services can get very advanced, they can be declared with Providers that can be configured in a module’s config() function (i.e. $routeProvider), they sometimes work in concert with a directive to allow controller code to trigger DOM manipulation without coupling the controller to the view.
  9. 10.

    Filters: A nice way to pretty- up your output •

    There are a variety of filters that Angular comes with out of the box: currency, date, number, orderBy, etc. • Filters generally do one of those things: • Format output for a view. • Filter/sort an array of outputs in the view. • Filters can also be used programmatically by getting them with the $filter service.
  10. 11.

    Directives: The most powerful tool in the arsenal • They

    do all of the work of binding the DOM to the model, and the model to the DOM. • They can be used to create custom behaviors for custom HTML elements, attributes and even comments. • Useful for binding to DOM events. • Reusable controls. • Directives are useful for creating polyfills (i.e. a placeholder attribute polyfill for IE9)
  11. 12.

    Directives: The most dangerous tool in the arsenal • You

    can do anything in a directive, and you can do it all in a number of ways. • You can do everything in a directive, and you can do it all at once. • If a new developer is going to shoot himself in the foot, it will be with a custom directive.
  12. 13.

    Directives: Protips for beginners • Try not to create directives

    at first. Get used to all of the built-in directives. There’s really enough there to account for 95% of what you’re going to need to do.
  13. 14.

    Directives: Protips for beginners • If you do identify the

    need to create a new directive, keep the directive simple. • Make sure that directive is doing one and only one thing (i.e. it sets up one event binding, or it’s one reusable control) • Remember: Directives can be hard to unit test, and hard to debug. If you find you have a logic-heavy directive, move that logic into a controller or service, which is easier to unit test.
  14. 16.

    What are Angular’s strengths? • Testability! Angular was built from

    the ground up on top of an IOC container. Meaning dependency injection is a default. This makes your components highly testable. • Strong, easy to discover API - A few simple component types, a consistent api style, and using “plain old” JS objects as models makes learning Angular a breeze. • It leverages HTML and the DOM for templating. No crazy new markup to learn (HandleBars or HAML for example). Just some attributes on HTML elements you already know.
  15. 17.

    What are Angular’s strengths? • No JQuery required, but works

    well with JQuery anyhow. Angular comes with JQLite, but will use JQuery instead if it’s detected. • Lots of built-in tools: Currency/Number filters, Localization, Templating, Animations, etc. • It has an awesome built-in expression engine. This means it can evaluate statements in the views, where something like HandleBars (Ember) isn’t as straight forward.
  16. 18.

    What are Angular’s strengths? • File Size! It’s much, much

    smaller than it’s contemporaries given everything it does, OOTB. Less than 1/2 of the size of Ember. • Community - Angular is backed by Google, and has a large and growing community. The biggest following for any library of it’s kind.
  17. 19.

    What are Angular’s weaknesses? • Configuration over Convention - Other

    frameworks, such as Ember.js are more convention-based, which means component names all fit into a certain convention, and that means large teams will be forced to stick to some basic standards. • The $digest loop - It’s very well optimized, but if you get to where you’re updating thousands elements with multiple of points of data, it’s not going to be as fast as some of it’s observer-pattern-based contemporaries (such as Ember.js)… This would be extremely rare, however, and can be completely avoided with a custom directive.
  18. 20.

    What are Angular’s weaknesses? • The IOC container is very

    primitive. If you reference a third party angular module that just happens to have a controller or service with the same name as one of yours, it will nuke yours. • Directives are really tempting to use because they’re super cool, but they’re “wild west” and can result in spaghetti.
  19. 21.

    We’re just scratching the surface There are a lot more

    topics to cover, which I hope this meetup will provide.
  20. 23.

    links from this talk • Github repository ngPittsburghTalkExamples •

    Slides: ngpittsburgh-angular-models-views-and-whatever