EIEIOTECHNOVATION
← Training programmes

EIEIO / PROGRAMMING & DEVELOPMENT

ASP.Net Core MVC with Angular 4

Course outline

5 days
Discuss this programme →

Duration

5 days

Overview

This course provides a practical hands-on introduction to developing Web applications using ASP.NET Core MVC 6 and C#. This Web development framework from Microsoft emphasizes separation of concerns in the architecture and testability of applications. This course covers development on Microsoft’s new .NET Core platform. The course is current to .NET Core 2.0, which is a major update of the original .NET Core 1.0. Working with .NET Core is now simpler, as project information is consolidated in project files without the need for source JSON files. Also, the .NET Core 2.0 API has been extended and is a much larger subset of classical .NET than in .NET Core 1.0.

A major restructuring of the .NET platform, .NET Core is cross-platform, open source, and modular designed for creating modern web applications and services, libraries and console applications. It is available on Windows, Mac and Linux. .NET now is a family of frameworks, including both the classical .NET available on Windows and the new .NET Core package-based frameworks that are cross-platform.

This course covers the fundamentals of the Model-View-Controller design pattern and its implementation in ASP.NET Core MVC. This technology is compared with classical ASP.NET Web Forms. Visual Studio 2017 with ASP.NET Core 2.0 is used as a productive platform for creating MVC Web applications. After presenting the fundamentals of the technology with several examples, the main components of Model, Controller and View are covered in detail. The discussion of the Model incorporates Microsoft technologies for persisting data, including XML Serialization and ADO.NET with SQL Server 2016. The routing mechanism of ASP.NET MVC is covered. The course includes an introduction to ASP.NET Web API.

Introduction to Angular training covers everything you need to know to get started with this next generation of the Angular framework. Angular (version 4 and above using TypeScript) makes the creation of single page applications even easier that before. In this course developers will learn to use Angular Directives and to create Angular Components and Services to develop applications based on the Model-View-Controller (MVC) architecture. You will learn to use HTML Templates to define views and to connect views with code using output, two-way, event and property bindings. The course reviews the benefits and challenges of Single Page Applications and how to overcome those challenges using the Angular Router. The course also covers everything you need to know about Typescript - a programming language based on JavaScript that is used to create Angular applications.

Objective

  • Gain a thorough understanding of the philosophy and architecture of Web applications using ASP.NET Core MVC
  • Gain a practical understanding of.NET Core
  • Acquire a working knowledge of Web application development using ASP.NET Core MVC 6 and Visual Studio 2017
  • Persist data with XML Serialization and ADO.NET with SQL Server 2016
  • Create HTTP services using ASP.NET Core Web API
  • Deploy ASP.NET Core MVC applications to the Windows Azure cloud
  • A brief refresher on JavaScript and TypeScript
  • Understanding Angular 4 Framework
  • Angular 4 components
  • Developing a complete Web Solution based on MVC framework
  • Single Page Application (SPA)
  • Multiple Pages Application using Router
  • In this training, attendees will learn how to:
  • Create single page web applications using the MVC pattern of Angular
  • Understand how write and organize Angular code
  • Program Angular View Components and Services
  • Use Angular output, two-way, event and property bindings
  • Exchange data with network servers using the Angular HTTP Client
  • Work with Angular Pipes to format data
  • Create and work with Angular Forms
  • Angular Component Router

Target Participants

The primary target audience for this course is software developers / programmers. This program is for anybody who has programming background and interested in diving into the development of mobile apps for iOS and Android.

Program Prerequisites

Good working knowledge of C# and the .NET Framework is required. Experience in the Basic knowledge of HTML, Prior exposure to .NET Core will be useful. Students should have some prior understanding of web development using, HTML, CSS and JavaScript. Students should also have basic programming experience in at least one of the following programming languages, html, C#, VB, VB.net, css, javascript, typescript, ASP, ASP.net or another web or application programming language. Lab exercises provide essential and real world practical hands-on experience for each topic.

Mode of Delivery

Every participant will be provided with course notes and are required to bring in their own laptops for hands-on exercise and practice sessions.

Day 1

  • Introduction to ASP.NET Core MVC
  • Review of ASP.NET Web Forms
  • Advantages and Disadvantages of Web Forms
  • Model-View-Controller Pattern
  • ASP.NET Core MVC
  • .NET Core
  • Considerations in Using ASP.NET MVC
  • Unit Testing
  • Getting Started with ASP.NET Core MVC
  • ASP.NET Core MVC Testbed
  • Using Visual Studio
  • Configuring for ASP.NET Core MVC
  • Rendering Views
  • Razor View Engine
  • Dynamic Output
  • ASP.NET MVC Architecture
  • The Controller in ASP.NET MVC
  • The View in ASP.NET MVC
  • The Model in ASP.NET MVC
  • Helper Methods for HTML
  • Form Submission
  • Model Binding
  • Input Validation
  • View Start files
  • View Import files
  • The Model
  • More Complex Models in MVC Programs
  • Microsoft Technologies for Model Persistence
  • Using XML Serialization
  • NuGet Package Manager
  • Using ADO.NET
  • Model Binding
  • Data Annotation attributes and validation
  • Handle exception errors and status

Day 2

  • The Controller
  • Controller Base Class
  • Actions
  • Retrieving Data from a Request
  • Action Results
  • Action Attributes
  • Serving Static Files
  • Filters
  • The View
  • View Responsibility
  • Using ViewBag
  • Using Dynamic Objects
  • Html Helpers
  • Validation Attributes
  • Routing
  • Routing in ASP.NET Core MVC
  • Properties of Routes
  • Parameters in Routing
  • Registering Routes
  • Attribute Routing
  • ASP.NET Core Web API
  • Representational State Transfer
  • REST and Web API
  • HTTP Services Using Web API
  • HTTP Testing Tools
  • Using Postman
  • Query Strings
  • HTTP Response Codes
  • ASP.NET Web API Clients

