AngularJSfor Designers and Developers
Javascript apps don’t have to be messy
A few questions!
ColdFusionSooooo easy to template with HTMLMakes complex things really easyModel-View-Controller frameworksDependency-Inje...
FlexDeclarative UI language with MXMLWriting business logic with ActionScriptData BindingCode ReuseMVC & DI frameworks
JavascriptjQuery for interactivity & ajaxjQueryUI, ExtJS,YUI etc. for components
Where’s the structure?
Some factsLicensed under MIT licenseActive community:http://groups.google.com/group/angularhttps://github.com/angular/angu...
Angular is built around the belief thatdeclarative code is better than imperativecode when it comes to building UIs andwir...
<mx:VBox x="0" y="0" width="100%">  <mx:Canvas x="0" y="0" width="100%" height="480">    <mx:Canvas id="gameBoard" y="0" x...
public MonthSpinner() {   super("Month Spinner");   setSize(200,100);   setDefaultCloseOperation(EXIT_ON_CLOSE);   Contain...
Example 1:        Hello WorldA simple HTML5 page/app with AngularJS
The Angular philosophyDecouple DOM manipulation from app logic.Decouple the client side of an app from the server side. Th...
Angular is not...Its not a Library. You dont just call its functions,although it does provide you with some utility APIs.I...
Example 2:Expressions & Data binding
Angular vs JSAngular expressions are not the same as JSexpressions:- evaluate against the current scope (not thewindow)- f...
Example 3:Filter functions
Let’s take a step backAs developers we have 2 responsibilities:Make the app work according torequirementsProtect investmen...
Minimisingdependencies
package com.rocketboots.app.business {  import com.rocketboots.app.vo.Customer;    class DependsOnCustomerToWork {        ...
But - we still need  dependencies
Good and bad                                             ...dependencies  Increasinglikelihood of   Data (Model)    change...
MVC                                    Model                            Business  Increasinglikelihood of    change       ...
Application Model
Data (M)The Model is referenced from properties on Angular scopeobjects. The data in your model could be Javascript object...
Templates (V)Templates, which you write in HTML andCSS, serve as the View.You add elements, attributes, and markup toHTML,...
Logic & Behaviour (C)Application Logic and Behavior, which you define inJavaScript, serve as the Controller.With Angular (u...
Bootstrapping  <html ng-app>
The injector that will be used for dependency injectionwithin this app is created.The injector will then create the root s...
Scopes & Models
Repeater<li ng-repeat="...">
Filters (again)
Example 4:1-screen apps & routing
Example 5:Custom filters (to make stuff pretty)
Photo creditshttp://www.flickr.com/photos/tachyondecay/2067319449/http://www.flickr.com/photos/jordan_mac/517134649/http://w...
Get in touch      AgentK      about.me/agentK      kai@ventego-creative.co.nz
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
AngularJS for designers and developers
Upcoming SlideShare
Loading in...5
×

AngularJS for designers and developers

11,398

Published on

Published in: Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,398
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • AngularJS for designers and developers

    1. 1. AngularJSfor Designers and Developers
    2. 2. Javascript apps don’t have to be messy
    3. 3. A few questions!
    4. 4. ColdFusionSooooo easy to template with HTMLMakes complex things really easyModel-View-Controller frameworksDependency-Injection frameworks
    5. 5. FlexDeclarative UI language with MXMLWriting business logic with ActionScriptData BindingCode ReuseMVC & DI frameworks
    6. 6. JavascriptjQuery for interactivity & ajaxjQueryUI, ExtJS,YUI etc. for components
    7. 7. Where’s the structure?
    8. 8. Some factsLicensed under MIT licenseActive community:http://groups.google.com/group/angularhttps://github.com/angular/angular.js
    9. 9. Angular is built around the belief thatdeclarative code is better than imperativecode when it comes to building UIs andwiring software components together,while imperative code is excellent forexpressing business logic.
    10. 10. <mx:VBox x="0" y="0" width="100%"> <mx:Canvas x="0" y="0" width="100%" height="480"> <mx:Canvas id="gameBoard" y="0" x="0"/> <mx:Canvas id="block" y="0" x="0"/> </mx:Canvas> <mx:VBox> <mx:Label id="scoreLabel" text="Score: 0"/> <mx:Label text="v. 1.0.12 (2008-12-29)"/> <mx:Label text="By Jakob Jenkov - jenkov.com"/> </mx:VBox></mx:VBox>
    11. 11. public MonthSpinner() { super("Month Spinner"); setSize(200,100); setDefaultCloseOperation(EXIT_ON_CLOSE); Container c = getContentPane(); c.setLayout(new FlowLayout(FlowLayout.LEFT, 4,4)); c.add(new JLabel("Expiration Date:")); Date today = new Date(); JSpinner s = new JSpinner(new SpinnerDateModel(today, null, null, Calendar.MONTH)); JSpinner.DateEditor de = new JSpinner.DateEditor(s, "MM/yy"); s.setEditor(de); c.add(s);
    12. 12. Example 1: Hello WorldA simple HTML5 page/app with AngularJS
    13. 13. The Angular philosophyDecouple DOM manipulation from app logic.Decouple the client side of an app from the server side. Thisallows development work to progress in parallel, and allowsfor reuse of both sides.It is very helpful indeed if the framework guides developersthrough the entire journey of building an app: from designingthe UI, through writing the business logic, to testing.It is always good to make common tasks trivial and difficulttasks possible.
    14. 14. Angular is not...Its not a Library. You dont just call its functions,although it does provide you with some utility APIs.Its not a DOM Manipulation Library. Angular usesjQuery to manipulate the DOM behind the scenes,rather than give you functions to manipulate the DOMyourself.Its not a Widget Library.
    15. 15. Example 2:Expressions & Data binding
    16. 16. Angular vs JSAngular expressions are not the same as JSexpressions:- evaluate against the current scope (not thewindow)- forgiving ( {{a.b.c}} vs. {{((a||{}).b||{}).c}} )- no control flow (also not ternary operator)- support for filters- the $ sign
    17. 17. Example 3:Filter functions
    18. 18. Let’s take a step backAs developers we have 2 responsibilities:Make the app work according torequirementsProtect investment in code from changes But no cheating, it still has to work!
    19. 19. Minimisingdependencies
    20. 20. package com.rocketboots.app.business { import com.rocketboots.app.vo.Customer; class DependsOnCustomerToWork { private var myCustomer : Customer; function createCustomer() : void { myCustomer = new Customer(); myCustomer.firstName = “Kai”; } Our class “knows about” or has a } dependency on Customer - if the} Dependency arrows are the simplest class, property or method names and yet the most important relationship and signatures change, our class in a UML class diagram... will probably not work. class Customer { public var firstName : String;
    21. 21. But - we still need dependencies
    22. 22. Good and bad ...dependencies Increasinglikelihood of Data (Model) change schemas, entities, relationships, column/property names and types Business Logic isCreditCardValid(s : String) : Boolean { Application workflow (Controller) When the customer finishes entering their details the credit card is processed; if successful the order is recorded in the system and a receipt number displayed to the user. Interface (View) <div class=”...”><input type=”text”...>
    23. 23. MVC Model Business Increasinglikelihood of change Data currently being displayed in the application - knows about nothing else Model properties Server calls Filters details of data Validators to display how to make something happen Controller 28 Application workflow - knows about the model, and little if anything about the view View THE CRITICAL BIT: how to update the view - while knowing as little as possible! Knows about everything - doesn’t matter because view will change before anything else does. The important thing is the dependencies that aren’t there...
    24. 24. Application Model
    25. 25. Data (M)The Model is referenced from properties on Angular scopeobjects. The data in your model could be Javascript objects,arrays, or primitives, it doesnt matter.What matters is that these are all referenced by the scopeobject.Angular employs scopes to keep your data model and your UIin sync. Whenever something occurs to change the state of themodel, angular immediately reflects that change in the UI, andvice versa.
    26. 26. Templates (V)Templates, which you write in HTML andCSS, serve as the View.You add elements, attributes, and markup toHTML, which serve as instructions to theangular compiler.
    27. 27. Logic & Behaviour (C)Application Logic and Behavior, which you define inJavaScript, serve as the Controller.With Angular (unlike with standard AJAXapplications) you dont need to write additionallisteners or DOM manipulators, because they arebuilt-in.This feature makes your application logic very easyto write, test, maintain, and understand.
    28. 28. Bootstrapping <html ng-app>
    29. 29. The injector that will be used for dependency injectionwithin this app is created.The injector will then create the root scope that willbecome the context for the model of our application.Angular will then "compile" the DOM starting at the ngApproot element, processing any directives and bindings foundalong the way.
    30. 30. Scopes & Models
    31. 31. Repeater<li ng-repeat="...">
    32. 32. Filters (again)
    33. 33. Example 4:1-screen apps & routing
    34. 34. Example 5:Custom filters (to make stuff pretty)
    35. 35. Photo creditshttp://www.flickr.com/photos/tachyondecay/2067319449/http://www.flickr.com/photos/jordan_mac/517134649/http://www.flickr.com/photos/liquidindian/427162166http://www.flickr.com/photos/thescott365/2551508603/http://www.flickr.com/photos/emma_barrow/6506428485/http://www.flickr.com/photos/reedingram/4500160088http://www.flickr.com/photos/19339528@N02/6571727465
    36. 36. Get in touch AgentK about.me/agentK kai@ventego-creative.co.nz

    ×