OBJECTIVES

In this training, attendees will learn how to:

  • Define MVC on server and client side
  • Create MVC and Web API applications using ASP.NET MVC on server side
  • Create single page web applications using the MVC pattern of AngularJS
  • Understand the programming model provided by the AngularJS framework
  • Define Angular controllers and directives
  • Control Angular data bindings
  • Implement Responsive Web Applications with AngularJS

PREREQUISITES

Attendees should have some prior understanding of web development, HTML, AJAX, JavaScript, C# and database programming.

DURATION

5 Days

Outline for Web Development using ASP.NET MVC and AngularJS

CHAPTER 1. INTRODUCTION TO ASP.NET MVC

  • Review of ASP.NET Web Forms
  • Advantages and Disadvantages of Web Forms
  • Model-View-Controller Pattern
  • ASP.NET MVC
  • Advantages and Disadvantages of ASP.NET MVC
  • Goals of ASP.NET MVC
  • Unit Testing

CHAPTER 2. GETTING STARTED WITH ASP.NET MVC

  • An ASP.NET MVC 5 Testbed
  • Starter Application
  • Simple App with Controller Only
  • Action Methods and Routing
  • Action Method Return Type
  • Rendering a View
  • Creating a View in Visual Studio
  • The View Web Page
  • Dynamic Output
  • Razor View Engine
  • Embedded Scripts
  • Using a Model with a ViewBag
  • Controller Using the Model & ViewBag
  • View Using the Model and ViewBag
  • Using Model Directly 
  • A View Using Model in Visual Studio
  • View Created by Visual Studio
  • Passing Parameters in Query String

CHAPTER 3. ASP.NET MVC ARCHITECTURE

  • The Controller in ASP.NET MVC
  • The View in ASP.NET MVC
  • The Model in ASP.Net MVC
  • How MVC Works
  • Using Forms
  • HTML Helper Functions
  • Handling Form Submission
  • Model Binding
  • Greet View
  • Input Validation
  • Nullable Type
  • Checking Model Validity
  • Validation Summary

CHAPTER 4. THE MODEL

  • Microsoft Technologies for the Model
  • SmallPub Database
  • ADO.NET
  • Language Integrated Query (LINQ)
  • ADO.NET Entity Framework
  • SmallPub Tables
  • SmallPub Entity Data Model
  • Entity Data Model Concepts
  • Querying the EDM
  • Class Diagram
  • Context Class
  • List of Categories
  • List of Books
  • A LINQ Query
  • IntelliSense
  • Controller
  • Web.config
  • Using a Parameter
  • Modifying a Data Source
  • Entity Framework in a Class Library
  • Data Access Class Library
  • Client Code
  • ASP.NET MVC Database Clients
  • NuGet Package Manager
  • Visual Studio Extensions
  • Online Gallery
  • Entity Framework 6 via NuGet

CHAPTER 5. THE CONTROLLER

  • IController Interface
  • A Low Level Controller
  • Displaying Context
  • Add and Subtract
  • Controller Base Class
  • Action Methods
  • HomeController
  • Math Controller
  • Invoking MathController
  • Receiving Input
  • Non-Nullable Parameters
  • Nullable Parameters
  • Using a Model 
  • HTML Output
  • Filters
  • Asynchronous Controllers

CHAPTER 6. THE VIEW

  • Action Results
  • JavaScript Object Notation
  • Action Method Attributes
  • View Responsibility
  • A Program without a View
  • A Program with a View
  • View Page
  • Passing Data to the View
  • Passing Lists to the View
  • HTML Helper Methods
  • Link-Building Helpers
  • Form Helpers
  • Validation Helpers
  • Templated Helpers
  • Validation in Model
  • Validation in Controller
  • ValidationMessage Helper

CHAPTER 7. ROUTING

  • ASP.NET Routing
  • Routing in ASP.NET MVC
  • RouteCollectionExtensions Class
  • Default Values for URL Parameters
  • Using a Default Route
  • Home Controller
  • Assigning Parameter Values
  • Controller Code
  • View Code
  • Properties of Routes
  • UrlParameter Optional
  • A Problem with the Route Map
  • Matching URLs to Route
  • Route Debugging Utility
  • Multiple Matches
  • Fixing the Bug
  • Debugging Routes
  • Areas

