Angular 101




Joe LeBlanc
@jlleblanc

slid.es/jlleblanc/angular-101

About Joe


  • Frontend/Backend JavaScript developer
  • Works for Sears Holding Corporation
  • lynda.com author: lynda.com/JosephLeBlanc


Where are we and how did we get here?

In the beginning...

  • Nobody wrote JavaScript
  • Everybody did server side programming
  • Ok, so we wrote a little bit of JavaScript

<input type="submit" value="Register" onclick="return validateMyForm();" />

jQuery!

  • Suddenly, everyone was a frontend developer!
  • Everybody went crazy with jQuery!
  • Really crazy!
$('#form').submit(function () {
  $.ajax({
    url: 'serverside.php',
    type: 'post',
    data: {
      name: $('#name').val(),
      username: $('#username').val(),
      password: $('#password').val()
    },
    success: function (data) {
      $('#form').hide();
      $('#otherpart').show().html('Hi ' + data.name + '!');
    }
  });
  return false;
});

OK, let's use JavaScript for real

  • Homegrown "frameworks": App global variable
  • Write all of the logic in the global
  • Do all of the DOM manipulation separately
  • Still using jQuery, but using it more sparingly


And then there were frameworks.

Backbone

  • Helpful
  • Minimal
  • But too minimal
  • DOM handling and Views too abstract
  • More like a framework for building your own framework

Knockout

  • Fantastic tutorial
  • Data bound to DOM elements
  • "Forget about the DOM!" Wait a second...
  • Observe an observable and crash the browser!

Angular

  • Hated it
  • We were refactoring a project from jQuery
  • We still had an awful lot of legacy code mixed in
  • I couldn't figure out how to manipulate the DOM
  • Angular had its own vocabulary

...but Angular

  • Eventually, I started to get the hang of it
  • Clean data binding
  • Embraces the DOM, rather than abstracting it


So how would I approach Angular Now?

Opposite of jQuery

  • You don't find elements and then do things
  • You tell elements how they behave up front
  • Data is bound to elements and their children

Don't look for a view object

  • Angular uses MVC principles
  • ...but there are no "Model" or "View" objects
  • Controllers are initially the most visible part

Get ready for jargon

  • Directives
  • Scopes
  • Modules
  • Filters
  • Services
  • Injector

Leave Native browser events behind

  • You're at the mercy of Angular's implementations
  • ...but you probably don't need the native events
  • Leave jQuery DOM event handling behind entirely


That all sounds amazing, where do we start?


Unfortunately, you can't really learn Angular one line at a time.

(Not that "Hello World" teaches you anything.)

Tea example

<html ng-app>
<head>
  <title>Teas</title>
  <script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript" src="teas.js"></script>
</head>
<body>
  <div ng-controller="TeasCtrl">
    <ul>
      <li ng-repeat="tea in teas">{{tea}}</li>
    </ul>
  </div>
</body>
</html>

TEA Example

function TeasCtrl ($scope) {

  $scope.teas = [
    'Black',
    'Green',
    'Oolong'
  ];

}

Events

<div ng-controller="TeasCtrl">
  <ul>
    <li ng-repeat="tea in teas" ng-click="order(tea)">{{tea}}</li>
  </ul>
  <h2>Ordered</h2>
  <ul>
    <li ng-repeat="order in ordered">{{order}}</li>
  </ul>
</div>
...

Events

 function TeasCtrl ($scope) {

  $scope.ordered = [];

  $scope.teas = [
    'Black',
    'Green',
    'Oolong'
  ];

  $scope.order = function (tea) {
    $scope.ordered.push(tea);
  };

}

Using Modules

<html ng-app="TeaApp">
...

Using modules

angular.module('TeaApp', ['appControllers']);

angular.module('appControllers', [])
  .controller('TeasCtrl', ['$scope', function ($scope) {
    $scope.teas = [
      'Black',
      'Green',
      'Oolong'
    ];

    // ...
  }]);

Filtering output

<html ng-app>
<head>
  <title>Teas</title>
  <script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript" src="teas.js"></script>
</head>
<body>
  <div ng-controller="TeasCtrl">
    <ul>
      <li ng-repeat="(tea, price) in teas">
        {{tea}}: {{price | currency}}
      </li>
    </ul>
  </div>
</body>
</html>

Filtering output

function TeasCtrl ($scope) {

  $scope.teas = {
    'Black': '1.75',
    'Green': '2',
    'Oolong': '2.5'
  };

}

This is just the beginning

  • Services provide access to browser features
  • Route requests from the URL
  • Access server-side resources
  • Write your own directives: <yourowntag>

Questions?

Thanks!

Angular 101

By jlleblanc

Made with Slides.com

Angular 101

  • 1,496