Introduction to Angular
Download as PPTX, PDF0 likes685 views
This document provides an introduction and overview of Angular, including: - Angular is a front-end web framework best for single page applications. - It uses dependency injection to allow services to be injected, decorated, and mocked. - Directives allow extending and augmenting HTML behavior, and are compiled by Angular to link them to scopes. - Data binding in Angular syncs scope data with the DOM via one-way and two-way binding. - Promises represent the future state of asynchronous operations and can resolve other promises.
![Geoff Goodman - McFullStack 2015
$injector in practice
function HomeController ($http) {}
// Alt 1: Implicit - Function stringified to find deps
module.controller("HomeController", HomeController);
// Alt 2: Explicit - Use $inject property
HomeController.$inject = ["$http"];
module.controller("HomeController", HomeController);
// Alt 3: Explicit - Use array syntax
module.controller("HomeController", ["$http",
HomeController])
// You can even inject and use the $injector service
yourself
$injector.invoke(HomeController, { $http: mockHttp});](https://image.slidesharecdn.com/bz1vkt5gs0iu3v1z1qvt-signature-23d9a8aa19c11c50c8e1a0af6eec8b1e1e1715b1c52ff918033768b03e33b009-poli-150413134227-conversion-gate01/85/Introduction-to-Angular-9-320.jpg)
![Geoff Goodman - McFullStack 2015
Example of Promises
function makeMeASandwitch () {
var chicken = cookChicken()
.then(chopChicken);
var bacon = cookBacon();
var toast = withBreadSlices(3)
.then(toastInToaster);
return Promise.all([chicken, bacon, toast])
.then(function () {
return spreadMayo()
.then(placeOtherIngredients);
})
.then(sliceIntoQuarters);
}
• Complex process is wrapped up in a nice bow](https://image.slidesharecdn.com/bz1vkt5gs0iu3v1z1qvt-signature-23d9a8aa19c11c50c8e1a0af6eec8b1e1e1715b1c52ff918033768b03e33b009-poli-150413134227-conversion-gate01/85/Introduction-to-Angular-20-320.jpg)
More Related Content
![Backbone/Marionette recap [2015]](https://cdn.slidesharecdn.com/ss_thumbnails/backbonemarionette2015-150109101453-conversion-gate01-thumbnail.jpg?width=560&fit=bounds)
Similar to Introduction to Angular (20)
Introduction to Angular
- 1. Introduction to Angular Superheroic font-end framework
- 2. Geoff Goodman - McFullStack 2015 About me • Accountant by day, full-stack hacker by night • Creator of Plunker (http://plnkr.co) • Speaker at ng-conf 2015 • Chartered Accountant (now CPA), Chartered Business Valuator • Manager of Valuations & Business Modelling at EY
- 3. Geoff Goodman - McFullStack 2015 What is Angular? • Angular is a front-end web framework • It’s best designed for Single Page Applications (SPAs) • MVW (Model, View, … Whatever?) • Rapid prototyping tool —> Large applications
- 4. Some pros / cons • Rapid prototyping • Huge community of users • Deep focus on testing • Backed by Google for the long- term • Fun to use :-) • API docs focus on what things do instead of how to do things • Lots of things you have to just know • Tightly coupled to DOM —> No server-side rendering (SEO) • Built-in routing is weak
- 5. –Arthur C. Clarke “Any sufficiently advanced technology is indistinguishable from magic.”
- 6. Geoff Goodman - McFullStack 2015 On the menu today • DI with $injector and $provide • The $digest cycle and $scope • Directives and $compile • Data binding and Angular templates • Promises
- 7. Geoff Goodman - McFullStack 2015 Dependency injection (DI) • Make sure your code is available when and where you need it • Allows services to be injected, decorated and mocked easily • In Angular, there is first a configuration phase then a run phase
- 8. Geoff Goodman - McFullStack 2015 A service provider service? WAT? • Configuration phase • module.config(configCallback); • module.provide(providerCallback); • Run phase • module.run(runCallback); • module.factory(factoryCallback); • module.service(serviceCallback); • module.directive(directiveCallback); • module.controller(controllerFunction);
- 9. Geoff Goodman - McFullStack 2015 $injector in practice function HomeController ($http) {} // Alt 1: Implicit - Function stringified to find deps module.controller("HomeController", HomeController); // Alt 2: Explicit - Use $inject property HomeController.$inject = ["$http"]; module.controller("HomeController", HomeController); // Alt 3: Explicit - Use array syntax module.controller("HomeController", ["$http", HomeController]) // You can even inject and use the $injector service yourself $injector.invoke(HomeController, { $http: mockHttp});
- 10. Geoff Goodman - McFullStack 2015 Welcome to Angular-land • Data is exposed to Angular via $rootScope or a child $scope • Child scopes inherit from their parents via .prototype making a tree off $rootScope • Scopes are created by Angular in a hierarchy parallel to your DOM hierarchy
- 11. Geoff Goodman - McFullStack 2015 Digesting changes • $watch expressions attached to Scopes • In each $digest cycle Angular checks if the evaluated expression changed • Changes trigger callbacks • Angular keeps running $digest cycle until no changes (or explosions)
- 12. Geoff Goodman - McFullStack 2015 With great power comes great responsibility • Angular’s $digest cycle isn’t free • Bad things happen when your code triggers deep $digest cycles • Beware the $asqwatch talk by Scott Moss
- 13. Geoff Goodman - McFullStack 2015 Directives • Why wait for HTML 6? You can create new elements right now! • Or add crazy new behaviour to existing elements • Attach via: element, attribute, class (and comment) • Not the easiest thing to understand
- 14. Geoff Goodman - McFullStack 2015 Directives all the way down • First time seeing an Angular template: WAT? <div class="tree-dir"> <div class="tree-filename" ng-bind="treeDir.node.filename" ng-style="{paddingLeft: treeDir.depth * 20 + 'px'}"> </div> <div class="tree-children"> <tree-node node="node" depth="treeDir.depth" ng-repeat="node in treeDir.node.children"> </tree-node> </div> </div> • It’s actually all just html and Directives
- 15. Geoff Goodman - McFullStack 2015 This is javascript, why do we need to $compile? • Directives extend and augment the behaviour of html • Angular needs to figure out where to attach it’s magic to all the crazy stuff you throw at it • When Angular bootstraps, it traverses DOM tree and will compile nodes matching directive definitions • Then it will link this to a $scope • Can be done manually by using $compile
- 16. Geoff Goodman - McFullStack 2015 The dreaded directive definition object (DDO) var directiveDefinitionObject = { template: '<div></div>', restrict: 'A', scope: false, controller: "ControllerName", controllerAs: 'ctl', bindToController: false, require: 'siblingDirectiveName', link: function ($scope, $element, $attrs) { } };
- 17. Geoff Goodman - McFullStack 2015 OK that makes a bit more sense then <div class="tree-dir"> <div class="tree-filename" ng-bind="treeDir.node.filename" ng-style="{paddingLeft: treeDir.depth * 20 + 'px'}"> </div> <div class="tree-children"> <tree-node node="node" depth="treeDir.depth" ng-repeat="node in treeDir.node.children"> </tree-node> </div> </div> • ng-everything
- 18. Geoff Goodman - McFullStack 2015 Data-binding • Is awesome! • One-way binding ($scope —> html) via ng-bind and {{interpolated expressions}} • Two-way binding is an amazing foot-gun! • But will save you a ton of time if used safely • Powered by ng-model • Keeps $scope data synced with DOM and vice- versa
- 19. Geoff Goodman - McFullStack 2015 Welcome to the Promised land • A Promise represents the future state of an asynchronous operation • Either resolved or rejected (also non-standard progress in Angular) • Will only resolve or reject once, never in same execution context • Can resolve Promises with other Promises • Functions can return a Promise representing a complex, multi-step, asynchronous operation
- 20. Geoff Goodman - McFullStack 2015 Example of Promises function makeMeASandwitch () { var chicken = cookChicken() .then(chopChicken); var bacon = cookBacon(); var toast = withBreadSlices(3) .then(toastInToaster); return Promise.all([chicken, bacon, toast]) .then(function () { return spreadMayo() .then(placeOtherIngredients); }) .then(sliceIntoQuarters); } • Complex process is wrapped up in a nice bow
- 21. Geoff Goodman - McFullStack 2015 Routing • ngRoute - Angular solution for 1.x • Very limited in scope (no master-detail) • ngNewRouter - Next-gen, component-based router • In active development for 1.x, 2.x • ui-router - Community library that is now the de- facto routing standard
Editor's Notes
- #6: When you start using Angular, are when you look at small snippets in isolation, it looks like magic. Two-way binding, change detection. These are not things that web technologies provide on their own. What are these $scope objects flying around and dollar signs everywhere and crazy ng-attributes. There is a lot going on, that mostly have good reasons for being the way they are. Today we’ll take a bit of a peek behind the curtain and see what Angular is and how it works.
- #9: And there are even more…
- #11: To get it’s magic to work, Angular needed to create its own mini Universe.
- #12: Angular has expressions in Interpolations
- #14: Let’s say you wanted your buttons to Quack every time you hovered over them. Directive You want to replace all <strong> tags with your new, custom blink tag, yep. Directive
- #15: This is a simplified example from a file tree directive I made. This is the template for a directory node.
- #16: Yes, there is a whole new jargon associated with Angular. I’m saving you the pain of trying to explain transclusion. We can save that for another time and place. So what does all this mean? 1. Your browser takes HTML and makes a DOM tree (this is what gets rendered to screen) 2. When angular bootstraps, it learns about a bunch of directives and where they should hook into the DOM 3. Angular will traverse the DOM to find those extension points (tag name, attribute or class name) 4. For matches, it will call the optional compile step defined by the directive. This step returns a link function 5. The link function’s job is to handle the interface between the new, compiled DOM and the data and callback functions you’ve added to the $scope (and it’s parents)
- #17: Or templateUrl Restrict tells Angular how this directive can be identified (element, attribute, class, etc) Scope, controllerAs ad bindToController are all related to binding DOM to the directive code. Scope will trigger the creation of a new scope or isolate scope if non-falsy Controller is an injectable function to add logic to the directive… similar to link Link is called as soon as the directive is compiled, added to the dom and controller has run. Here is where you do any DOM manipulation you need This is all changing dramatically in Angular 2 and will likely have a transition api in 1.5 Require lets you get a hold of the instantiated Controller of another directive on the same DOM element or higher up in the DOM tree
- #18: ng is the Angular ‘namespace’ used to identify behaviour (or Directives) made available by Angular