CHAPTER 8. UNIT TESTING

  • Test-Drive Development
  • Functional Tests
  • Unit Tests
  • Test Automation  
  • Refactoring 
  • Regression Testing
  • Unit Testing in ASP.NET MVC
  • Installing UNnit via NuGet
  • A Test Class Library
  • The Model
  • Testing the Model
  • Structure of Unit Tests
  • Assertions
  • Visual Studio Unit Framework
  • Assert Class
  • Assert.AreEqual()
  • CollectionAssert Class
  • StringAssert Class
  • Test Case
  • Test Methods, Class, Runner
  • Ignoring Tests
  • Fixing the Bug
  • Testing Controllers
  • Classes with External Dependencies
  • Dependency Injection
  • Mocking Frameworks
  • Using Moq
  • Models
  • Controller
  • Index View
  • Monthly Payment View
  • Unit Tests
  • Inversion of Control (IoC) Containers

CHAPTER 9. SECURITY

  • Web Security
  • Input Forgery
  • Cross-Site Scripting
  • Entering JavaScript
  • The Attack
  • What Allowed the Attack
  • Blocking the Attack
  • Using Razor
  • Session Hijacking
  • Cross-Site Request Forgery
  • Controller and Model Code
  • View Code
  • Attacker Code
  • The Defense
  • SQL Injection
  • Using the MVC Framework Securely
  • Authorize Attribute
  • ChildActionOnly Attribute
  • RequireHttps Attribute
  • ValidateInput Attribute

CHAPTER 10. ASP.NET WEB API 

  • REST
  • Representation, State and Transfer
  • Collections and Elements
  • Specifying a Start Page
  • Implementing PUT Verb
  • Using Fiddler
  • Composing a Request
  • ASP.NET MVC and We API
  • Route Registration
  • HTTP Response Codes
  • POST Response Code
  • HttpResponseException
  • Web API Clients
  • HttpClient
  • Initializing HttpClient
  • Issuing a GET Request
  • Issuing a POST Request
  • Performing CRUD Operations
  • Book Repository
  • BooksController
  • View
  • Exercise the Server Using Fiddler
  • Client Code: Book Class, Program Class
  • ShowBooks()
  • AddBooks()
  • Update and Delete

CHAPTER 11. CHAPTER DEPLOYMENT IN IIS 7.5

  • Internet Information Services
  • Installing IIS 7.5
  • MVC with IIS 7.5
  • .NET Framework Version
  • Registering ASP.NET
  • Convert to an Application
  • XCOPY Deployment  

CHAPTER 12. INTRODUCTION TO ANGULARJS

  • What is AngularJS?
  • Why AngularJS?
  • Scope and Goal of AngularJS
  • Using AngularJS
  • A Very Simple AngularJS Application
  • Building Blocks of an AngularJS Application
  • Use of Model View Controller (MVC) Pattern
  • A Simple MVC Application
  • The View
  • The Controller
  • Data Binding
  • Basics of Dependency Injection (DI)
  • Other Client Side MVC Frameworks
  • Summary

CHAPTER 13. ANGULARJS MODULE

  • What is a Module?
  • Benefits of Having Modules
  • Life Cycle of a Module
  • The Configuration Phase
  • The Run Phase
  • Module Wide Data Using Value
  • Module Wide Data Using Constant
  • Module Dependency
  • Using Multiple Modules in a Page
  • Summary

CHAPTER 14. ANGULARJS CONTROLLERS

  • Controller Main Responsibilities
  • About Constructor and Factory Functions
  • Defining a Controller
  • Using the Controller
  • Controller Constructor Function
  • More About Scope
  • Example Scope Hierarchy
  • Using Scope Hierarchy
  • Modifying Objects in Parent Scope
  • Modified Parent Scope in DOM
  • Handling Events
  • Another Example for Event Handling
  • Storing Model in Instance Property
  • Summary

CHAPTER 15. ANGULARJS EXPRESSIONS

  • Expressions
  • Operations Supported in Expressions
  • AngularJS Expressions vs JavaScript Expressions
  • AngularJS Expressions are Safe to Use!
  • What is Missing in Expressions
  • Considerations for Using src and href Attributes in Angular
  • Examples of ng-src and ng-href Directives
  • Summary

CHAPTER 16. BASIC VIEW DIRECTIVES

  • Introduction to AngularJS Directives
  • Controlling Element Visibility
  • Adding and Removing an Element
  • Dynamically Changing Style Class
  • The ng-class Directive
  • Example Use of ng-class
  • Setting Image Source
  • Setting Hyperlink Dynamically
  • Preventing Initial Flash
  • Summary

