More Related Content
![There Are No “Buts” in Progressive Enhancement [Øredev 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/therearenobutsinprogressiveenhancementredev-151106102141-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Angular js How, What & Why - MetaRefresh 2014
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
Angular js How, What & Why - MetaRefresh 2014
- 1. AngularJS: How, Why& What’s the difference? Shyam Seshadri Director, Fundoo Solutions
- 2. “Who are youagain??” –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 JSwas 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 builta framework to learn Javascript in my free time. We should totally use it.” –Misko Hevery, Founder of AngularJS
- 6. So what is OpenSource, 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? THEPROMISE 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 LessLines 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 requirementsthat 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 <htmlng-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 RevampedChange Detection Algorithm • Web Components Interop • A Better Data Persistence story • Awesomer Dependency Injection • Nicer Logging • And a whole lot more
- 15. What have Iworked 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 AngularJSway! or how to get the most out of AngularJS or how to get the most out of AngularJS
- 17. “There are manysteps to AngularJS Nirvana. Here are some to make sure you get there!” –Me!!
- 18. 1. Model isthe 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 <ulclass="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 Databinding <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 Oreven 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 Whydo 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
- 26.
- 27. Do you needFundoo? 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
- 28.