ASP.NET Core AngularJs 2 and Prime https://www.primefaces.org/primeng/#/

1. ASP.NET Core
Visual Studio 2017
White papers
By Hamida REBAI
Cross-Platform Framework

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

3. Agenda
• .NET Core is ?
• Getting Ready

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

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

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

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

8. Getting Ready
• Install JavaScript runtime
built NodeJs.js
• https://nodejs.org/en/

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

10. Setting up the project

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

15. Package and resource managers
• In Visual studio 2015:
• The solution's projects are now
created in a /src/ folder by default.
This is just a convention, though, as
they can be placed anywhere.
• There is a new folder called
wwwroot, which will contain the
compiled, ready-to publish
contents of our application, while
everything else will be the project
source code.

16. Package and resource managers
• In Visual studio 2017:
• The solution's projects are now
anymore created in a /src/ folder, it’s
like before under the project
directory. Different.
• There is a new folder called wwwroot,
which will contain the compiled,
ready-to publish contents of our
application, while everything else will
be the project source code. The
same.
• Dependencies are the References
used in our project and it’s ordered by
SDK and Nuget.

17. Package and resource managers
• Startup.cs
• This class was introduced in OWIN-based applications to replace most
of the tasks previously was handled in Global.asax.
• In ASP.NET Core this class serve for the same role, it is the place
where we can add services, choose which application modules and
middleware functions to load, handle dependency injection tasks, and
configure the pipeline.
• Gloabal.asax of today named Startup.cs has been completely
rewritten to be as pluggable and lightweight as possible, meaning
that it will include and load only what's strictly necessary to fulfill our
application's tasks.

18. Testing the HTTP request pipeline
• If we run our application again, we should now be welcomed with the
following:

19. Adding Angular 2
• For new project
• Create JavaScript Services project

20. Adding Angular 2

21. Launch angular project
• If you have already a project you can force the creation like this :
• dotnet new angular –all

22. PrimeNG
• PrimeNG is a collection of rich UI components for Angular 2. PrimeNG
is a sibling of the popular JavaServer Faces Component Suite,
PrimeFaces.

23. Add PrimeNG - package.json

24. Add PrimeNG – webpack.config.vendor.js

25. Add PrimeNG – webpack.config.vendor.js
PrimeNg does not support pre-rendering so
in ..ViewsHomeIndex.cshtml, change:
<app asp-prerender-
module="ClientApp/dist/main-
server">Loading...</app>
to:
<app>Loading...</app>

26. Install webpack
• npm install -g webpack

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

28. Add new page HTML
• Create a folder called prime in the components folder and add the
following code to
..ClientAppappcomponentsprimeprime.component.html:

29. Add new TS file
• Create the file and add the following code to
..ClientAppappcomponentsprimeprime.component.ts:

30. Update app.module.ts
Update the file at: ..ClientAppappapp.module.ts to add:

31. Update navmenu.component.html
• Add the following code to
..ClientAppappcomponentsnavmenunavmenu.component.html:

32. Launch Prime part