@rob_rich

Welcome to Angular

by Rob Richardson

@rob_rich

http://robrich.org/

November 15, 2013

About Me

Rob Richardson is principal of Richardson & Sons, LLC, builder of ASP.NET and Node solutions for small- to medium-sized businesses. Rob has a BFA and MSCIS, and has been building software in .NET and HTML for over a dozen years, and frequently enjoys sharing his passion for software development at user groups and community events. Follow Rob at @rob_rich or on his blog at http://robrich.org/.

What if?

What if web technology kept up with the web?

What if web programming was fun?

Angular Technologies

Data binding

Web parts

Hello Angular

Your name:

Hello {{hello_name}}!

Hello Angular

http://docs-angularjs-org-dev.appspot.com/cookbook/helloworld


<html ng-app>
  <head>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
	<script src="script.js"></script>
  </head>
  <body>
	<div ng-controller="HelloCntl">
	  Your name: <input type="text" ng-model="name" />
	  Hello {{name}}!
	</div>
  </body>
</html>
					

function HelloCntl($scope) {
  $scope.name = 'World';
}

What is Angular

Angular is an MVC framework for building
Single Page Applications (SPA)

What is Angular

Angular is a framework for building
thick clients in a browser

Let's go build one

angular.js script reference

<script src="angular.js"></script>

Use Google's CDN if possible

ng-app attribute

<html ng-app>

Angular app from this dom node inward

Only one per web page

Typically put on <html> but it could be on any node

Data Binding

<input ng-model="name" />
{{name}}

ng-model data binds to input control's value

{{...}} binds to markup

Don't need to declare the view model first,
just bind to it and Angular will do the right thing.

Controller

HTML:

<div ng-controller="TheController">

JS:

function TheController($scope) {
  $scope.name = 'World';
}

Controller for each view (widget)
Multiple controllers allowed on the page

$scope is the view model -- the data binding context

$scope is the single source of truth
not the DOM
No left-right data synchronization code
Yay!

ng-repeat

HTML:

<li ng-repeat="person in people | orderBy:'name'">
  {{person.name}}: age {{person.age}}
</li>

JS:

function TheController($scope) {
  $scope.people = [
    {name:'John',age:20},
    {name:'Paul',age:23},
    {name:'George',age:28},
    {name:'Ringo',age:30}
  ];
}

Iterate through an array

Optionally sort

ng-repeat is on element to duplicate,
not parent node

ng-click

HTML:

<a href="#" ng-click="doWork()" />

JS:

function TheController($scope) {
  $scope.doWork = function () {
    $scope.someval = 'new val';
  };
}

bind a link or button to a controller function

ng-show, ng-hide

HTML:

<div ng-show="isActive">shown if active is true</div>

JS:

function TheController($scope) {
  $scope.isActive = true;
}

bind a link or button to a controller function

ng-class

HTML:

<div ng-class="myVar">styled</div>

JS:

function TheController($scope) {
  $scope.myVar = 'selected';
}

conditionally apply a CSS class

ng-class

HTML:

<div ng-class="{selected: myVar===3}">styled</div>

JS:

function TheController($scope) {
  $scope.myVar = 3;
}

conditionally apply a CSS class

$watch

JS:

function TheController($scope) {
  $scope.$watch('name', function() {
    $scope.greeting = $scope.salutation + ' ' + $scope.name + '!';
  });
}

watch a value and run the function when it changes

events

JS:

function TheController($scope) {
  $scope.$on('something', function(args) {
    $scope.message = 'something happened';
  });
  // ...
  $scope.$emit('something', {pass:'arguments'});
}

publish and subscribe to events

Time to level up

Modules

HTML:

<tag ng-app="someModule">
<tag ng-controller="SomeController">

JS:

angular.module('someModule', [])
  .controller('SomeController', function ($scope) {
    $scope.somemodel = "value";
  });

a module is a container -- a namespace

Service / Factory / Provider / Value

JS:

angular.module('someModule', [])
  .factory('someFactory', function () {
    var serviceInstance = {
      someMethod: function () {
        // do something
      }
    };
    return serviceInstance;
  });

move business logic out of controllers

Service / Factory / Provider / Value

  • Service: it is the instance
  • Factory: returns an instance
  • Provider: returns a function that can get an instance
  • Value: a singleton JSON object of configuration

Using a service

JS:

angular.module('someModule', ['otherModule'])
  .factory('someFactory', function () { ... })
  .controller('SomeController', function ($scope, someFactory) {
    $scope.somemodel = "value";
  });

Automatic Dependency Injection
In the box!

Level up again

Custom Directives

JS:

angular.module('themodule', ['some','dependencies'])
  .directive('myRating', function () {
    return {
      restrict: 'EA', // element or attribute
      templateUrl: '/path/to/file.html', // or template: '<some markup>'
      scope: {
        score: '=', // two-way binding between outer and inner scope
        title: '@', // one-way binding into directive
        val: '&' // one-way binding out of directive
      },
      controller: function($scope/*, $element, $attrs, $transclude*/) {
        // stuff
      }
    };
  });

HTML:

<my-rating score="score" title="the title" />

Routing

HTML:

<script src="#angular-route.js" />

JS:

angular.module('myModule', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'index.html',
        controller: IndexController
      })
      .when('/book/:bookId', {
        templateUrl: 'book.html',
        controller: BookController
      })
      .otherwise({redirectTo:'/'});
  });

HTML:

<a href="#/book/gatsby">click me</a>

Resources

Questions?

@rob_rich

http://robrich.org/