This session will present an introduction to the AngularJS JavaScript framework. In order to present the main concepts of AngularJS, we will review a simple Single Page Application (SPA) constructed with the framework. A basic knowledge of HTML and JavaScript will be helpful in understanding the concepts presented in this session.

1. INTRO TO ANGULARJS
Using a very simple Single Page Application
Ryan Richard
Ryan.Richard@Sparkhound.com

2. APP DEMO
AdventureWorks app demo.
Review AdventureWorks solution/project structure.

3. 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.

4. 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).

5. 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.

6. 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.

7. MAIN CONCEPTS
Directives
Modules
Controllers / Scope
Services
Routing

8. DIRECTIVES
Directives 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.)

9. 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

10. CONTROLLER / SCOPE
Scope 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

11. 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.

12. 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).

13. TIME PERMITTING ….

14. A FEW MORE COMMON DIRECTIVES
Very quickly ……………….
These do the work of jQuery!
ngShow / ngHide
ngClick
ngClass
ngDisabled

15. 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

16. 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