Goal
With this you will be able to understand ASP.NET Core and Angular 2.0 to build powerful and
dynamic applications from the scratch and guide you to cutting-edge web development.
.NET Core is …
• A reimplementation of the .NET framework.
• Multi-platform, with applications that can be Written, compiled and executed on Windows, Linux and
MacOS.
• Open-source, hosted on GitHub and open to community contributions. (https://github.com/dotnet/core)
• Modular, where each API is distributed in an independent NuGet package.
• The ability to create MVC ASP sites and Web APIs
• Quick to get started with simple command-line utilities.
• Compatible with traditional .NET Framework and .NET Xamarin through .NET Standard.
• Powerful: .NET Core-based websites are faster than those based on the .NET Framework.
Getting Ready
Windows
• Preparing the workspace
Download Visual Studio 2017
.NET Core tools are included in Visual Studio 2017..NET Core for Visual
https://www.visualstudio.com/thank-you-downloading-visual-
studio/?sku=community
Install the .NET Core workload
Make sure you installed the workload ".NET Core cross-platform development". You
can check and install workloads by launching the Visual Studio Installer.
Getting Ready
MacOS
Preparing the workspace
Install Pre-requisites • Homebrew and OpenSSL
After installing brew, do the following:
.NET Core SDK for OS X
https://go.microsoft.com/fwlink/?linkid=843444
Getting Ready
Linux
• Set up the apt-get that hosts the packages
• Install .NET Core SDK
• Introduction to the .NET CLI
• Test that you have you .NET installed by going to command line or
terminal and typing :
dotnet
https://www.microsoft.com/net/core#linuxredhat
Getting Ready
• Install JavaScript runtime
built NodeJs.js
• https://nodejs.org/en/
Setting up the project
• Open Visual Studio 2017, Click on File / New / Project and select the project template Visual C# / .NET Core / Console App (.NET Core).
• From the Templates tree, expand the Visual C# node and select the Web
• subfolder: the right section of the modal window will be populated by a number
• of available project templates
Setting up the project
• Select the ASP.NET Core Web Application (.NET Framework) template and fill in the relevant Name, Location, and Solution name fields.
• In the next modal window, we can further customize our template by choosing the default contents to include in our project (Empty, Web API, or Web Application) and the authentication mechanism, should we want to use one.
• Choose Web API and No authentication, then click the OK button to create the project.
Package and resource managers
• In Visual studio 2015:
• The solution's projects are nowcreated in a /src/ folder by default.This is just a convention, though, asthey can be placed anywhere.
• There is a new folder calledwwwroot, which will contain thecompiled, ready-to publishcontents of our application, whileeverything else will be the projectsource code.
Package and resource managers
• In Visual studio 2017:
• The solution's projects are nowanymore created in a /src/ folder, it’slike before under the projectdirectory.Different.
• There is a new folder called wwwroot,which will contain the compiled,ready-to publish contents of ourapplication, while everything else willbe the project source code. Thesame.
• Dependencies are the Referencesused in our project and it’s ordered bySDK and Nuget.
Package and resource managers
• Startup.cs
• This class was introduced in OWIN-based applications to replace mostof the tasks previously was handled in Global.asax.
• In ASP.NET Core this class serve for the same role, it is the placewhere we can add services, choose which application modules andmiddleware functions to load, handle dependency injection tasks, andconfigure the pipeline.
• Gloabal.asax of today named Startup.cs has been completelyrewritten to be as pluggable and lightweight as possible, meaningthat it will include and load only what's strictly necessary to fulfill ourapplication's tasks.
Testing the HTTP request pipeline
• If we run our application again, we should now be welcomed with the following:
Launch angular project
• If you have already a project you can force the creation like this :
• dotnet new angular –all
PrimeNG
• PrimeNG is a collection of rich UI components for Angular 2. PrimeNGis a sibling of the popular JavaServer Faces Component Suite, PrimeFaces.
Add PrimeNG – webpack.config.vendor.js PrimeNg does not support pre-rendering so in ..\Views\Home\Index.cshtml, change:
<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
to:
<app>Loading...</app>
Update webpack.config.vendor.js
• We modified the webpack.config.vendor.js file (to add PrimeNg and Font Awesome) but it is not updated by the classic build process.
• So, We have to run its configuration manually whenever we alter it.
• In a command prompt, at the project root, run:
• webpack --config webpack.config.vendor.js
Add new page HTML
• Create a folder called prime in the components folder and add the following code to ..\ClientApp\app\components\prime\prime.component.html:
Add new TS file
• Create the file and add the following code to ..\ClientApp\app\components\prime\prime.component.ts:
Update navmenu.component.html
• Add the following code to ..\ClientApp\app\components\navmenu\navmenu.component.html: