Intro to Angular

AN INTRODUCTION This headline is entirely un-necessary Thursday, December 6,
12

What is AngularJS? Angular is an application framework MVC Architecture,
because that’s sexy One stop shopping (No external dependancies) Focused on No need to manipulate the DOM (... for most cases) Basically Knockout.JS on steroids Thursday, December 6, 12

How is Angular Different? AngularJS Backbone Templates are HTML ...
What is a template? DOM handled internally Bling Function ($) Needed Services provide common functions You get this from jQuery (usually) Two-Way Data Binding You made your bed... Strong direction in usage patterns Fundamentally agnostic Dependency management (sort of) That’s what Require.JS is for Localization ... No, really, what’s a template? Internationalization Fuck you, this election is rigged. IE9+ Only (IE8 with a little help) Hah! Take that! Templates cannot be precompiled Require.JS + EJS solves this 78k miniﬁed 30.6k miniﬁed (Zepto) Thursday, December 6, 12

So, Backbone.JS sucks? Angular can be heavy handed Backbone’s agnostic
nature allows more third party optimizations Both focus on “data-on-wire” and crud, backbone provides helpers if you use rails style endpoints. Depends on how much control you want to give your framework Thursday, December 6, 12

The Basics The meat an potatoes of angular app can
be divided into 5 basic parts Modules Container for services, ﬁlters, directives. Directives <jesus serious=”yes”>Deﬁne your own grammar!</jesus> Services So I hear you want to create some common logic Filters {{ goosebumps | ermagerd }} Controllers This view really should do something Thursday, December 6, 12

Your first angular app <body ng-app> <form novalidate> <input ng-model=”name”>
<p>{{ name | uppercase }} ERS MAH FAVRIT PERSERN</p> </form> </body> Thursday, December 6, 12

ROUND 2... FIGHT <body ng-app> <script> function MyController($scope) { $scope.names
= [“It’s, Tilly, bitch”]; $scope.addOne = function() { $scope.push($scope. addName); }; } </script> <div ng-controller=”MyController”> <input type=”text” ng-model=”addName”> <input type=”button” ng-click=”addOne()”> <div ng-repeat=”name in names”>{{name}}</div> </div> </body> Thursday, December 6, 12

Dynamic web needs routing! <body ng-app=”MyProject”> <script> angular.module('MyProject', [‘MyFilters’, ‘MyServices’]).
conﬁg(function($routeProvider) { $routeProvider. when('/', {controller: C1, templateUrl:'ctrl1.html'}). when('/:reportId', {controller:C2, templateUrl:'ctrl2.html'}). otherwise({redirectTo:'/'}); }); </script> <div ng-view></div> </body> Thursday, December 6, 12

I want more filters! angular.module('MyProject', []). ﬁlter(‘ermagerd’, function() { return
function (input, uppercase) { var output = input.replace(/[aiou]/i, “e”).replace(/l/i,”r”); return output[uppercase ? “toUpperCase” : “toLowerCase”](); } }); {{ fall | ermagerd }} = “ferr” {{ fall | ermagerd:true }} = “FERR” Thursday, December 6, 12

But what about services? Great, but complicated, and really only
useful for wiring up a backend. (awe.sm APIs anyone?) Very hard to fit on a keynote slide Great for providing singletons to your entire application Lazy creation (per injector) Thursday, December 6, 12

... You mentioned something called a directive? Custom HTML grammars!
Also very difficult to fit on a slide (See next for example) Basically a controller that is created by a tag Lets you keep the content too! Thursday, December 6, 12

1. .directive('tabs', function() { 2. return { 3. restrict: 'E',
4. transclude: true, 5. scope: {}, 6. controller: function($scope, $element) { 7. var panes = $scope.panes = []; 8. 9. $scope.select = function(pane) { 10. angular.forEach(panes, function(pane) { 11. pane.selected = false; 12. }); 13. pane.selected = true; 14. } 15. 16. this.addPane = function(pane) { 17. if (panes.length == 0) $scope.select(pane); 18. panes.push(pane); 19. } 20. }, 21. template: 22. '<div class="tabbable">' + 23. '<ul class="nav nav-tabs">' + 24. '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ 25. '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + 26. '</li>' + 27. '</ul>' + 28. '<div class="tab-content" ng-transclude></div>' + 29. '</div>', 30. replace: true 31. }; 32. }) Thursday, December 6, 12

How does i1[80]n work? $locale (country codes!) Complex set of
filters for translating currency, pluralization, etc. Filters can be created using rule sets common across various number and word types (zero, one, many, etc) Me and the docs on this: TL;DR, RTFM. Thursday, December 6, 12

Bennett’s Favorite Part! MOTHER FUCKING TESTING! E2E testing! It’s built
in. It’s robust (See: SHIT THAT’S A LONG ASS MANUAL) Unit testing Also built in. Same tools. If you want reports, get them yourself I’ve never used it (See previous TL;DR RTFM) Thursday, December 6, 12

Questions? http://angularjs.org Thursday, December 6, 12

Intro to Angular

Intro to Angular

Bryon Vandiver

More Decks by Bryon Vandiver

Other Decks in Technology

Featured

Transcript

AN INTRODUCTION This headline is entirely un-necessary Thursday, December 6,

What is AngularJS? Angular is an application framework MVC Architecture,

How is Angular Different? AngularJS Backbone Templates are HTML ...

So, Backbone.JS sucks? Angular can be heavy handed Backbone’s agnostic

The Basics The meat an potatoes of angular app can

Your first angular app <body ng-app> <form novalidate> <input ng-model=”name”>

ROUND 2... FIGHT <body ng-app> <script> function MyController($scope) { $scope.names

Dynamic web needs routing! <body ng-app=”MyProject”> <script> angular.module('MyProject', [‘MyFilters’, ‘MyServices’]).

I want more filters! angular.module('MyProject', []). ﬁlter(‘ermagerd’, function() { return

But what about services? Great, but complicated, and really only

... You mentioned something called a directive? Custom HTML grammars!

1. .directive('tabs', function() { 2. return { 3. restrict: 'E',

How does i1[80]n work? $locale (country codes!) Complex set of

Bennett’s Favorite Part! MOTHER FUCKING TESTING! E2E testing! It’s built

Questions? http://angularjs.org Thursday, December 6, 12