Angular js How, What & Why - MetaRefresh 2014
- 1. AngularJS: How, Why & What’s the difference? Shyam Seshadri Director, Fundoo Solutions
- 2. “Who are you again??” –Most people I meet
- 3. I am • Xoogler - Feedback & AngularJS team • MBA, ISB Hyderabad • Author, AngularJS, O’Reilly • Director, Fundoo Solutions • Part time AngularJS Trainer • Coder / Geek
- 4. History • Started when JS was sexy, but hard to manage • Google Feedback, in GWT Hell • Every framework / language had some good things • Flex with Data binding (one-way, though) • Ruby routes • Java with Dependency Injection & Testability
- 5. “Hey, I built a framework to learn Javascript in my free time. We should totally use it.” –Misko Hevery, Founder of AngularJS
- 6. So what is Open Source, Open Source, Javascript Javascript Extension Extension friendly friendly Declarative, Declarative, MVVW MVVW Extends Extends HTML HTML Great Great Community Community To Create To Create Amazing Web Amazing Web Apps Apps
- 7. The promised land? THE PROMISE THE RESULT REDUCED LINES OF CODE From 20,000 to 1500!! FASTER DEVELOPMENT 6 months, GWT = 3 weeks, AngularJS Increased Velocity!! TESTABLE, MAINTAINABLE JS Dependency Injection & S uper Fast Unit Testing EASIER TEMPLATING & STYLING Templates pure HTML, CS S & Designer friendly INTEGRATE WITH OTHER LIBRARIES Directives! Extend HTML and teach it new tricks!
- 9. Advantages - Developer HTML + JS HTML + JS Data Binding Data Binding Dependency Injection Dependency Injection Custom Components Custom Components Super Easy Testing Super Easy Testing Amazing Community! Amazing Community!
- 10. The Result? Drastically Less Lines Drastically Less Lines of Code of Code Focus on your core, Focus on your core, not the crap not the crap More maintainable, More maintainable, extensible extensible Component friendly Component friendly Well Tested, Robust Well Tested, Robust Designer Friendly Designer Friendly
- 11. Requirements? • The same requirements that jQuery has • A Server!! (Sometimes…) • Works well with Java, as well as with Ruby, Python, etc. • • • Really independent of the Server Needs a way of fetching and storing Data (XHR, Sockets…) Easier if it talks JSON But not required • Can transform requests and responses • No JSON? No problem! •
- 12. Starting an AngularJS Project <html ng-app> <head> <script src=“angular.min.js”></script> </head> <body> <input type=“text” ng-model=“name”> <h1>Hello {{name}}</h1> </body> </html>
- 13. Who’s using AngularJS? • • • • • • • • Google (of course!) Double Click for Advertisers Youtube And many more Amazon Netflix Banks Lots of startups
- 14. Future Plans • A Revamped Change Detection Algorithm • Web Components Interop • A Better Data Persistence story • Awesomer Dependency Injection • Nicer Logging • And a whole lot more
- 15. What have I worked with AngularJS on? Prototyping Prototyping EPG Application EPG Application Mail Application Mail Application Wedding & Photography Wedding & Photography E-Commerce, Analytics E-Commerce, Analytics & more & more
- 16. Thinking the AngularJS way! or how to get the most out of AngularJS or how to get the most out of AngularJS
- 17. “There are many steps to AngularJS Nirvana. Here are some to make sure you get there!” –Me!!
- 18. 1. Model is the Truth! Model comes from the server Model comes from the server Controller manipulates it Controller manipulates it View displays it View displays it Need to update the view? Need to update the view? Update the Update the model!! model!!
- 19. Tabs in jQuery <ul class="tabs"> <li class="tab1 selected">Tab 1</li> <li class="tab2">Tab 2</li> </ul> <div class="tab1">Content for Tab 1</div> <div class="tab2">Content for Tab 2</div> Plus •Tab highlighting logic •Tab content logic •Not declarative!!
- 20. Tabs leveraging Data binding <ul class="tabs”> <li class="tab1" ng-class="{selected: isSelected(‘tab1’)}”>Tab 1</li> <li class="tab2" ng-class="{selected: isSelected(‘tab2')}">Tab 2</li> </ul> <div class="tab1" ng-show="isSelected('tab1')">Content Tab 1</div> <div class="tab2" ng-show="isSelected('tab2')">Content Tab 2</div> $scope.isSelected = function(tab) { return tab === currentTab; };
- 21. Tabs in AngularJS Or even better, do this: <tabs> <tab title=“My First Tab”>Tab 1 content here</tab> <tab title=“My Second Tab”>Tab 2 content here</tab> </tabs>
- 22. 2. Leverage Data-binding Why do this? <form id="my-form”> <input type="text" id="nameField”> <input type="email" id="emailField”> <button>Submit</button> </form> function setFormValues(userDetails) { $('#nameField').value(userDetails.name); $('#emailField').value(userDetails.email); } // GETTING ALSO… When you can do this? <form id="my-form”> <input type="text" id="nameField” ng-model="user.name”> <input type="email" id="emailField” ng-model="user.email”> <button>Submit</button> </form> $scope.user
- 23. 3. DOM Manipulation —> Directives Don’t do this in your controller $('#inputDate').datepicker(); $('#inputDate') .datepicker('getDate'); $('#inputDate') .datepicker('setDate’, '05/23/1975'); Instead, create a directive <input type="text” jqui-datepicker ng-model="startDate” date-format= "DD/mm/YYYY” on-select= ”dateSelected(date)”>
- 24. Lack of Lack of compiler compiler Prevent Prevent Regressions Regressions “4.) Test Early, Test Often, and Keep testing” Reduce manual Reduce manual labor, increase labor, increase turnaround turnaround –Some Wise Guru Specification for Specification for the code the code
- 25. 5.) Separate Biz. Logic vs Presentation logic Prez. Logic —> Controllers Biz. Logic —> Services • • • • • • how should I fetch data from the server? how do I delete an email? should I allow this action to take place? how should data be cached? should data be returned from my local cache or the server? is this data valid? • • • • making the right service calls to fetch data needed for the view responding to user actions (such as clicks, selections, etc.) modifying the Model (through the scope) to correctly display elements putting the data in the right place for the view to render itself
- 27. Do you need Fundoo? Starting out? Starting out? Hands-on AngularjS Hands-on AngularjS Workshops Workshops Need a team? Need a team? Development Development Consulting Consulting Stuck? Need Stuck? Need Advice? Advice? Expert Consulting Expert Consulting