@rob_rich
#nodeaz
#angularjs

Angular:

a brief introduction


by Rob Richardson

@rob_rich

http://robrich.org/

September 16, 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.0.7/angular.min.js"></script>
	<script src="script.js"></script>
  </head>
  <body>
	<div ng-controller="HelloCntl">
	  Your name: <input type="text" ng-model="name" value="World"/>
	  Hello {{name}}!
	</div>
  </body>
</html>
					

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

Data Binding Awesomeness

  • html:
  • ng-*
  • {{markup}}
  • in controller (javascript):
  • $scope.property
  • No event wire-up code

If all you need ...

... is live data binding,

you can fall asleep now

Reusable web widgets: "directives"

What I want:


<rating data-bind="score"></rating>

Reusable web widgets: "directives"

What I get:


<div id="better-be-unique">
  <img src="this/gets/redundant.png" />
  <img src="this/gets/redundant.png" />
  <img src="this/gets/redundant.png" />
  <img src="this/gets/redundant.png" />
  <img src="this/gets/redundant.png" />
  <script>
	function polute_the_global_scope(e) {
	  if (e.target === 'one') {
	    return 1;
	  } else if (e.target === 'two') {
	    return 2;
	  } else if (e.target === 'redundant') {
	  	return 3;
	  } else ...
	}
  </script>
</div>

Directives

HTML:


<div id="better-be-unique">
  <img src="star_{{isOn(1)}}.png" ng-click="setScore(1)" />
  <img src="star_{{isOn(2)}}.png" ng-click="setScore(2)" />
  <img src="star_{{isOn(3)}}.png" ng-click="setScore(3)" />
  <img src="star_{{isOn(4)}}.png" ng-click="setScore(4)" />
  <img src="star_{{isOn(5)}}.png" ng-click="setScore(5)" />
</div>

Directives

JavaScript:


  angular.module('themodule', [])
    .directive('rating', function () {
      return {
        restrict: 'EA',
        templateUrl: '/path/to/rating.html',
        scope: {
          score: "="
        },
        controller: function($scope/*, $element, $attrs, $transclude*/) {

          $scope.click = function (val) {
            $scope.score = val;
          }

          $scope.isOn = function (val) {
            return (val <= $scope.score) ? 'on' : 'off';
          }

        }
      };
    });

Directives

What I get:


<rating score="score"></rating>
<script src="rating.js"></script>

SOLVED!

What else do I get?

  • Dependency Injection
  • Testability
  • In-page Routing (push state)
  • Animations (plugins or 1.2)
  • AJAX framework
    • bind to REST
    • bind to AJAX promise

What else do I get?

  • Separation of Concerns
    • Service
    • Factory
    • Provider
    • Value

What about other controls?

AngularJS

A framework for the modern web

http://docs.angularjs.org/api

  • JavaScript MVC/MVVM-like framework
  • Written and maintained by Google
  • For writing browser-based apps -- SPAs
  • Declarative data binding in HTML
  • Optimized for developer happiness

Questions?

@rob_rich

http://robrich.org/