Working with AngularJS
Download as PPTX, PDF6 likes2,628 views
The document provides an overview of AngularJS, a JavaScript framework for building single-page applications (SPAs) that emphasizes client-side model-view architecture and modularity. It covers key concepts such as templates, directives, data binding, and controllers while outlining best practices and tools for development. The presentation also addresses the challenges of learning AngularJS and its suitability for various types of applications.
![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](https://image.slidesharecdn.com/20140520webcamp-workingwithangularjs-140525175444-phpapp02/85/Working-with-AngularJS-20-320.jpg)
![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](https://image.slidesharecdn.com/20140520webcamp-workingwithangularjs-140525175444-phpapp02/85/Working-with-AngularJS-29-320.jpg)
![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](https://image.slidesharecdn.com/20140520webcamp-workingwithangularjs-140525175444-phpapp02/85/Working-with-AngularJS-33-320.jpg)
![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.](https://image.slidesharecdn.com/20140520webcamp-workingwithangularjs-140525175444-phpapp02/85/Working-with-AngularJS-34-320.jpg)
![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](https://image.slidesharecdn.com/20140520webcamp-workingwithangularjs-140525175444-phpapp02/85/Working-with-AngularJS-37-320.jpg)
![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](https://image.slidesharecdn.com/20140520webcamp-workingwithangularjs-140525175444-phpapp02/85/Working-with-AngularJS-38-320.jpg)
![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](https://image.slidesharecdn.com/20140520webcamp-workingwithangularjs-140525175444-phpapp02/85/Working-with-AngularJS-39-320.jpg)
![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](https://image.slidesharecdn.com/20140520webcamp-workingwithangularjs-140525175444-phpapp02/85/Working-with-AngularJS-44-320.jpg)
Working with AngularJS
- 1. Workingwith Microsoft WebCamp 2014 May 20, 2014
- 2. 2Aboutme /56 André Vala SharePoint Solutions Architect Office & SharePoint Solutions Team Leader [email protected] @atomicvee http://blogit.create.pt/blogs/andrevala http://www.linkedin.com/in/andrevala
- 3. 3Agenda What is AngularJS? Main Concepts Tools BestPractices Wrappingup /56
- 5. “Angular is what HTML would have been had it been designed for applications.” Miško Hevery
- 6. 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
- 7. 7History Createdby MiškoHevery Opensourcesince2009 Supportedby Google Large and fast-growingcommunity WHATISANGULARJS? /56
- 8. 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
- 9. 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
- 12. MainConcepts
- 13. 13Mainconcepts Templates Directives Expressions Data binding Scope /56 Controllers Modules Filters Services Routing
- 15. 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
- 16. 16Templates HTML with additional markup Directives Expressions Filters Formcontrols MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/templates
- 17. 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
- 18. 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
- 19. 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
- 20. 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
- 22. 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
- 24. 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
- 25. 25Controllers JavaScriptconstructorfunctions used to augmentthe Scope Newchild scopeis createdand injectedas a constructor parameter($scope) MAINCONCEPTS /56 Read More: https://docs.angularjs.org/guide/controller
- 26. 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
- 27. 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
- 29. 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
- 31. 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
- 32. 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
- 33. 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
- 34. 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.
- 36. 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
- 37. 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
- 38. 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
- 39. 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
- 41. 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
- 42. 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
- 43. 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
- 44. 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
- 46. Bestpractices
- 47. 47BestPractices In Views/Templates Usedirectivesforabstractingcommonmarkups,extensions Donotusecomplexexpressionsinbindings.Movethemtocontrollers. Optimizeuseofbindings.Lessbindings=fasterapplication. In Controllers Keepthemlight.Useservicestooffloadfunctionality. NoDOMmanipulations!Usedirectivesforthat. /56
- 48. 48BestPractices In Directives Preferusingdirectivesaselementsorattributesoverclassesandcomments Donotng-prefixforyourdirectives Createisolatescopestoavoidacidentaloverridesofproperties Createmodulesto group controllers,services,directivesand filters /56
- 49. Tools
- 50. 50Tools IDE: Visual Studio, NetBeans,WebStorm Utils: JSFiddle, BatarangPlugin for Chrome Static Code Analysis:JSHint Unit Testing: Karma /56
- 51. Wrappingup
- 52. 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
- 53. 53Nexttime... Custom directives Formcontrolsand validation Unit testing End-to-endtesting Animations WRAPPINGUP /56
- 54. 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