Downloaded 68 times
![Scopes
⢠The glue between a controller and a view
⢠Include properties and the functions set by
controllers that a view can later use
var myApp = angular.module(âmyAppâ,[]);
myApp.controller(âMyControllerâ, function($scope) {
$scope.message = âhelloâ;
$scope.myFunc = function() {
// do something
}
});](https://image.slidesharecdn.com/end-to-endspadevelopmentusingasp-150520105724-lva1-app6892/85/End-to-End-SPA-Development-Using-ASP-NET-and-AngularJS-41-320.jpg)
![Services â Cont.
⢠Service declaration example:
var myApp = angular.module(âmyAppâ,[]);
myApp.value(âmyValueâ, âa constant value);
myApp.factory(âmyFactoryâ, function(name) {
return âHi â + name;
}](https://image.slidesharecdn.com/end-to-endspadevelopmentusingasp-150520105724-lva1-app6892/85/End-to-End-SPA-Development-Using-ASP-NET-and-AngularJS-45-320.jpg)
![Scopes
⢠The glue between a controller and a view
⢠Include properties and the functions set by
controllers that a view can later use
var myApp = angular.module(âmyAppâ,[]);
myApp.controller(âMyControllerâ, function($scope) {
$scope.message = âhelloâ;
$scope.myFunc = function() {
// do something
}
});](https://image.slidesharecdn.com/end-to-endspadevelopmentusingasp-150520105724-lva1-app6892/75/End-to-End-SPA-Development-Using-ASP-NET-and-AngularJS-41-2048.jpg)
![Services â Cont.
⢠Service declaration example:
var myApp = angular.module(âmyAppâ,[]);
myApp.value(âmyValueâ, âa constant value);
myApp.factory(âmyFactoryâ, function(name) {
return âHi â + name;
}](https://image.slidesharecdn.com/end-to-endspadevelopmentusingasp-150520105724-lva1-app6892/75/End-to-End-SPA-Development-Using-ASP-NET-and-AngularJS-45-2048.jpg)
Uploaded byGil Fink
End to-End SPA Development Using ASP.NET and AngularJS
This document discusses end-to-end single page application development using ASP.NET and AngularJS. It begins with an introduction to SPAs and their benefits. It then covers key SPA building blocks like HTML5, JavaScript libraries, Ajax, REST, routing, and AngularJS components like controllers, services, directives and routing. It demonstrates using ASP.NET MVC and Web API for the backend API and services. AngularJS is used for the frontend framework. The presentation includes demos of key concepts and a full example app to demonstrate an end-to-end SPA. It concludes with questions and resources for further learning.
TechnologyâŚ
More Related Content
Similar to End to-End SPA Development Using ASP.NET and AngularJS
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
End to-End SPA Development Using ASP.NET and AngularJS
- 1. End-to-End SPA Development usingASP.NET and AngularJS Gil Fink CEO and Senior Consultant, sparXys
- 2.
- 3. Managers and SPA Tryingto solve the puzzle of single page applicationâŚ
- 4. Even the ShortenedName is Misleading⌠Letâs build a SPA?
- 5. About Me ⢠sparXysCEO and Senior consultant ⢠ASP.NET/IIS Microsoft MVP ⢠Co-author of Pro Single Page Application Development (Apress) ⢠Co-author of 4 Microsoft Official Courses (MOCs) ⢠Co-organizer of GDG Rashlatz
- 6. Agenda ⢠The Roadto Single Page Applications ⢠What is a SPA? ⢠SPA Building Blocks ⢠ASP.NET MVC/Web API in the Backend ⢠AngularJS in the Front-End
- 7. The Road toSPAs 1990 HTML HTTP 1995 Java Applets 1996 CSS JavaScript Flash 1997 HTML 4 2005 Ajax is a buzzword 2006 work on HTML5 starts 2007 Silverlight Mobile Web
- 8. Traditional Websites OMG! notthis kind of traditional website please!
- 9. Traditional Native Apps Nativeapps â we love installation experience⌠Not!
- 10. What is aSPA? Web Application No full page submit No full page refresh No embedded objects (plugins) Client-side templating and routing
- 11. Why to DevelopSPAs? Feature Web App Native App Single Page App Cross Platform functionality V X V Client State Management X V V No Installation required V X V Web App Native App SPA
- 12. SPA Building Blocks HTML5 JavaScriptLibraries Ajax REST SPA Web API Routing
- 13. HTML5 ⢠Supported bymost modern browsers o www.caniuse.com ⢠Includes new JavaScript APIs that can help to: o Store data locally o Persist data across application shutdowns o Communicate with the server in new ways o Increase web performance with new specifications and APIs
- 14. Ajax ⢠Asynchronous JavaScriptand XML o No XML these days⌠o Asynchronous JavaScript and JSON (Ajaj) today ⢠Asynchronously call server endpoints ⢠You can o Maintain state in the client side o Go to the server asynchronously o Render elements without full page refresh using JavaScript
- 15.
- 16. Any application thatcan be written in JavaScript, will eventually be written in JavaScript Atwood's Law
- 17. REST ⢠REpresntational StateTransfer ⢠Architecture style for working with HTTP ⢠Using HTTP verbs (POST, GET, PUT, DELETE) o Performs Create, Read, Update and Delete operations respectively o Can also use other HTTP verbs ⢠Can receive and send data in variety of formats o JSON, XML, HTML, XHTML, Blob and more
- 18. Web API ⢠Theserver is used mostly as API o Each API function is an endpoint ⢠No need for server page rendering ⢠No need for server routing
- 19. Client-Side Routing ⢠Allrouting is performed in the client-side ⢠You use a routing library/framework o Or your own implementation on top of HTML5 History API ⢠When a route changes o The library/framework intercepts the navigation and performs your functionality
- 20.
- 21.
- 22.
- 24. Demo File -> NewProject -> ASP.NET with MVC and Web API
- 25.
- 26. ASP.NET MVC Players â˘Model o Responsible to hold data o Sometimes include constraints such as validation ⢠View o Responsible to render the view into HTML o Uses the Razor view engine ⢠Controller o Responsible for handling user requests o User request is mapped to an action on the controller
- 27. How Does MVCWork? Request View Controller Response Controller Handles input (HTTP requests) View Visually represents the model
- 28.
- 29. ASP.NET Web API101 ⢠Web API is designed to leverage the HTTP protocol ⢠Uses Convention over configuration for actions o URI + Verb = Controller + Action ⢠Includes a lot of HTTP concepts built-in o For example content negotiation or HTTP caching
- 30. Demo Web API inAction
- 31. ASP.NET Routing ⢠Routingis built into ASP.NET o Can be used by MVC and Web API ⢠Maps the physical files to logical URLs ⢠Provides meaningful URLs ⢠Readable for o Search engines o End users
- 32.
- 33. How Does ASP.NETFit for SPAs? ⢠ASP.NET MVC acts o As the single page generator o As templates generator o Can help to leverage server side mechanisms when they are needed ⢠ASP.NET Web API acts o As the gateway to handle server operations o As the application API
- 34.
- 36. AngularJS? ⢠A MVWframework ⢠Developed and supported by Google ⢠Open source ⢠No external dependencies ⢠Very opinionated
- 37. Demo Adding AngularJS toOur Project
- 38. AngularJS Building Blocks Module Module Module Scope ControllerServiceTemplate Filter Directive Two- Way Binding Dependency Injection Routing
- 39. Controllers Module Module Module Scope Controller ServiceTemplate FilterDirective Dependency Injection Routing
- 40. Controllers ⢠The logicbehind a view part ⢠Holds a child scope o Used as a view-model ⢠Orchestrators for o View operations through the scope o Services
- 41. Scopes ⢠The gluebetween a controller and a view ⢠Include properties and the functions set by controllers that a view can later use var myApp = angular.module(âmyAppâ,[]); myApp.controller(âMyControllerâ, function($scope) { $scope.message = âhelloâ; $scope.myFunc = function() { // do something } });
- 42.
- 43. Services Module Module Module Scope Controller ServiceTemplate FilterDirective Dependency Injection Routing
- 44. Services ⢠Singleton objectsthat are used to perform a specific task ⢠UI independent o Shouldnât manipulate UI elements ⢠Has different types o Each type has its own purpose SERVICE TYPE DESCRIPTION value The injector will return the exact value factory The injector will invoke the given factory function service The injector will use the new keyword to create the service single instance provider The injector will invoke the providerâs $get function
- 45. Services â Cont. â˘Service declaration example: var myApp = angular.module(âmyAppâ,[]); myApp.value(âmyValueâ, âa constant value); myApp.factory(âmyFactoryâ, function(name) { return âHi â + name; }
- 46. Built-in Services ⢠AngularJScomes with several built-in services ⢠You can use services such as: o $http â for communicating over HTTP with remote servers o $resource â for communicating with REST services o $q â for creation of promises o $log â for logging o $window â for communicating with the window object o Many more
- 47.
- 48. Directives Module Module Module Scope Controller ServiceTemplate FilterDirective Dependency Injection Routing
- 49. Directives ⢠Custom HTMLelements and attributes that AngularJS recognizes as part of its ecosystem ⢠Allow to o Extend the existing HTML with your own elements or attributes o Add behavior to existing elements or attributes ⢠Angular includes a long list of built-in directives such as: o ng-app â to declare the main module o ng-controller â to bind a piece of HTML to a controller o ng-repeat â for collection iterator o ng-eventName â add custom behavior on a specific event o Many more
- 50. Custom Directives ⢠Youcan create your own custom directives ⢠Use the module directive function and return a Directive Definition Object (DDO) ⢠DDOs include various configuration options: o templateUrl â the URL for a template the directive will use o Template â appends a given HTML as the child element of the element o replace â If set to true will replace the entire element with a given template (used with the template or templateUrl) o scope â the scope object to use with the directive o Many more
- 51. Custom Directives âCont. ⢠Custom directive example: myApp.directive('myDialog',function () { return { restrict: âEâ, scope: {}, template: â<div>{{message}}</div>â, link: function(scope, element, attrs) { scope.message = âhelloâ; } }; });
- 52.
- 53. Routing Module Module Module Scope Controller ServiceTemplate FilterDirective Dependency Injection Routing
- 54. Routing ⢠One ofthe most important mechanisms in SPAs ⢠Enables developers to intercept route changes ⢠Later on, helps to replace a shell element with a rendered document fragment ⢠You can use an AngularJS routing module o For example, ngRoute is a router module for AngularJS
- 55.
- 56.
- 57. Summary ⢠SPAs areentire web applications built upon one page and JavaScript interactions ⢠Very suitable for mobile development ⢠SPAs are one of the ways to build your next web apps!
- 58. Resources ⢠Download theslide deck - ⢠My Blog â http://www.gilfink.net ⢠Follow me on Twitter â @gilfink
- 59.
- 60.