angularTalk



angularTalk

0 2


angularTalk

Slides for a short talk I gave on AngularJS

On Github sberan / angularTalk

AngularJS

HTML++

Templates Are

${awesome}

JSP

Hello, ${user}

Ruby

Hello, <%= user %>

ASP

Hello, <%= user %>

HTML/JavaScript

?????

AngularJS:

Hello, {{user}}

No Server

  • Rich client apps
  • Variables kept up to date as they change
  • Quick development loop

Two-way Binding

<input type="text" ng-model="user">
Hello, {{user}}
  • Inputs bind to model data
  • Display is updated as model is changed
  • Like a spreadsheet

Demo - Hello World

Advanced Templates

<ul>
  <li ng-repeat="item in [1,2,3]">
    {{item}}
  </li>
</ul>

Becomes:

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

Controllers

function MyController($scope) {
  $scope.greeting = 'Hello, world!';
}

 

<div ng-controller="MyController">
    {{greeting}}
</div>

Server Communication

function MyController($scope, $http) {
  $http.get('/greeting').success(function(data) {
    $scope.greeting = data;
  });
}

 

<div ng-controller="MyController">
  {{greeting}}
</div>

Controllers Example

No DOM Manipulation in Controllers

Directives

  • ng-model
  • ng-repeat
  • your-custom-directive

Elements Work Too

Custom directives can be used to create reusable components

<tabbar>
  <tab name="Home" src="index.html"></tab>
  <tab name="About" src="about.html"></tab>
  <tab name="Contact" src="contact.html"></tab>
</tabbar>

Directives Example

Testing

describe('Buzz Client', function() {
  it('should filter results', function() {
    input('user').enter('jacksparrow');
    element(':button').click();
    expect(repeater('ul li').count()).toEqual(10);

    input('filterText').enter('Bees');
    expect(repeater('ul li').count()).toEqual(1);
  });
});

Browser Support

  • Chrome, FF, Safari
  • IE 8+

W3C Spec:

  • Model Driven Views
  • Web Components

Thanks!

  • angularjs.org
  • github.com/angular/angular.js