working with angularjs
DESCRIPTION
Introductory session about AngularJS, delivered on May 20th 2014 at Microsoft Web Camp, in Lisbon, Portugal.TRANSCRIPT
![Page 1: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/1.jpg)
Working with
Microsoft WebCamp 2014May 20, 2014
![Page 2: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/2.jpg)
2 /56
About me
André ValaSharePoint Solutions ArchitectOffice & SharePoint Solutions Team Leader
@atomicvee
http://blogit.create.pt/blogs/andrevala
http://www.linkedin.com/in/andrevala
![Page 3: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/3.jpg)
3 /56
Agenda
What is AngularJS? Main Concepts Tools Best Practices Wrapping up
![Page 4: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/4.jpg)
What is AngularJS?
![Page 5: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/5.jpg)
“Angular is what HTML would have been had it been designed for applications.”
Miško Hevery
![Page 6: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/6.jpg)
6 /56
What is AngularJS?
Single Page Application (SPA) JavaScript Framework Implements client-side MVW pattern No direct DOM manipulation, less code Well organized and highly modular Focused on testing Supports all major desktop and mobile browsers
Read More: https://plus.google.com/+AngularJS/posts/aZNVhj355G2
![Page 7: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/7.jpg)
7 /56
History
Created by Miško Hevery Open source since 2009 Supported by Google Large and fast-growing community
WHAT IS ANGULARJS?
![Page 8: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/8.jpg)
8 /56
Single Page Applications
Web applications composed of a single page Views (HTML Fragments) are dynamically loaded into the page Better user experience (no reloads!) Calls to the server are done asynchronously behind the scenes Require artificial handling of browser history, navigation and
bookmarks
WHAT IS ANGULARJS?
![Page 9: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/9.jpg)
9 /56
Model-View-Whatever
Some call it MVC, others MVVM... In the end, the name does not
matter. It handles separation of concerns efectively separating presentation logic from business logic and presentation state.
Whatever means “whatever works for you”.
WHAT IS ANGULARJS?
Read More: https://plus.google.com/+AngularJS/posts/aZNVhj355G2
Model View
Whatever
![Page 10: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/10.jpg)
10 /56
Trending topicWHAT IS ANGULARJS?
Source: Google Trends
![Page 11: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/11.jpg)
11 /56
Learning curveWHAT IS ANGULARJS?
![Page 12: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/12.jpg)
Main Concepts
![Page 13: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/13.jpg)
13 /56
Main concepts
Templates Directives Expressions Data binding Scope
Controllers Modules Filters Services Routing
![Page 14: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/14.jpg)
Hello WorldDEMO MAIN CONCEPTS
![Page 15: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/15.jpg)
15 /56
Hello world applicationMAIN CONCEPTS
<!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
![Page 16: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/16.jpg)
16 /56
Templates
HTML with additional markup Directives Expressions Filters Form controls
MAIN CONCEPTS
Read More: https://docs.angularjs.org/guide/templates
![Page 17: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/17.jpg)
17 /56
Directives
Markers on DOM elements that extend HTML vocabulary Attach behaviour to the DOM element Transform the DOM element and its children
Directives can match:Elements <my-dir></my-dir>
Attributes <span my-dir="exp"></span>
Comments <!-- directive: my-dir exp -->
Classes<span class="my-dir: exp;"></span>
MAIN CONCEPTS
Read More: https://docs.angularjs.org/guide/directive
![Page 18: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/18.jpg)
18 /56
Naming formats
AngularJS HTML compiler supports multiple naming formats
ng-bind Recommended format.data-ng-bind Recommended format to support HTML validators.ng_bind Legacy purposes. Avoid using it.ng:bind Legacy purposes. Avoid using it.x-ng-bind Legacy purposes. Avoid using it.
MAIN CONCEPTS / DIRECTIVES
Read More: https://docs.angularjs.org/guide/directive
![Page 19: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/19.jpg)
19 /56
Built-in directives
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
MAIN CONCEPTS / DIRECTIVES
Read More: https://docs.angularjs.org/guide/directive
![Page 20: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/20.jpg)
20 /56
Expressions
JavaScript-like code snippets placed inside bindings such as{{ expression }}
Valid Angular expressions: {{ 1 + 2 }} {{ a + b }} {{ user.name }} {{ items[index] }}
Additional notes about expressions: Control flow statements are not supported (conditionals, loops or exceptions) You can use filters inside expressions to format data
MAIN CONCEPTS
Read More: https://docs.angularjs.org/guide/expression
![Page 21: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/21.jpg)
ExpressionsDEMO MAIN CONCEPTS
![Page 22: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/22.jpg)
22 /56
Data binding
Automatic synchronization of data between the Model and the View.
MAIN CONCEPTS
Read More: https://docs.angularjs.org/guide/databinding
View
Template Model
One-time merge
One-Way Data Binding
View
Template
Model
Continuous updatesModel is Single-Source-of-Truth
Compile
Changes to Model updates View
Changes to View updates Model
Two-Way Data Binding
![Page 23: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/23.jpg)
Two-way data bindingDEMO MAIN CONCEPTS
![Page 24: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/24.jpg)
24 /56
Scope
Object that refers to the application Model Values stored in variables in the Scope belong to the Model The glue between the Controller and the View Scopes are hierarchical and follow the
DOM structure of the application Every Angular application has a root
scope ($rootScope) mapped to theelement linked to ngApp directive
MAIN CONCEPTS
Read More: https://docs.angularjs.org/guide/scope
![Page 25: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/25.jpg)
25 /56
Controllers
JavaScript constructor functions used to augment the Scope New child scope is created and
injected as a constructorparameter ($scope)
MAIN CONCEPTS
Read More: https://docs.angularjs.org/guide/controller
![Page 26: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/26.jpg)
26 /56
How to use controllers
Creating a controller in the global namespacefunction MyController($scope) {...}
Attaching a controller to the DOM<div ng-controller="MyController">
MAIN CONCEPTS / CONTROLLERS
Read More: https://docs.angularjs.org/guide/controller
![Page 27: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/27.jpg)
27 /56
When to use controllers
Use controllers to: Set up the initial state of the $scope object Add behaviour to the $scope object
Do not use controllers to: Manipulate DOM (use databinding and directives instead) Format input (use form controls instead) Filter output (use filters instead) Share code or state across controllers (use services instead)
MAIN CONCEPTS / CONTROLLERS
Read More: https://docs.angularjs.org/guide/controller
![Page 28: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/28.jpg)
Using controllersDEMO MAIN CONCEPTS
![Page 29: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/29.jpg)
29 /56
Module
Reusable container for different features of an app. Can depend on other modules.
Creating a moduleangular.module('myApp', []);angular.module('myApp', ['myOtherModule']);
Referencing an app’s main module<html ng-app="myApp">
MAIN CONCEPTS
Read More: https://docs.angularjs.org/guide/module
![Page 30: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/30.jpg)
Using modulesDEMO MAIN CONCEPTS
![Page 31: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/31.jpg)
31 /56
Filters
A filter formats the value of an expression for display to the user Can be used in view templates, controllers, services and directives You can create your own filters (in a module) Built-in filters:
MAIN CONCEPTS
Read More: https://docs.angularjs.org/guide/filter
CurrencyDateFilter
JsonLimitToLowercase
NumberOrderByUppercase
![Page 32: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/32.jpg)
32 /56
Using filters in view templates
Single filter syntax {{ expression | filter }}Example: {{ 12 | currency }} returns $12.00
Chained filters syntax {{ expression | filter1 | filter2 | ... }}
Filter with arguments {{ expression | filter:argument1:argument2... }}Example: {{ 12 | number:2 }} returns 12.00
MAIN CONCEPTS / FILTERS
Read More: https://docs.angularjs.org/guide/filter
![Page 33: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/33.jpg)
33 /56
Using filters in controllers, services and directives
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'); }]);
MAIN CONCEPTS / FILTERS
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
![Page 34: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/34.jpg)
34 /56
Creating filters
angular.module('MyFilterModule', []).filter('myfilter', function() {
return function(input) {...return output;
};});
MAIN CONCEPTS / FILTERS
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.
![Page 35: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/35.jpg)
Using filtersDEMO MAIN CONCEPTS
![Page 36: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/36.jpg)
36 /56
Services
Reusable business logic componentes, independent of views, wired together using dependency injection (DI).
Singletons generated by a service factory. Angular only instantiates a service if there is a dependency for it. Built-in services start with $.
Examples: $log, $http, $filter, $exceptionHandler
MAIN CONCEPTS
Read More: https://docs.angularjs.org/guide/services
![Page 37: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/37.jpg)
37 /56
Using a service
var countryApp = angular.module('countryApp', []);countryApp.controller('CountryCtrl', ['$scope', '$http', function (scope, http) {
http.get(‘countries.json').success(function(data) { scope.countries = data;
});}]);
MAIN CONCEPTS / SERVICES
Inject $http service using DI
Receive service object as a parameter
Call method on service
Read More: https://docs.angularjs.org/guide/services
![Page 38: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/38.jpg)
38 /56
Creating a service
var myModule = angular.module('myModule', []);myModule.factory('serviceId', function() {
var shinyNewServiceInstance;//factory function body that constructs shinyNewServiceInstancereturn shinyNewServiceInstance;
});
MAIN CONCEPTS / SERVICES
Return a service instance
Register a new factory function for the service
Read More: https://docs.angularjs.org/guide/services
![Page 39: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/39.jpg)
39 /56
Recipes
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);
MAIN CONCEPTS / SERVICES
![Page 40: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/40.jpg)
Using servicesDEMO MAIN CONCEPTS
![Page 41: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/41.jpg)
41 /56
Multiple views
Most applications are composed of more than one view In Single Page Applications all views are rendered in the same page
(Layout Template) which contains all the common page elements Each view (Partial Template) is placed in its own file and dynamically
loaded into the Layout Template page
MAIN CONCEPTS
![Page 42: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/42.jpg)
42 /56
Multiple viewsMAIN CONCEPTS
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
![Page 43: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/43.jpg)
43 /56
Routing
Routing is provided by the ngRoute module (separate distribution) Routes are declared via the $routeProvider from the $route
service Supports deep linking (history, bookmarks and browser back/forward
buttons) Partial views are rendered by the ngView directive
MAIN CONCEPTS
![Page 44: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/44.jpg)
44 /56
Routing configuration
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'});}]);
MAIN CONCEPTS / ROUTING
Route
Dependency on ngRoute module
Default Route
Route with variable URL. PhoneId value will be placed in $routeParams object
![Page 45: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/45.jpg)
RoutingDEMO MAIN CONCEPTS
![Page 46: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/46.jpg)
Best practices
![Page 47: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/47.jpg)
47 /56
Best Practices
In Views/Templates Use directives for abstracting common markups, extensions Do not use complex expressions in bindings. Move them to controllers. Optimize use of bindings. Less bindings = faster application.
In Controllers Keep them light. Use services to offload functionality. No DOM manipulations! Use directives for that.
![Page 48: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/48.jpg)
48 /56
Best Practices
In Directives Prefer using directives as elements or attributes over classes and comments Do not ng- prefix for your directives Create isolate scopes to avoid acidental overrides of properties
Create modules to group controllers, services, directives and filters
![Page 49: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/49.jpg)
Tools
![Page 50: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/50.jpg)
50 /56
Tools
IDE: Visual Studio, NetBeans, WebStorm Utils: JSFiddle, Batarang Plugin for Chrome Static Code Analysis: JSHint Unit Testing: Karma
![Page 51: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/51.jpg)
Wrapping up
![Page 52: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/52.jpg)
52 /56
Wrapping up
AngularJS is a modular JavaScript SPA framework Has a lot of great features but a steep learning curve Great for CRUD applications but not suitable for every type of
application Works very well with some JavaScript libraries (such as jQuery) but
not so well with others Increases developer productivity in small/medium applications but
can be quite heavy for complex applications
![Page 53: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/53.jpg)
53 /56
Next time...
Custom directives Form controls and validation Unit testing End-to-end testing Animations
WRAPPING UP
![Page 54: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/54.jpg)
54 /56
Resources
Official documentation Project homepage: https://angularjs.org/ Developer Guide: https://docs.angularjs.org/guide Tutorial: https://docs.angularjs.org/tutorial API Reference: https://docs.angularjs.org/api Built with Angular: https://builtwith.angularjs.org
Training videos and tutorials for developers Egghead: https://egghead.io/technologies/angularjs
Additional stuff Angular modules: http://ngmodules.org/
WRAPPING UP
![Page 55: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/55.jpg)
Thank You!
Download slide deck: http://1drv.ms/1h1YOlS Download demos: http://1drv.ms/1h1YJyP
![Page 56: Working with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022042601/554be552b4c90556328b4a54/html5/thumbnails/56.jpg)