AngularJS

a brief intro

Dave Ackerman

Why Angular?

Quick Wins

Out of the box, Angular makes you productive.

Client Side MVC


  • Model - Data that comes from your REST API. These are first class javascript objects.
  • View - Just HTML, extended with Directives. 
  • Controller - Fetches/sets data on your $scope. Queries the API. Provides client side validation.  Business logic. 

2-Way Data Binding

Fundamental principal within Angular

// controller $scope.name = "Dave" $scope.setName = function() {   $scope.name = "John" }
// view, no DOM manipulation<p>{{name}}</p><button ng-click="setName()">Change name to John</button>

Client Side Routing


  • Easy to use routing system.
  • Handles wildcards.

     $routeProvider
      .when('/cars', {
        templateUrl: 'views/cars.html',
        controller: 'MainCtrl'
      })      .when('/cars/:carId, {        ...      })      .otherwise({
        redirectTo: '/'
      });

Other Quick Wins

  • Simple dependency injection. 
  • Directives (custom declarative HTML extensions)
  • Services/Factories - extracting application logic.
  • Powerful filters for manipulating and displaying data.
  • Plays nice with Promises.
  • Super active, open source community.
  • Entire framework is extremely unit test friendly. 

You will write less code.

"Thinking in Angular"

say what?

jQuery 

is imperative

<div id="loginButton" class="button login">Login</div>


Angular 

is declarative

<sidebar-button action="login" />

Don't manipulate the DOM. 


Manipulate your data instead. 
Let Angular's data binding do the DOM work for you. 

Controller
Imperative behavior 

function MyCtrl ($scope) {  $scope.name = "Dave Ackerman";  $scope.setName = function(name) {    $scope.name = name;  }}


Scope
The glue 
 $scope.name = "Dave Ackerman"

View
Declarative 
<div ng-controller="MyCtrl">  Hello, {{name}}   <button ng-click="setName('John')">Set name to John</button></div>

Extract repeatable 

functionality and 

data into Services.


(will demo)


Let's write some stuff. 


  • Get bootstrapped by understanding file structure.
  • Use a built in Angular directive to display data.
  • Add some basic functionality on top of this data.
  • Understand Angular's basic routing system.
  • Extract app data into a Factory.
  • Write a very simple directive.


Resources

Made with Slides.com