CHAPTER 17. ADVANCED VIEW DIRECTIVES

  • The ng-repeat Directive
  • Example Use of ng-repeat
  • Dynamically Adding Items
  • Special Properties
  • Example: Using the $index Property
  • Scope and Iteration
  • Event Handling in Iterated Elements
  • The ng-switch Directive
  • Example Use of ng-switch
  • Inserting External Template using ng-include
  • Summary

CHAPTER 18. WORKING WITH FORMS

  • Forms and AngularJS
  • Scope and Data Binding
  • Role of a Form
  • Using Input Text Box
  • Using Radio Buttons
  • Using Checkbox
  • Using Checkbox - Advanced
  • Using Select
  • Using Select – Advanced
  • Disabling an Input
  • Reacting to Model Changes in a Declarative Way
  • Example of Using the ng-change Directive
  • Summary

CHAPTER 19. FORMATTING DATA WITH FILTERS IN ANGULARJS

  • What are AngularJS Filters?
  • The Filter Syntax
  • Angular Filters
  • More Angular Filters
  • Using Filters in JavaScript
  • Using Filters
  • A More Complex Example
  • The date Filter
  • The date's format Parameter
  • Examples of Using the date Filter
  • The limitTo Filter
  • Using limitTo Filter
  • Filter Performance Considerations
  • Summary

CHAPTER 20. ANGULARJS $WATCH SCOPE FUNCTION

  • The $watch Function
  • The $watch Function Signature
  • The $watch Function Details
  • Canceling the Watch Action
  • Example of Using $watch
  • Things to be Aware Of
  • More Things to Be Aware Of
  • Performance Considerations
  • Speeding Things Up
  • Summary

CHAPTER 21. COMMUNICATING WITH WEB SERVERS

  • The $http AngularJS Service
  • The Promise Interface
  • The $http Service
  • $http Function Invocation
  • Callback Parameters
  • Request Configuration Properties
  • Shortcut Methods
  • Complete List of Shortcut Methods
  • Using $http.get()
  • Working with JSON Response
  • Using $http.post()
  • Combining $http POST Request Data with URL Parameters
  • The then() Method of the Promise Object
  • The Response Object
  • Making Parallel Web Service Calls
  • Combining Multiple Promises into One
  • Wait for the Combined Promise
  • Setting Up HTTP Request Headers
  • Caching Responses
  • Disabling Caching in IE9
  • Setting the Request Timeout
  • Unit Testing with ngMock
  • Writing Unit Tests
  • Summary

CHAPTER 22. CUSTOM DIRECTIVES

  • What are Directives?
  • Directive Usage Types
  • Directive Naming Convention
  • Defining a Custom Directive
  • Using the Directive
  • Scope of a Directive
  • Isolating Scope
  • Example Scope Isolation
  • Using External Template File
  • Manipulating a DOM Element
  • The Link Function
  • Event Handling from a Link Function
  • Wrapping Other Elements
  • Accepting a Callback Function
  • Supplying Callback Function
  • Summary

CHAPTER 23. ANGULARJS SERVICES

  • Introduction to Services
  • Defining a Service
  • The factory() Method Approach
  • The service() Method Approach
  • The provider() Method Approach
  • Using a Service
  • Configuring a Service using its Provider
  • Summary

CHAPTER 24. INTRODUCTION TO SINGLE PAGE APPLICATION

  • What is a Single Page Application (SPA)?
  • How is it Any Different?
  • Why Create SPA?
  • It's Not All or Nothing
  • Challenges to SPA
  • Implementing SPA Using AngularJS
  • Simple SPA Using Visibility Control
  • Dynamic Templates Using ng-include
  • Example of Dynamic Template
  • SPA Using the $route Service
  • Summary

CHAPTER 25. THE ROUTE SERVICE

  • Introduction to the Route Service
  • Downloading the Route Service Code
  • Using the Route Service
  • Setting up the Route Table
  • URL Fragment Identifier
  • Showing the Views
  • Navigation
  • The $location Service
  • Programmatic Navigation
  • Controllers for the Views
  • Example Controllers for Views
  • Passing URL Parameters
  • Accessing Query Parameters
  • Configuring Route Parameters
  • Accessing Route Parameters
  • HTML5 Mode
  • Using the HTML5 Mode
  • Bookmarking HTML5 Mode URL
  • Summary

CHAPTER 26. ADVANCED FORM HANDLING

  • Introduction to Form Validation
  • Validation and Model Binding
  • Input Type Validation
  • Validation Directives
  • A Note About "required"
  • Detecting Validation State
  • Showing Error Message
  • Other Status Variables
  • Styling Input Fields
  • Styling Other Areas
  • Summary