Building Blocks of Angular 2 and ASP.NET Core

Building Blocks of
Angular 2 and ASP.NET Core
By Levi Fuller

Overview
• Angular CLI
• Overview & Commands
• Angular 2
• Overview
• Template Binding
• Decorators
• Lifecycle Hooks
• Directives
• Components
• Pipes
• Injectables (Services)
• Modules
• ASP.NET Core
• Overview
• Commands / Files
• Dependency Injection
• Controllers
• Pet Store Demo

What is the Angular CLI?
Provides a set of commands which enable
you to:
• Scaffold a new app
• Scaffold the building blocks
• Run the application
• Build the application
• Deploy it
Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

NG2 with the Angular CLI
• ng new <app-name>
• Creates new directory and creates the app
scaffolding inside the new directory
• ng serve
• Runs the application in memory via LiveReload server
• ng build
• Compiles the application and copies the output to
the `dist` directory
• ng github-pages:deploy
• Builds the app, setups a GitHub repo, publishes to
the GitHub page

Angular 2 Overview
Open source, front-end
framework for developing Single
Page Application (SPA’s)
• Supports TypeScript, Dart, or
JavaScript
• Component-based architecture
• Up to 5x faster than AngularJS
pet-
card.compo
nent
pet-
card.compo
nent
pet.options
app.component
Browse-pets.component

Data Binding
Data binding is the mechanism for coordinating what users see with the
component’s data values
<input type=“text” value=“Levi”>
{{person.name + ‘ is ’ + getAge(person.birthday)}}
<input [value]=“person.name”>
<input (input)=“name=$event.target.value”>
<input [(ngModel)]=“name”>
<input [ngModel]=“name” (ngModelChange)=“name=$event.target.value”>
<input [value]=“name” (input)=“name=$event.target.value”>
One-Time Initialization
This is not data binding
Event Binding
One-Way from view to
data source
Two-Way Binding
Property Binding +
Event Binding
Interpolation, Property,
Attribute, Class, and
Style Binding
Data source to view
One-WayTwo-Way

Template Binding Example
app.component

Decorators
• Decorators are functions that provide a declarative way to
add metadata to code
• Metadata tells Angular how to process a class

Lifecycle Hooks
• Implemented by components and directives
• Methods which are called when specific events
occur
• ngOnChanges() – called when data-bound input
properties are set/reset
• ngOnInit() – called shortly after the component is
created
• ngOnDestroy() – Called just before Angular destroys
the directive component

Lifecycle Hooks Example
app.componentlist.component

@Directive()
Directive is an attribute which can extend/modify the functionality of an element
• Target an element by its Selector – A CSS selector
• ‘[attributeToSelect]’
• ‘tag-to-select’
• ‘.class-to-select’
• Three Types
• Components - Directives with a template
• Structural Directives – Change the DOM layout by adding/removing DOM elements
• Attribute Directives – Change the appearance or behavior of an element

@Directive() Example
app.component hover-color.directive

@Component()
• A component is a directive with a template which contains logic for updating
or retrieving data to/from the view
@Component({
selector: ‘app-list’,
templateUrl: ‘./list.component.html’,
styleUrls: [‘./list.component.css’],
providers: [ListService]
})
export class ListComponent {}
Element to componentize
Path to View
Path to Styles
Component-
Scoped Services

@Component() Example
list.componentapp.component

@Pipe()
Pipes are used to transform data
• Two Types
• Pure – Only executed when a change is made to a primitive input value or a change
to an object reference
• Impure – Executed during every component change detection cycle
<p> {{ price | convertMoney : ’EUR’ : ’USD’ }} </p>
Object to
Transform
Pipe Name Argument 1 Argument 2

@Pipe() Example
app.component convert-money.pipe

@Injectable()
• Services are reusable classes which perform a specific task and are injected
using Angular 2’s hierarchical Dependency Injection system
• Constructor Injection
• Decorated with @Injectable() if any dependencies are required
• Singletons
• Domain scoped to Root Module or instance of Component
Root Module
Root DI Container
Component A
Instance Scoped DI Container
Component B
Instance Scoped DI Container

@Injectable() Example
app.component currency.service

@NgModule()
Helps organize application or library into cohesive blocks of functionality
• Declare what components, directives, and pipes (CDP’s) are used
• Provide services at the root module level
@NgModule({
imports: [FormsModule, CommonModule],
declarations: [ListComponent, HoverColorDirective],
exports: [ListComponent],
providers: [ListService]
})
export class CustomControlsModule {}
Modules used by any declared CDP’s, standalone
Declare any CDP’s used by this module
All modules which will exported and made available to the importing module
Any services used by the declared modules; Will be added to the root DI container

ASP.NET Core Overview
• Built upon .NET Core, ASP.NET Core is a lean, cross-platform, open-source
framework for building web and cloud applications
• Supports C# and F#
• All Features/Libraries via NuGet packages (similar to NPM)
• Auto-Compiled Code
• Native Dependency Injection
• .NET Core and ASP.NET Core on Github

Dotnet Core Commands
• dotnet new
• creates a new project in the current directory
• dotnet restore
• installs the required NuGet packages
• dotnet run
• starts the application
• yo aspnet
• Options for scaffolding .NET Core apps

Components of ASP.NET Core
• Project.json
• Specify dependencies, configurations, frameworks
used and their versions
• Program.cs
• Application’s entry point
• Host is created and ran from here
• Startup.cs
• The configuration file for ASP.Net Core
• Inject services
• Configure services

Dependency Injection
Adds services to a container in order to achieve loose coupling between
objects and their dependencies
• Constructor Injection
• Service Types
• Transient
• Scoped
• Singleton
Public void ConfigureServices(IServiceCollection services) {
services.AddCors();
services.AddMvcCore().AddJsonFormatters();
services.AddScoped<PetService>();
services.AddSingleton<UtilityService>();
}
Public void Configure(IApplicationBuilder app, …) {
app.UseCors(cors => cors.WithOrigins(http://localhost:4200)
.AllowAnyHeader().AllowAnyMethod());
app.UseMvc();
}
Register Services
Use Services
Startup.cs

Controllers
Classes that handle browser requests and retrieves model data
[Route(“api/[controller]”)
public class PetsController : Controller {
private readonly PetService _petService;
public PetsController(PetService petService) {
_petService = petService;
}
[HttpGet(“{animalId}”)]
public List<Pet> Get(long animalId, bool isForSale = false) {
return _petService.GetPets(animalId: animalId, isForSale);
}
}
Route Template
http://myapp/api/pets
Constructor Injection
HTTP Verb
http://myapp/api/pets/4?isForSale=true
Inherit Controller base class
Query String Parameters

Building Blocks of Angular 2 and ASP.NET Core

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Building Blocks of Angular 2 and ASP.NET Core (20)

Recently uploaded (20)

Building Blocks of Angular 2 and ASP.NET Core