• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Working with AngularJS
 

Working with AngularJS

on

  • 491 views

Introductory session about AngularJS, delivered on May 20th 2014 at Microsoft Web Camp, in Lisbon, Portugal.

Introductory session about AngularJS, delivered on May 20th 2014 at Microsoft Web Camp, in Lisbon, Portugal.

Statistics

Views

Total Views
491
Views on SlideShare
482
Embed Views
9

Actions

Likes
2
Downloads
56
Comments
0

2 Embeds 9

http://www.slideee.com 7
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Working with AngularJS Working with AngularJS Presentation Transcript

    • Workingwith Microsoft WebCamp 2014 May 20, 2014
    • 2Aboutme /56 André Vala SharePoint Solutions Architect Office & SharePoint Solutions Team Leader andre.vala@create.pt @atomicvee http://blogit.create.pt/blogs/andrevala http://www.linkedin.com/in/andrevala
    • 3Agenda  What is AngularJS?  Main Concepts  Tools  BestPractices  Wrappingup /56
    • WhatisAngularJS?
    • “Angular is what HTML would have been had it been designed for applications.” Miško Hevery
    • 6WhatisAngularJS?  SinglePageApplication(SPA)JavaScriptFramework  Implementsclient-sideMVW pattern  No directDOM manipulation, lesscode  Wellorganizedand highly modular  Focusedon testing  Supports all majordesktopand mobilebrowsers /56 Read More: https://plus.google.com/+AngularJS/posts/aZNVhj355G2
    • 7History  Createdby MiškoHevery  Opensourcesince2009  Supportedby Google  Large and fast-growingcommunity WHATISANGULARJS? /56
    • 8SinglePageApplications  Webapplicationscomposedof a singlepage  Views(HTML Fragments)aredynamicallyloaded into the page  Betteruserexperience(no reloads!)  Calls to the serveraredone asynchronouslybehind the scenes  Requireartificialhandling of browserhistory, navigation and bookmarks WHATISANGULARJS? /56
    • 9Model-View-Whatever  Somecallit MVC, othersMVVM...  In the end, the namedoes not matter. It handles separationof concernsefectivelyseparating presentationlogicfrombusiness logicand presentationstate.  Whatevermeans “whatever worksfor you”. WHATISANGULARJS? /56 Read More: https://plus.google.com/+AngularJS/posts/aZNVhj355G2 Model View Whatever
    • 10Trendingtopic WHATISANGULARJS? /56 Source: Google Trends
    • 11Learningcurve WHATISANGULARJS? /56
    • MainConcepts
    • 13Mainconcepts  Templates  Directives  Expressions  Data binding  Scope /56  Controllers  Modules  Filters  Services  Routing
    • HelloWorld DEMOMAINCONCEPTS
    • 15Helloworldapplication MAINCONCEPTS /56 <!doctype html> <html ng-app> <head> <title>Demo 01 - Page 03</title> <script src="libs/angular.min.js"></script> </head> <body> <p>Name:<input id="textInput" type="text" ng-model="PersonName" /></p> <p>Hello <span id="nameSpan">{{PersonName}}</span>!</p> </body> </html> Directive Directive Expression Template
    • 16Templates  HTML with additional markup  Directives  Expressions  Filters  Formcontrols MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/templates
    • 17Directives Markerson DOM elementsthat extendHTML vocabulary  Attachbehaviourtothe DOMelement  TransformtheDOM elementanditschildren Directivescanmatch: Elements <my-dir></my-dir> Attributes <span my-dir="exp"></span> Comments <!-- directive: my-dir exp --> Classes <span class="my-dir: exp;"></span> MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/directive
    • 18Namingformats AngularJS HTML compilersupports multiplenamingformats ng-bind Recommendedformat. data-ng-bind Recommendedformattosupport HTMLvalidators. ng_bind Legacypurposes. Avoidusingit. ng:bind Legacypurposes. Avoidusing it. x-ng-bind Legacypurposes. Avoidusing it. MAINCONCEPTS/DIRECTIVES /56 Read More: https://docs.angularjs.org/guide/directive
    • 19Built-indirectives ngApp ngBind ngBindHtml ngBindTemplate ngBlur ngChange ngChecked ngClass ngClassEven ngClassOdd ngClick ngCloak ngController ngCopy ngCsp ngCut ngDblClick ngDisabled ngFocus ngForm ngHide ngHref ngIf ngInclude ngInit ngKeydown ngKeypress ngKeyup ngList ngModel ngModelOptions ngMousedown ngMouseenter ngMouseleave ngMousemove ngMouseover ngNonBindable ngOpen ngPaste ngPluralize ngReadonly ngRepeat ngSelected ngShow ngSrc ngSrcset ngStyle ngSubmit ngTransclude ngValue ngView MAINCONCEPTS/DIRECTIVES /56 Read More: https://docs.angularjs.org/guide/directive
    • 20Expressions JavaScript-likecodesnippetsplacedinsidebindingssuchas {{ expression }} ValidAngularexpressions:  {{ 1 + 2 }}  {{ a + b }}  {{ user.name }}  {{ items[index] }} Additionalnotesaboutexpressions:  Controlflowstatementsarenotsupported(conditionals,loopsorexceptions)  Youcanusefiltersinsideexpressionstoformatdata MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/expression
    • Expressions DEMOMAINCONCEPTS
    • 22Databinding Automatic synchronizationof data betweenthe Modeland the View. MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/databinding View Template Model One-time merge One-WayDataBinding View Template Model Continuous updates Model is Single-Source-of-Truth Compile Changes to Model updates View Changes to View updates Model Two-WayDataBinding
    • Two-waydatabinding DEMOMAINCONCEPTS
    • 24Scope  Objectthat refersto the applicationModel  Valuesstored in variablesin the Scopebelong to the Model  The glue betweenthe Controllerand the View  Scopesarehierarchicaland followthe DOM structureof the application  EveryAngular applicationhas a root scope($rootScope)mapped to the elementlinked to ngApp directive MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/scope
    • 25Controllers  JavaScriptconstructorfunctions used to augmentthe Scope  Newchild scopeis createdand injectedas a constructor parameter($scope) MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/controller
    • 26Howtousecontrollers Creatinga controllerinthe globalnamespace function MyController($scope) { ... } Attachinga controllerto the DOM <div ng-controller="MyController"> MAINCONCEPTS/CONTROLLERS /56 Read More: https://docs.angularjs.org/guide/controller
    • 27Whentousecontrollers  Usecontrollersto:  Setup theinitialstateofthe$scope object  Add behaviourtothe$scope object  Do not use controllersto:  ManipulateDOM(usedatabindinganddirectivesinstead)  Formatinput (useformcontrolsinstead)  Filteroutput (usefiltersinstead)  Sharecodeorstateacrosscontrollers(useservicesinstead) MAINCONCEPTS/CONTROLLERS /56 Read More: https://docs.angularjs.org/guide/controller
    • Usingcontrollers DEMOMAINCONCEPTS
    • 29Module  Reusablecontainerfor differentfeaturesof anapp.  Candependon othermodules. Creatinga module angular.module('myApp', []); angular.module('myApp', ['myOtherModule']); Referencinganapp’smainmodule <html ng-app="myApp"> MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/module
    • Usingmodules DEMOMAINCONCEPTS
    • 31Filters  A filterformatsthevalueof anexpressionfor display to the user  Can be used in view templates,controllers,servicesand directives  You can createyour ownfilters (in a module)  Built-in filters: MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/filter Currency Date Filter Json LimitTo Lowercase Number OrderBy Uppercase
    • 32Usingfiltersinviewtemplates Singlefiltersyntax {{ expression | filter }} Example:{{ 12 | currency }} returns $12.00 Chainedfilterssyntax {{ expression | filter1 | filter2 | ... }} Filterwitharguments {{ expression | filter:argument1:argument2... }} Example:{{ 12 | number:2 }} returns 12.00 MAINCONCEPTS/FILTERS /56 Read More: https://docs.angularjs.org/guide/filter
    • 33Usingfiltersincontrollers,servicesanddirectives angular.module('FilterInControllerModule', []). controller('FilterController', ['filterFilter', function(filterFilter) { this.array = [ {name: 'Tobias'}, {name: 'Jeff'}, {name: 'Brian'}, {name: 'Igor'}, {name: 'James'}, {name: 'Brad'} ]; this.filteredArray = filterFilter(this.array, 'a'); }]); MAINCONCEPTS/FILTERS /56 Read More: https://docs.angularjs.org/guide/filter Inject filter in controller using <filter name>Filter syntax Receive filter function as a parameter Call filter with value to format and additional parameters
    • 34Creatingfilters angular.module('MyFilterModule', []). filter('myfilter', function() { return function(input) { ... return output; }; }); MAINCONCEPTS/FILTERS /56 Read More: https://docs.angularjs.org/guide/filter User the filter provider to create a new filter in the module Name the filter Return the filter function. The first argument is the input value. Additional arguments can be used.
    • Usingfilters DEMOMAINCONCEPTS
    • 36Services  Reusablebusiness logiccomponentes,independentof views,wired togetherusing dependencyinjection(DI).  Singletonsgeneratedby a servicefactory.  Angular only instantiatesa serviceif thereis a dependencyfor it.  Built-in servicesstart with $. Examples:$log, $http, $filter,$exceptionHandler MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/services
    • 37Usingaservice var countryApp = angular.module('countryApp', []); countryApp.controller('CountryCtrl', ['$scope', '$http', function (scope, http) { http.get(‘countries.json').success(function(data) { scope.countries = data; }); }]); MAINCONCEPTS/SERVICES /56 Inject $http service using DI Receive service object as a parameter Call method on service Read More: https://docs.angularjs.org/guide/services
    • 38Creatingaservice var myModule = angular.module('myModule', []); myModule.factory('serviceId', function() { var shinyNewServiceInstance; //factory function body that constructs shinyNewServiceInstance return shinyNewServiceInstance; }); MAINCONCEPTS/SERVICES /56 Return a service instance Register a new factory function for the service Read More: https://docs.angularjs.org/guide/services
    • 39Recipes var myApp = angular.module('myApp',[]); myApp.provider('MyFactory', function() {...}); myApp.factory('MyFactory', function() {...}); myApp.service('MyFactory', function() {...}); myApp.constant('MyConstant', 'My Constant Value'); myApp.value('MyValue', 35); MAINCONCEPTS/SERVICES /56
    • Usingservices DEMOMAINCONCEPTS
    • 41Multipleviews  Most applicationsarecomposedof morethan one view  In Single PageApplicationsall viewsare renderedin the same page (LayoutTemplate)which containsall the commonpage elements  Eachview(PartialTemplate)is placedin its own file and dynamically loadedinto the LayoutTemplate page MAINCONCEPTS /56
    • 42Multipleviews MAINCONCEPTS /56 index.html header.html a1.html b2.html a2.html b1.html b3.html a3.html Layout Template Partial Template Partial Template Partial Template Partial Template
    • 43Routing  Routing is providedby the ngRoute module(separatedistribution)  Routesare declaredvia the $routeProvider fromthe $route service  Supports deeplinking(history,bookmarksand browserback/forward buttons)  Partialviewsarerenderedby the ngView directive MAINCONCEPTS /56
    • 44Routingconfiguration var myApp = angular.module('myApp',['ngRoute']); myApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/phones', { templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl‘ }). when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl' }). otherwise({ redirectTo: '/phones' }); }]); MAINCONCEPTS/ROUTING /56 Route Dependency on ngRoute module Default Route Route with variable URL. PhoneId value will be placed in $routeParams object
    • Routing DEMOMAINCONCEPTS
    • Bestpractices
    • 47BestPractices  In Views/Templates  Usedirectivesforabstractingcommonmarkups,extensions  Donotusecomplexexpressionsinbindings.Movethemtocontrollers.  Optimizeuseofbindings.Lessbindings=fasterapplication.  In Controllers  Keepthemlight.Useservicestooffloadfunctionality.  NoDOMmanipulations!Usedirectivesforthat. /56
    • 48BestPractices  In Directives  Preferusingdirectivesaselementsorattributesoverclassesandcomments  Donotng-prefixforyourdirectives  Createisolatescopestoavoidacidentaloverridesofproperties  Createmodulesto group controllers,services,directivesand filters /56
    • Tools
    • 50Tools  IDE: Visual Studio, NetBeans,WebStorm  Utils: JSFiddle, BatarangPlugin for Chrome  Static Code Analysis:JSHint  Unit Testing: Karma /56
    • Wrappingup
    • 52Wrappingup  AngularJS is a modular JavaScriptSPA framework  Has a lot of great featuresbut a steeplearningcurve  Greatfor CRUD applicationsbut not suitable for everytype of application  Worksvery wellwith some JavaScriptlibraries(such as jQuery)but not so wellwith others  Increasesdeveloperproductivity in small/medium applicationsbut can be quite heavyfor complexapplications /56
    • 53Nexttime...  Custom directives  Formcontrolsand validation  Unit testing  End-to-endtesting  Animations WRAPPINGUP /56
    • 54Resources Officialdocumentation  Projecthomepage:https://angularjs.org/  DeveloperGuide:https://docs.angularjs.org/guide  Tutorial:https://docs.angularjs.org/tutorial  APIReference:https://docs.angularjs.org/api  BuiltwithAngular:https://builtwith.angularjs.org Trainingvideosandtutorialsfordevelopers  Egghead:https://egghead.io/technologies/angularjs Additionalstuff  Angularmodules:http://ngmodules.org/ WRAPPINGUP /56
    • ThankYou! Downloadslidedeck:http://1drv.ms/1h1YOlS Downloaddemos:http://1drv.ms/1h1YJyP