Day 3

  • Web API
  • Web API Tutorials
  • What is Web API?
  • Create Web API Project
  • Test Web API
  • Web API Controller
  • Configure Web API
  • Web API Routing
  • Parameter Binding
  • Action Return Type
  • Data Formats
  • Media Type Formatters
  • Web API Filters
  • Create Web API for CRUD
  • Implement Get Method
  • Implement Post Method
  • Implement Put Method
  • Implement Delete Method
  • Consume Web API
  • Consume Get method in MVC
  • Consume Post method in MVC
  • Consume Put method in MVC
  • Consume Delete method in MVC
  • HttpClient
  • Dependency Injection
  • Web API Hosting
  • Useful Resources
  • JavaScript

Introduction

  • JavaScript Refresher
  • Basic Language features
  • Creating variables
  • Control statements
  • Functions and Functional programming
  • Creating objects
  • TYPESCRIPT

Introduction

  • Understanding the case for TYPESCRIPT
  • Types in TYPESCRIPT
  • Functions, lambdas and execution flow
  • Classes, Interfaces and Inheritance
  • Decorators
  • Organizing application with modules
  • Design Patterns such as Decorator, Observable

Day 4

  • Introduction to Angular
  • What is Angular 4
  • Central Features of the Angular Framework
  • Scope and Goal of Angular
  • Angular 4 vs. AngularJS
  • Installing and Using Angular 4
  • Adding Angular 4 and Dependencies to Your App
  • Building Blocks of and Angular 4 Application
  • A Basic Angular 4 Application
  • What is new in Angular 4
  • Summary
  • Building with Components
  • Introducing the component tree
  • Explaining Dependency Injection
  • Component Starter
  • Developing a Simple Feedback Component
  • Feedback Component: Add HTML
  • The HTML Component Template
  • The templateUrl property
  • Feedback Component: Add CSS Styling
  • Feedback Component: Hook Up Input Fields and Button
  • Feedback Component: Fields & Button in the Component Class
  • Component Decorator Properties
  • Component Lifecycle Hooks
  • Using a Lifecycle Hook: OnInit
  • Summary
  • Data and Event Binding
  • Binding Syntax
  • One-Way Output Binding
  • Binding Displayed Output Values
  • Two-Way Binding of Input Fields
  • Input Binding Examples
  • Binding Events
  • Binding Events Examples
  • Setting Element Properties
  • Setting Properties: Examples
  • Summary
  • Attribute Directive and Property Binding
  • What are Directives
  • Directive Types
  • Apply Styles by Changing Classes
  • Changing Classes – Example
  • Applying Styles Directly
  • Applying Styles Directly - Example
  • Obsolete Directives and Property Binding
  • Controlling Element Visibility
  • Setting Image Source Dynamically
  • Setting Hyperlink Source Dynamically
  • Summary
  • Structural Directives
  • Adding and Removing Elements Dynamically
  • Looping Using ngFor
  • ngFor - Basic Syntax
  • ngFor - Full Template Syntax
  • Creating Tables with ngFor
  • ngFor Local Variables
  • ngFor Changes in the backing data source
  • Swapping Elements with ngSwitch
  • ngSwitch - Basic Syntax
  • ngSwitch - Full Template Syntax
  • Summary

Day 5

  • Template Driven Forms
  • Note on Deprecated Forms APIs
  • A Basic Angular Form
  • Binding Input Fields
  • Accessing the Form Object
  • Binding the Form Submit Event
  • The Submit Function
  • Basic HTML5 Validation - "required" Attribute
  • HTML5 vs. Angular Validation
  • Angular Validators
  • Angular Validation State
  • Displaying Form Validation State
  • Displaying Field Validation State
  • Displaying Validation State Using Classes
  • Disabling Submit when Form is Invalid
  • Submitting the Form
  • Binding to Object Variables
  • Additional Input Types
  • Checkboxes
  • Select(drop down) Fields
  • Rendering Options for Select (drop down)
  • Date fields
  • Radio Buttons
  • Summary
  • Services and Dependency Injection
  • What is a Service?
  • Creating a Basic Service
  • What is Dependency Injection?
  • What Dependency Injection Looks Like
  • Injecting Services
  • Using a Service in a Component: Dedicated Instance
  • Using a Service in a Component: Dedicated Instance - Example Code
  • Using onInit to Initialize Component Data
  • Using a Shared Service Instance
  • Dependency Injection and @Host
  • Dependency Injection and @Optional
  • Summary
  • HTTP Client
  • The Angular HTTP Client
  • Using The HTTP Client - Overview
  • Setting up HTTP_PROVIDERS in the Root Component
  • Importing Individual Providers into Services
  • Service Using Http Client
  • Service Imports
  • The Observable object type
  • What does an Observable Object do?
  • Making a Basic HTTP GET Call
  • Using the Service in a Component
  • The PeopleService Client Component
  • Client Component Code Review
  • Importing Observable Methods
  • Enhancing the Service with .map() and .catch()
  • Using .map()
  • Using .catch()
  • Using toPromise()
  • GET Request
  • GET Request with Options
  • POST Request
  • POST Request Example
  • Reading HTTP Response Headers
  • Summary

Programme scope, delivery arrangements and suitability are confirmed during enquiry.