Your SlideShare is downloading. ×
AngularJS for designers and developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

AngularJS for designers and developers

11,042
views

Published on

Published in: Technology

0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. AngularJSfor Designers and Developers
    • 2. Javascript apps don’t have to be messy
    • 3. A few questions!
    • 4. ColdFusionSooooo easy to template with HTMLMakes complex things really easyModel-View-Controller frameworksDependency-Injection frameworks
    • 5. FlexDeclarative UI language with MXMLWriting business logic with ActionScriptData BindingCode ReuseMVC & DI frameworks
    • 6. JavascriptjQuery for interactivity & ajaxjQueryUI, ExtJS,YUI etc. for components
    • 7. Where’s the structure?
    • 8. Some factsLicensed under MIT licenseActive community:http://groups.google.com/group/angularhttps://github.com/angular/angular.js
    • 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. <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. 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. Example 1: Hello WorldA simple HTML5 page/app with AngularJS
    • 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. 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. Example 2:Expressions & Data binding
    • 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. Example 3:Filter functions
    • 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. Minimisingdependencies
    • 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. But - we still need dependencies
    • 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. 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. Application Model
    • 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. 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. 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. Bootstrapping <html ng-app>
    • 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. Scopes & Models
    • 31. Repeater<li ng-repeat="...">
    • 32. Filters (again)
    • 33. Example 4:1-screen apps & routing
    • 34. Example 5:Custom filters (to make stuff pretty)
    • 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. Get in touch AgentK about.me/agentK kai@ventego-creative.co.nz