Introducing AngularJS
Download as pptx, pdf0 likes662 views
This document introduces AngularJS and provides an agenda for a presentation on the framework. It discusses single page applications, data binding, controllers, services, directives and dependency injection in AngularJS. It also gives examples of how to use data binding, controllers, services and directives. The presentation aims to explain how AngularJS helps address issues with thick client applications and promotes maintainability.
![Data binding in Angular*
● $watch list
// pseudo code, implicit watchers from
example
$watchList = [
$watch('scope.tweet'),
$watch('scope.imageUrl')
]](https://image.slidesharecdn.com/introducingangularjs-150121160843-conversion-gate01/85/Introducing-AngularJS-15-320.jpg)
Introducing AngularJS
- 2. Loc Nguyen ● Java, Ruby, JavaScript, C#, PHP ● Sr Engineer at SignNow, full stack consultant ● AngularJS OC and Code for OC meetup organizer ● @locn ● [email protected]
- 3. Agenda ● The single page app ● Live coding… o Data binding o Controllers o Services o Directives ● Examine an app….?
- 4. Not on Agenda ● REST integration ● Promises ● Routing ● Testing ● Angular UI ● Yeoman, Bower, Grunt, Gulp ● Integrating non-Angular libraries ● Performance gotchas* egghead.io
- 5. Thick client pains ● Tight coupling to server technologies ● Model or DOM as the truth ● Promoting maintainability ○ Responding to change ○ Ease of testing ○ Organized code OOP}
- 6. History for hipsters ● DHTML ● Web 2.0 ● Rich Internet Applications ● Ambitious web apps™
- 7. State of the MVC
- 8. The Trend of Things
- 9. (Rock) Stars
- 10. Double Jeopardy?
- 11. Web vs Desktop MVC Model2 MVC ● Model notifies no one ● Controller pulls changes into view with each request ● Browser renders model state MVC ● Model notifies observers ● View observes models ● View reflect model state
- 13. Data binding in Angular* ● $scope o application glue o source of truth, or a view model o provides observers for state changes
- 14. Data binding example (Angularians plz ignore anti-patterns)
- 15. Data binding in Angular* ● $watch list // pseudo code, implicit watchers from example $watchList = [ $watch('scope.tweet'), $watch('scope.imageUrl') ]
- 16. Data binding in Angular* ● $watch function, explicit watcher $scope.$watch(function () { return map.currentCity; }, function (center) { // update OKCupid match list });
- 18. Data binding in Angular* ● $digest loop o Loop through the $watch list and do a dirty check o Keep track of new values o Keep looping until no values have changed o Finally, repaint DOM ● $digest triggers o ng-events, ng built-in services, $scope.$apply()
- 19. Dependency Injection ● Reduce coupling ● Improves testability ● Promotes reusability
- 20. Dependency Injection function travel(a, z) { setOrigin(a); setDest(z); var route = getRoute(); var car = new Car(); car.go(route); } travel('Irvine', 'Orange')
- 21. Dependency Injection function travel(a, z, transport) { setOrigin(a); setDest(z); var route = getRoute(); transport.go(route); } travel(1985, 1955); travel(1985, 1955, new TimeMachine());
- 22. Controllers ● More glue between view and model ● Manage data models ● Created and destroyed with route/view changes
- 23. Services ● Singleton objects ● Communication between controllers ● Maintain state for lifetime of app
- 25. Directives The Awesome Sauce™ in AngularJS ● Good on anything ● Apply liberally ● Carry extra
- 26. Directives ● Built-in directives ○ ng-show, ng-click, ng-repeat ● Custom directives ○ reusable widgets ○ declarative programming ○ wrap non Angular libraries
- 28. Mobile web app example
Editor's Notes
- #3: Polyglot dev. Most of my career on the server side b/c I hated JavaScript, the DOM, spaghetti Full stack engineer at SignNow. Technical lead of the API and web team
- #5: Kitchen sink
- #6: Massaging data the fit into a rendered view Passing arbitrary data into the view to configure JS functions, CSS Controllers know a little too much about our browser Friction between back and front end devs in the Controller - Where do you store state, where do you read state? Imagine keeping multiple widgets that change the same mode in sync can be a nightmare. - Why I hated front-end development
- #11: This is partly true. You’re not learning two different MVCs but two architectures that serve two different purposes. Somewhere in internet history the two became conflated.
- #12: Model2 is great for organizing spaghetti code on the server > Struts, Rails, Django, ASP.NET MVC Web 2.0 and RIA happened. GMail, Ajax-y apps Consider how complex the task of keeping a view in synch with model state
- #14: Start off with the key concept in Angular, magic happens on it $scope is the glue between the view and the controller. $scope is the data model, or the source of truth. It’s pretty much a view model.
- #16: Every binding on the view implicitly adds an watcher in the $watch list
- #17: $scope is the glue between the view and the controller. $scope is the data model, or the source of truth. It’s pretty much a view model.
- #20: These are just good OOP principles and DI facilitates adherence.
- #21: Function is tightly coupled to Car. Hard to test because it won’t execute unless Car function is available. Can’t swap out with a mock for testing. Not reusable, only works whenever you want to travel with an ugly car. Forces you to write a new travel function to accomplish the same thing
- #22: Left side is tightly coupled to Car function Hard to test because it won’t execute unless Car function is available.
- #23: Already mentioned while going over Angular scopes Typical use case is to read a query parameter and and query an API to update the view > or respond to form submit by validating the form and delegating submission to a service objet
- #26: Encapsulates behavior or a set of instructions so you can apply them to the DOM
- #28: Show image drop
- #29: Show image drop