Busy Developers Guide to AngularJS (Tiberiu Covaci)

266 views

Published on

Since last year, Single Page Applications have grown exponentially in popularity and the framework of choice for many developers is Angular.js. In this session we will go through some of the features that make Angular such a popular framework so you can start using it in your own projects.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
266
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Busy Developers Guide to AngularJS (Tiberiu Covaci)

  1. 1. Premium community conference on Microsoft technologies itcampro@ itcamp14# Busy Developers’ guide to AngularJS Tiberiu Covaci @tibor19
  2. 2. Premium community conference on Microsoft technologies itcampro@ itcamp14# Huge thanks to our sponsors & partners!
  3. 3. 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
  4. 4. Premium community conference on Microsoft technologies itcampro@ itcamp14# Agenda • What is Angular • File->New • Modules • Controllers • Services • Custom Directives • Custom Filters
  5. 5. Premium community conference on Microsoft technologies itcampro@ itcamp14# What is AngularJS? HTML enhanced for web apps!
  6. 6. Premium community conference on Microsoft technologies itcampro@ itcamp14# Single Page Application Rich Client App in HTML/JavaScript
  7. 7. Premium community conference on Microsoft technologies itcampro@ itcamp14# Why SPA?
  8. 8. Premium community conference on Microsoft technologies itcampro@ itcamp14# FILE->NEW
  9. 9. 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
  10. 10. 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
  11. 11. 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 -->
  12. 12. Premium community conference on Microsoft technologies itcampro@ itcamp14# Event Directives • ngClick • ngDblClick • ngMousedown • ngMouseenter • ngMouseleave • ngMousemove • ngMouseover • ngMouseup • ngChange
  13. 13. Premium community conference on Microsoft technologies itcampro@ itcamp14# Other Directives • ngApp • ngBind • ngBindTempl ate • ngBindHtml • ngBindHtmlU nsafe • ngHide • ngShow • ngCloak • ngStyle • ngClass • ngClassEven • ngClassOdd • ngDisabled • ngChecked • ngReadonly • ngSelected • ngForm • ngSubmit • ngHref • ngSrc • ngNonBinda ble
  14. 14. Premium community conference on Microsoft technologies itcampro@ itcamp14# Expressions • Inline code snippets • Specified with {{ }}
  15. 15. 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
  16. 16. Premium community conference on Microsoft technologies itcampro@ itcamp14# Modules • A collection of controllers, services, directives, and filters • Can have dependencies on other modules
  17. 17. 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
  18. 18. Premium community conference on Microsoft technologies itcampro@ itcamp14# DEMO Creating a controller
  19. 19. 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
  20. 20. Premium community conference on Microsoft technologies itcampro@ itcamp14# $log Service • Used for logging • Has the following methods: –log –info –warn –error
  21. 21. Premium community conference on Microsoft technologies itcampro@ itcamp14# DOM Services • $window • $document • $rootElement
  22. 22. Premium community conference on Microsoft technologies itcampro@ itcamp14# $timeout Service • An alternative to setTimeout that is Angular aware • Offers cancel functionality as well
  23. 23. Premium community conference on Microsoft technologies itcampro@ itcamp14# $locale Service • A service that offers localization • Used to offer formatting information
  24. 24. 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.
  25. 25. 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
  26. 26. 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 RESTFul services • $resource(url, paramDefaults, actions); • Methods available – get [GET] – query [GET isArray] – save [POST] – remove/delete [DELETE]
  27. 27. Premium community conference on Microsoft technologies itcampro@ itcamp14# DEMO Creating a custom service
  28. 28. 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
  29. 29. Premium community conference on Microsoft technologies itcampro@ itcamp14# DEMO Creating a custom directive
  30. 30. 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’; } }
  31. 31. Premium community conference on Microsoft technologies itcampro@ itcamp14# DEMO Creating a custom filter
  32. 32. Premium community conference on Microsoft technologies itcampro@ itcamp14# Q & A

×