Embed Size (px)
Citation preview
APP DEMO
AdventureWorks app demo.Review AdventureWorks solution/project structure.
WHAT IS A SINGLE PAGE APPLICATION?Typically there is one web page that serves as the shell for the application, and dynamic content is loaded into the shell as the user navigates.
The app never navigates to another main web page – all navigation is within the main page.
WHAT IS A SINGLE PAGE APPLICATION? (CONT’D)
Heavy on scripting (typically JavaScript).Most scripts are loaded when the app (i.e. the main page) launches (in essence, building the app in the browser).State can be maintained browser-side in the scripts, making the app behave more like a desktop application.Visible content (i.e. HTML templates) are fetched when needed, and then typically cached for reuse.Data is accessed asynchronously (HTTP requests).
WHAT IS ANGULARJS?
AngularJS is a JavaScript framework (made/backed by Google).It does NOT require JQuery, but it can use it (because it is JavaScript).You do NOT have to create a single page application (you can use it for other things (e.g. binding, DOM manipulation, etc.).Load the AngularJS framework file(s) and your AngularJS module file(s) just like normal scripts from a designated web page.Code Demo: Index.html file.
WHAT DOES ANGULARJS DEPEND ON?
It does NOT depend on Jquery.
When you load AngularJS via NuGet, it will tell you that it has no dependencies.
MAIN CONCEPTS
DirectivesModulesControllers / ScopeServicesRouting
DIRECTIVESDirectives are used to manipulate the DOM (e.g. hide something, show something, disable something, replace content, bind values, etc.)Directives take the place of jQuery!There are many built-in directives, most of which are self-explanatory.Make custom directives if you need specific DOM interaction, or reusable widgets.Code Review: ngApp and ngView. (used to create the AngularJS application, and SPA viewport, respectively.)
MODULES
Modules are container for parts of the app (i.e. controllers, services, directives, etc.).Build your app via Modules.The “applicaton” module must match up the ngApp directive in order to build your application!Code Review: app.js, controllers.js
CONTROLLER / SCOPEScope is basically a view model, created in a controller, for which you can bind elements in your view.Controller is a function used to build/initialize the scope for use.Match a controller/scope with a view for separation of logic and presentation.Inject services that you need into the controller function (e.g. $scope, $http, $routeParams, etc.)Set the controller for a view via ngController directive in markup, or via a route.Code Review: controller.js
SERVICES
Services are singleton objects passed into controllers that are used to perform common functions.
Built-in examples: $params, $http, $route, $location, etc.
AngularJS Recommendation: create your own services to provide global functions, methods, and variables.
ROUTING (CORNERSTONE OF SPA)Load the “angular-route.js” script.Configure the $routeProvider service to set up routing (i.e match routes with templates/controllers).Precede URL’s with “#”!Use the $routeParam service in controller to access querystring parameters.Code Review: app.js (route config), controllers.js (use of $routeParam).
TIME PERMITTING ….
A FEW MORE COMMON DIRECTIVES
Very quickly ……………….
These do the work of jQuery!ngShow / ngHidengClickngClassngDisabled
BINDING – NGMODEL DIRECTIVE
Very quickly …………..
Used to bind an element (typically an input element) to a value to the backing controller’s scope.Code Review: Details.cshtml
LISTS – NGREPEAT DIRECTIVE
Very quickly ……………..
Used to create a template for each item in a collection.Used to create HTML lists and tables.Code Review: List.cshtml
