SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.
Busy Developers Guide to AngularJS (Tiberiu Covaci)
-
Upload
itcamp -
Category
Technology
-
view
100 -
download
2
description
Transcript of Busy Developers Guide to AngularJS (Tiberiu Covaci)
![Page 1: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/1.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Busy Developers’ guide to AngularJS
Tiberiu Covaci
@tibor19
![Page 2: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/2.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Huge thanks to our sponsors & partners!
![Page 3: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/3.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Who am I
• Tiberiu ’Tibi’ Covaci
• Programmer, experience > 20 years
• MCT since 2004, teaching Web & .NET Development
• Senior Trainer & Mentor in Romania
• MVP for Windows Azure
• Father & Geek
• Twitter: @tibor19
![Page 4: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/4.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Agenda
• What is Angular
• File->New
• Modules
• Controllers
• Services
• Custom Directives
• Custom Filters
![Page 5: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/5.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
What is AngularJS?
HTML enhanced for web apps!
![Page 6: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/6.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Single Page Application
Rich Client App in HTML/JavaScript
![Page 7: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/7.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Why SPA?
![Page 8: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/8.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
FILE->NEW
![Page 9: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/9.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
• As editor you can use:– Visual Studio
– WebStorm
– Sublime
– Notepad
– vi
• As a start you can use – angular-seed
– Nuget
– GitHub
File->New
![Page 10: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/10.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
ngApp directive
• Every page must have at least one
• If several ngApp directives are present, only the first one is auto bootstrapped
• They cannot be nested
• It may specify a module
![Page 11: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/11.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Directives
• Element <ng-something></ng-something >
• Attribute <div ng-something ></div>
• Class <div class=‘ng-something’>
• Comment <!-- directive: ng-something -->
![Page 12: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/12.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Event Directives
• ngClick
• ngDblClick
• ngMousedown
• ngMouseenter
• ngMouseleave
• ngMousemove
• ngMouseover
• ngMouseup
• ngChange
![Page 13: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/13.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Other Directives
• ngApp
• ngBind
• ngBindTemplate
• ngBindHtml
• ngBindHtmlUnsafe
• ngHide
• ngShow
• ngCloak
• ngStyle
• ngClass
• ngClassEven
• ngClassOdd
• ngDisabled
• ngChecked
• ngReadonly
• ngSelected
• ngForm
• ngSubmit
• ngHref
• ngSrc
• ngNonBindable
![Page 14: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/14.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Expressions
• Inline code snippets
• Specified with {{ }}
![Page 15: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/15.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Filters
• A filter formats the value of an expression for display to the user
• Usage: {{ expression | filter }}
• Following filters are predefined :– uppercase/lowercase
– number/currency/date
– json
– orderBy
– limitTo
– filter
![Page 16: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/16.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Modules
• A collection of controllers, services, directives, and filters
• Can have dependencies on other modules
![Page 17: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/17.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Controllers
• Every module can have several Controllers
• There are two ways of specifying a Controller–Directly by name (uses $scope to send data to
the view)
–Controller as (the controller itself transports the data)
• $scope offers prototypal inheritance
• $rootScope is The one that rules them all
![Page 18: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/18.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
DEMO
Creating a controller
![Page 19: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/19.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Services
• Used to encapsulate functionality
• Two ways of creating services
–Via service method
–Via factory method
– There is a third one (provider)
• Two additional kind of services
– value
– constant
![Page 20: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/20.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
$log Service
• Used for logging
• Has the following methods:
– log
– info
–warn
–error
![Page 21: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/21.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
DOM Services
• $window
• $document
• $rootElement
![Page 22: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/22.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
$timeout Service
• An alternative to setTimeout that is Angular aware
• Offers cancel functionality as well
![Page 23: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/23.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
$locale Service
• A service that offers localization
• Used to offer formatting information
![Page 24: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/24.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
$q Service
• A promise/deferred implementation inspired by Q (by Kris Kowal)
• A promise as an interface for interacting with an object that represents the result of an action that is performed asynchronously, and may or may not be finished at any given point in time.
![Page 25: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/25.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
$http Service
• Provides methods to interact directly with an service via http
• You can call directly the method like this:
–$http({method: ‘get’,…})
• Or use one of the shortcuts
–$http.get(…).success(successfn).error(errorfn)
–And post/put/delete/head/jsonp
![Page 26: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/26.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
$resource Service
• Defined in the ngResource module and depends on $http
• Is a factory that lets you interact with RESTFulservices
• $resource(url, paramDefaults, actions);
• Methods available– get [GET]
– query [GET isArray]
– save [POST]
– remove/delete [DELETE]
![Page 27: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/27.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
DEMO
Creating a custom service
![Page 28: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/28.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
• Markers on a DOM element that tells $compile to attach a behavior
• In JavaScript they are named using camel case• In Html they use -, :, and _ as separators
– The compiler strips x and data from the name
• Are created via directive method• They have restrictions on which elements
– Attribute (A), default– Element (E)– Class (C)– Comment (M)
Directives
![Page 29: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/29.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
DEMO
Creating a custom directive
![Page 30: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/30.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Custom Filters
• A filter transforms the output of an expression
• They are implemented as services
• Are created via filter method
filter(name, function() {
return function(input, uppercase) {
return ‘changed_input’;
}
}
![Page 31: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/31.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
DEMO
Creating a custom filter
![Page 32: Busy Developers Guide to AngularJS (Tiberiu Covaci)](https://reader033.fdocuments.us/reader033/viewer/2022051413/554f365cb4c905cd048b4d81/html5/thumbnails/32.jpg)
Premium community conference on Microsoft technologies itcampro@ itcamp14#
Q & A