• Like

Clarice Technologies - Introduction to Angular JS

  • 3,399 views
Uploaded on

Clarice Technologies …

Clarice Technologies
www.claricetechnologies.com
Product Development Services Company specializing in Integrated User Experience Design and Technology Development.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,399
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
12
Comments
0
Likes
1

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

Transcript

  • 1. Himanshu Khara Product Development Sr. ManagerA Modern Javascript MVC SuperFramework
  • 2. What Do WebDevelopers Need?FROM THE ARCHITECT• Scalability• Maintainability• Modular nature• Cleanliness of Implementation• GuidanceFROM THE APPLICATION• Light-weight• Performance• Consistent/Uniform• UsableFROM THE TECHNOLOGY STACK• Easy to Use• Easy to test• Tooling Support• Standards-drivenFROM THE DEVELOPMENT PROCESS• Quicker turn-around time• Predictable Velocity
  • 3. Available ModernJavascript MVCFrameworksCLIENT SIDE• BackboneJS• Spine - KnockoutJS• KnockbackJS• Ember.js• AngularJS• JavascriptMVC• Sencha / ExtJSReferences- http://backbonejs.org http://spinejs.com http://knockoutjs.com/ http://kmalakoff.github.com/knockback/index.htmlhttp://emberjs.com http://angularjs.org/ http://javascriptmvc.com http://www.sencha.com http://meteor.com/http://batmanjs.org http://derbyjs.orgCLIENT – SERVER – HYBRID• MeteorJS• Batman• DerbyJS
  • 4. What is AngularJS?Ang-who-lar?Complete client-side JS framework solution• Opinionated; but very flexible at the same time• Higher-level abstractionOpen source; Developed by Google• 3 years in development ; 1.0 released in June 2012 (current version - 1.0.4-bewildering-hair / 1.1.2-tofu-animation)• Used in Google production projects• Growing developer communityDecent (growing) API documentation, Tutorials & Development guides• http://builtwith.angularjs.org/Support for all modern browsers & IE7 and above (using shims)
  • 5. Real World UsersAngularJS is used for many platforms and domains• Used for many platforms and domains• DoubleClick digital marketing manager by Google• Google Places• YouTube application on PS3• Tetractis - Olympics 2012 real-time data• SCamp - SoundCloud Playlist Manager• GoodFilms.com website• FolderChute - Pipeline for many cloud-storage services• Provok.in - Crowd-enabled "affirmation" portalReferences- http://places.google.com/ http://builtwith.angularjs.org/https://github.com/angular/angular.js/wiki/Projects-using-AngularJS
  • 6. In-depth study ofAngularJSVIEWS PURELY <DECLARATIVE/>• HTML "compiler" teaches old HTML new tricks• Readable, expressive, easy-to-understand• Great templating engine2-WAY BINDING MODELS & VIEWS• 2-way automatic updation of models & views• Eliminates most DOM manipulationMODELS AS PLAIN JAVASCRIPTOBJECTS• Free from unnecessary boilerplate• Reusable, extensible, testableCONTROLLERS FOR BEHAVIOR• Encapsulate logically related functionality on apage• Cleanly separate out and add behavior to models• Standard JS classes - no boilerplateSERVICES• Shared functionality across controllers• $ Resource service based on Promise spec• Allows synchronous assignment for async returns• Support for REST, extensible to other paradigmsDEPENDENCY INJECTION• Keeps parts of the app unaware of each other• The DI runtime wires everything together• Results in modular, easily testable code
  • 7. In-depth study ofAngularJSDIRECTIVES• Easily create reusable HTML components• Encapsulate markup, behavior and style• Can be used as custom tags, attrs or commentsTESTABILITY• Built with ease of unit testing in mind• Well-separated concerns result in testable code• Integrates very well with Jasmine• Bundled scenario runnerOUTPUT FILTERS• In-built routing perfect for single-page apps• Deep-linking supportINTEROPERABILITY• No hard dependencies; works well with most JSlibs• Can use anyPAGE NAVIGATION• In-built routing perfect for single-page apps• Deep-linking supportOUT-OF-THE-BOX GOODNESS• Directives• Reusable filters for clean output formatting• XHR-wrapping services for ease of integration• Validators for all basic HTML input types• Basic localization support• Mocks support for better testabilityWatch out!- Traditional web app concepts turned inside-out- Dependency Injection can warp your mind initially
  • 8. Code SamplesIs this better than what we have?Basic MV* pattern• Templatized Views• Lightweight Controllers (no DOM)• Unintrusive Model definitionDirectives• Reusable components• All DOM manipulation goes here• Awesome !Output FiltersPage Navigation & Routing
  • 9. ExamplesBasic AngularJS example<input ng-model="greeting" placeholder="Say hello to someone.." /><h2 ng-init="greeting = World">Hello {{greeting}} !!</h2>Basic AngularJS examplefunction GreetingController($scope) {$scope.greeting = World;}<div ng-controller="GreetingController"><input ng-model="greeting" placeholder="Say hello to someone.." /><h2>In English - Hello {{greeting}} !!</h2><h2>In French - Bonjour {{greeting}} !!</h2></div>
  • 10. ExamplesSomething more than “Hello World!”function Tweet(props) { // MODEL DEFINITIONEntity.call(this); // Activity may be a subclassangular.extend(this, props);// { isPrivate(), content, author, time }}function TwitterFeedController($scope, Twitter) { // CONTROLLER / VIEWMODEL$scope.tweets = Twitter.get(...); // [<Tweet>] .. model$scope.postTweet = function () {TwitterService.submitTweet($scope.shoutText);};}<div ng-controller="TwitterFeedController"> // VIEW<div class="input-append shout-out"><input ng-model="shoutText" placeholder="Whats on your mind?" /><button ng-click="postTweet()">Post</button></div><ul><li ng-repeat="tweet in tweets"ng-hide="tweet.isPrivate()"><a>{{tweet.content}} by {{tweet.author}} at {{tweet.time | dateFormat}}</a></li></ul></div>
  • 11. ExamplesModularizationangular.module(social-api, [ ]).service(Social, [Twitter, function ($twitter) {return { twitter: Twitter, facebook: Facebook };}]).service(Twitter, [$http, $q, function($http, $q) {return {iterate: function (searchTerm, lastID) {if (!searchTerm) { return $q.defer().resolve([]); }var url = https://api.twitter.com/1.1/search/tweets.json +?&rpp=100&include_entities=true&result_type=mixed +&callback=JSON_CALLBACK,params = &q= + searchTerm + (lastID ? &since_id=+lastID : );return $http.jsonp( url + params ).then( function(response) {var data = response.data;return {items : data.results,refreshURL : data.refresh_url,query : data.query};});}};}]);angular.module(my-social-app, [social-api]) // using the Social Module
  • 12. ExamplesDirectives & Filters – Part 1angular.module(i18n-lib).service(I18N, [$http, GoogleTranslate, function ($http, GoogleTranslate) {return {get: function (key, parameters) {// fetch the string value from the language files// find out currently selected language (from session maybe)// replace argument-placeholders with parameters// return translated string}};}])// a simple internationalization service
  • 13. ExamplesDirectives & Filters – Part 2angular.module(i18n-lib).directive(i18n, [$filter, I18N, function ($filter, I18N) {return {restrict: E,scope: { key: @ },link: function (scope, element, attrs) {var languageString = I18N.get(attrs[key]),ret, token, tokens, tokenVal, $scope = scope.$parent;scope.$watch(replace);function replace() { // mojo !// GET the i18n-key and parameters (if any)// Ask I18N service to translate key (provide parameters if any)// render the translated string into the elementelement.html(I18n.get(...));}}};}]).filter(i18n, [I18N, function (I18N) {return function (key) {return I18N.get(key);};}])
  • 14. ExamplesDirectives & Filters – Part 2 contd…<h1>{{hello_world | i18n}}</h1><i18n key="hello" greetee="World"></i18n><i18n key="hello" greetee="Robert"></i18n>// where language files look like -// en-us.langhello_world = Hello Worldhello = Hello {greetee}// fr.langhello_world = Bonjour tout le mondehello = Bonjour {greetee}// de.langhello_world = Hallo Welthello = Hallo {greetee}angular.module(my-social-app, [social-api]) // using the Social Module
  • 15. ExamplesDirectives & Filters – Part 3<h1>{{hello_world | i18n}}</h1><i18n key="hello" greetee="World"></i18n><i18n key="hello" greetee="Robert"></i18n>// where language files look like –// en-us.langhello_world = Hello Worldhello = Hello {greetee}// fr.langhello_world = Bonjour tout le mondehello = Bonjour {greetee}// de.langhello_world = Hallo Welthello = Hallo {greetee}
  • 16. ExamplesPage definition & routing// define parameterized URLs for routes$routeProvider.when(vote?d=:dName&eid=:dId!:type!:eId&q=:eName, {templateUrl: partials/challenge-voting.html,controller: ChallengeVotingController});// Now, for /#vote?d=spigit-com&eid=1!challenge!2112&q=Whats-up// all route arguments auto-injected into the controllerfunction AccountPageController($scope, $routeParams) {$routeParams == {dName: spigit-com, dId: 1,type: challenge, eId: 2112, q: Whats-up}}$routeProvider.html5Mode = true; // enables HTML5 pushState// all URLs seamlessly convert to - (no "#")http://.../vote?d=spigit-com&eid=1!challenge!2112&q=Whats-up• “Pages" can be defined as external partials• Streamlined routing; plugs in controller beautifully• Parameterized URLs result in correct routing and readily available params within the controller• Supports HTML5 History API (cleaner URLs)
  • 17. ExamplesModel definitionfunction Tweet(props) {Entity.call(this); // Activity may be a subclassangular.extend(this, props);// { isPrivate(), content, author, time }}function TwitterFeedController($scope, Twitter) {$scope.tweets = Twitter.get(...); // [<Tweet>]$scope.postTweet = function () {TwitterService.submitTweet($scope.shoutText);};}<div ng-controller="TwitterFeedController"><div class="input-append shout-out"><input ng-model="shoutText" placeholder="Whats on your mind?" /><button ng-click="postTweet()">Post</button></div><ul><li ng-repeat="tweet in tweets"ng-hide="tweet.isPrivate()"><a>{{tweet.content}} by {{tweet.author}} at {{tweet.time | dateFormat}}</a></li></ul></div>
  • 18. ExamplesModularizationangular.module(social-api, [ ]).service(Social, [Twitter, function ($twitter) {return { twitter: Twitter, facebook: Facebook };}]).service(Twitter, [$http, $q, function($http, $q) {return {iterate: function (searchTerm, lastID) {if (!searchTerm) { return $q.defer().resolve([]); }var url = https://api.twitter.com/1.1/search/tweets.json +?&rpp=100&include_entities=true&result_type=mixed +&callback=JSON_CALLBACK,params = &q= + searchTerm + (lastID ? &since_id=+lastID : );return $http.jsonp( url + params ).then( function(response) {var data = response.data;return {items : data.results,refreshURL : data.refresh_url,query : data.query};});}};}])
  • 19. Clarice TechnologiesFor more information :www.ClariceTechnologies.com+91.20.4078.9520info@claricetechnologies.comPune | Bangalore | USA