White Paper : ASP.NET Core AngularJs 2 and Prime
1 like755 views
This document provides an overview of ASP.NET Core and instructions for setting up an ASP.NET Core project with Angular 2 and PrimeNG. It discusses .NET Core as a cross-platform, open-source, and modular framework. It then provides steps for installing prerequisites and creating an ASP.NET Core project on Windows, MacOS and Linux. It also covers adding Angular 2 and PrimeNG functionality and integrating them with the ASP.NET Core project.
White Paper : ASP.NET Core AngularJs 2 and Prime
- 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: