ASP.NET Core 2.1 and Angular 5 in Visual Studio 2017

•

3 likes•3,149 views

Technical presentation given by Laurent Duveau at the Ottawa IT Community meetup on March 26, 2018. https://www.meetup.com/ottawaitcommunity/events/248541582/

Technology

ASP.NET Core 2.1 and Angular 5 in
Visual Studio 2017
LAURENT DUVEAU
MARCH 26TH, 2018

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Laurent Duveau
@LaurentDuveau
Microsoft MVP in Montreal
Founder of the Angular Academy
2-day Angular Classroom Training
99 classes in 2 years
Montreal, Quebec, Toronto, Ottawa ,
Vancouver, Calgary, Winnipeg, London,
Copenhagen, Helsinki…
March 27-28!

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Stack Overflow Dev Survey 2018

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Agenda
Overview of ASP.NET Core + Angular in VS2017
Coding an App!
QnA

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Setup
.NET Core 2.1 Preview (Win, MacOS, and Linux)
◦ .NET Core 2.1 Preview 1 SDK
◦ .NET Core 2.1 Preview 1 Runtime
Visual Studio 2017 Preview
◦ https://www.visualstudio.com/vs/preview/
Angular Item Templates extension

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Setup
Visual Studio and Visual Studio “Preview” can be installed side-by-side.
=
VS2017 PreviewVS2017

New ASP.NET Core + Angular Project template
ASP.NET CORE 2.0 ASP.NET CORE 2.1 (PREVIEW)
7
Where is my View??
Angular
ASP.NET
MVC
API
Controller
Angular CLI
Project!

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
New ASP.NET Core + Angular Project template
We get the best of both worlds!
◦ ASP.NET Core project: act as an API backend (data access, authorization, …)
◦ Regular Angular CLI project (ClientApp folder): act as a UI web app
The template offers the convenience of hosting both project
types in a single Visual Studio project, that can be built and
published as a single unit.

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Architecture
ASP.NET Core
Web API (RESTFUL)
Server side
Client side
Database
HTML
+ Js

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
New Project template
Angular CLI
◦ Built-in commands: ng serve, ng test, ng lint, …
◦ Easier to follow Angular versions (ng update!)
Webpack middleware integration
◦ In dev, you don’t need to keep rebuilding your client-side application
Hot module replacement
◦ Any file changed is pushed into the browser immediately without
reloading the page

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Or just using dotnet cli…
Step 1: Install the templates
Step 2: Create a new Angular App
Step 3: Change Environment variable to “Development”
Step 4: Build the application (restore npm dependencies on the first run…)
Step 5: Finally, run the app
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
dotnet new angular
SET ASPNETCORE_Environment=Development
dotnet build
dotnet run

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Already familiar with Angular CLI?
No need to run ng serve!
By default the ASP.NET Core app deals with serving both server-
side and client-side parts of your app (Internally, it uses ng
serve).
But it can be slow…
Each time you modify your C# code, the ASP.NET Core app
needs to restart, and the Angular CLI server restarts.

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Run "ng serve" independently!
Startup.cs
◦ Replace:
◦ With:
Now just ng serve in your ClientApp folder!
spa.UseAngularCliServer(npmScript: "start");
spa.UseAngularCliServer("http://localhost:4200");

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Angular Core Concepts
Components Modules
Dependency
Injection
Language
(TypeScript)
Services Data Binding Decorators Routing

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Building SPAs with Components
Header Component
Menu
Component
Footer Component
List ComponentGrid Component

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
What is a Component?

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
What is a Component?
A component is a reusable object
Made up of: HTML
Template
Code
(ts class)

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Map Update
App
DetailsList
ProductsMenu Contact
Your app is a tree of Components

ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018
Angular classroom training
Tomorrow in Ottawa!
Get 50% OFF with
promo code OTTUG50

Recently uploaded

You’ve heard good data matters in Machine Learning, but does it matter for Generative AI applications? Corporate data often differs significantly from the general Internet data used to train most foundation models. Join me for a demo on building an open source RAG (Retrieval Augmented Generation) stack using Milvus vector database for Retrieval, LangChain, Llama 3 with Ollama, Ragas RAG Eval, and optional Zilliz cloud, OpenAI.

Introduction to Open Source RAG and RAG Evaluation

Zilliz

Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)

Julian Hyde

Explore the core of Salesforce success in 'Salesforce Adoption – Metrics, Methods, and Motivation.' We will discuss essential metrics, effective methods to drive adoption, and the driving force behind user engagement and explore strategies for onboarding, training, and continuous support that empower users to navigate the platform seamlessly. By leveraging these tools, you can effectively measure adoption against your company’s goals and create an environment where users not only adopt Salesforce but actively contribute to its ongoing success.

Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom

CzechDreamin

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf

FIDO Alliance

Speed Wins: From Kafka to APIs in Minutes

confluent

How to differentiate Sales Cloud and CPQ on first glance might be tricky if you do not know where to look and what to look at. You will know :-) Managing the sales process within Salesforce is a common use case that can be managed with standart Sales Cloud. If you want to do entire quoting process you will find out Salesforce CPQ solution exists. What is then the difference if both can handle selling products? You will see comparison of 10 different features, which Sales Cloud and Salesforce CPQ handle differently. Simple question you will always remember if you should consider using Salesforce CPQ will be a cherry on top.

10 Differences between Sales Cloud and CPQ, Blanka Doktorová

CzechDreamin

Ever caught yourself nodding along when someone mentions "delivering value" in Agile, but secretly wondering what the heck they actually mean? You're not alone! Join us for an eye-opening session where we'll strip away the buzzwords and dive into the heart of Agile—value delivery. But what is "value"? Is it a mythical unicorn in the world of software development, or is there more to this overused term? This isn't going to be a sit-and-get lecture. We're talking about a face-to-face, interactive meetup where YOU play a crucial role. Come along to: Define It: What does "value" really mean? We’ll build a definition that’s not just words, but a compass for your Agile journey. Contextualise It: Discover what value means specifically to you, your team, your company, and your industry. Because one size does not fit all. Deliver It: Share strategies and gather new ones for uncovering and delivering true value—no more shooting in the dark!

Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx

David Michel

The Metaverse: Are We There Yet?

Mark Billinghurst

Syngulon’s technology expands the capacity for selection of microorganisms. The ability to select individual microbes with a behavior of interest is essential, whether for simple cloning at the bench, or for industry-scale production. Synthetic biology uses the concept of “bioengineering” to improve or modify existing genetic systems to create microbes with desired behaviors, and Syngulon uses this approach to develop its selection technologies. This selection technology is based on bacteriocins, ribosomally-produced peptides naturally made by most bacteria to kill competitive microbial species. These bacteriocins can have a limited or wide target range against other microbial species. This technology offers advantageous over antibiotic selection for several reasons: it avoids the use of antibiotics in the first place, helping to reduce the spread of antibiotic resistant microbes. The technology also increases product yield; as bacteriocins are generally smaller peptides, they do not impose a heavy metabolic burden on the producing cell. They can have a wide target specificity, helping to avoid genetic drift. Finally, our system is 100% plasmid-based (e.g. without chromosomal mutations), making it applicable for use in any E. coli strains.

Syngulon - Selection technology May 2024.pdf

Syngulon

Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf

FIDO Alliance

The standard Salesforce Approval process can be limiting in many ways, especially in complex scenarios. What if there was a way to implement very flexible approvals where one can use Apex code to make data updates in unrelated records, dynamically generate next steps details, and compute assignees on the fly? And still use UI-based configurations to implement concrete approval processes. In this session, we will share ideas behind such a solution and show a few lines of code to get you started.

Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder

CzechDreamin

Screen flow is a powerful automation tool that is commonly designed for internal and external users. However, what about the guest users? We will dive into various methods of launching screen flows and understand how to make them publicly accessible, extending their usability to a broader audience. The presentation will also cover the implementation of security layers and highlight best practices for a smooth and protected user experience. Discover the potential of screen flows beyond conventional use and learn how to leverage them effectively.

Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade

CzechDreamin

How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf

FIDO Alliance

Unlock the mysteries of successful Salesforce interviews in this insightful session hosted by Hugo Rosario (Salesforce Customer), a seasoned hiring manager that leads the Salesforce Department of multinational company with over 100 interviews under their belt. Step into the manager's chair and gain exclusive behind-the-scenes insights into what makes a Salesforce consultant stand out during the interview process. From deciphering the unspoken cues to mastering key strategies, we'll explore the intricacies of the interview process and provide practical tips for consultants looking to not only pass interviews but also thrive in their roles. Whether you're a seasoned professional or just starting your Salesforce journey, this session is your backstage pass to the secrets that hiring managers wish you knew.

Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...

CzechDreamin

The presentation underscores the strategic advantage of treating design systems not just as technical assets but as vital business components that require thoughtful management, robust planning, and strategic alignment with organizational goals. Key Points Covered: - Understanding Design Systems as Business Entities: Conceptualizing design systems as internal business entities can streamline their integration and evolution within a company. - Adoption and Expansion: Elaborating on the importance of tactical adoption across organizational structures, enhancing product suites to cater to user needs and broadening scope to mobile and content authoring solutions. - Data-Driven Development: Utilizing data insights for component development ensures that resources are allocated to create valuable, widely used features. - Financial Modeling for Design Systems: Developing sustainable funding models is crucial for long-term support and success of design systems. - Promoting Internal Buy-In: Stressing on strategies for promoting design systems within the organization to increase engagement and investment from internal stakeholders.

A Business-Centric Approach to Design System Strategy

UXDXConf

IESVE for Early Stage Design and Planning

IES VE

ScyllaDB has the potential to deliver impressive performance and scalability. The better you understand how it works, the more you can squeeze out of it. But before you squeeze, make sure you know what to monitor! Watch our experienced Postgres developer work through monitoring and performance strategies that help him understand what mistakes he’s made moving to NoSQL. And learn with him as our database performance expert offers friendly guidance on how to use monitoring and performance tuning to get his sample Rust application on the right track. This webinar focuses on using monitoring and performance tuning to discover and correct mistakes that commonly occur when developers move from SQL to NoSQL. For example: - Common issues getting up and running with the monitoring stack - Using the CQL optimizations dashboard - Common issues causing high latency in a node - Common issues causing replica imbalance - What a healthy system looks like in terms of memory - Key metrics to keep an eye on This isn’t “Death-by-Powerpoint.” We’ll walk through problems encountered while migrating a real application from Postgres to ScyllaDB – and try to fix them live as well.

Optimizing NoSQL Performance Through Observability

ScyllaDB

WSO2CONMay2024OpenSourceConferenceDebrief.pptx

Jennifer Lim

When you think of a highly secure meeting environment, do you instantly think 'Microsoft Teams'!? Or do you think about some unknown application, troublesome UI and daunting login process...? If you think the latter - let's change that! In this session Femke will show you how using Teams Premium features can create secure, but also good looking meetings! PRETTY. Make sure your company's brand is represented before, during and after the meeting with Customization policies in place. SECURE. Lets utilize Meeting templates and Sensitivity Labels to protect your meeting and data to prevent sensitive information from being leaked. After this session, you will have a clear understanding of the capabilities of Teams Premium features and how to set up the perfect meeting that suits your organizational requirements!

ECS 2024 Teams Premium - Pretty Secure

Femke de Vroome

Welcome to UiPath Test Automation using UiPath Test Suite series part 2. In this session, we will cover API test automation along with a web automation demo. Topics covered: Test Automation introduction API Example of API automation Web automation demonstration Speaker Pathrudu Chintakayala, Associate Technical Architect @Yash and UiPath MVP Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP

UiPath Test Automation using UiPath Test Suite series, part 2

DianaGray10

Recently uploaded (20)

Introduction to Open Source RAG and RAG Evaluation

Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)

Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf

Speed Wins: From Kafka to APIs in Minutes

10 Differences between Sales Cloud and CPQ, Blanka Doktorová

Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx

The Metaverse: Are We There Yet?

Syngulon - Selection technology May 2024.pdf

Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf

Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder

Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade

How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf

Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...

A Business-Centric Approach to Design System Strategy

IESVE for Early Stage Design and Planning

Optimizing NoSQL Performance Through Observability

WSO2CONMay2024OpenSourceConferenceDebrief.pptx

ECS 2024 Teams Premium - Pretty Secure

UiPath Test Automation using UiPath Test Suite series, part 2

ASP.NET Core 2.1 and Angular 5 in Visual Studio 2017

1. ASP.NET Core 2.1 and Angular 5 in Visual Studio 2017 LAURENT DUVEAU MARCH 26TH, 2018

2. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Laurent Duveau @LaurentDuveau Microsoft MVP in Montreal Founder of the Angular Academy 2-day Angular Classroom Training 99 classes in 2 years Montreal, Quebec, Toronto, Ottawa , Vancouver, Calgary, Winnipeg, London, Copenhagen, Helsinki… March 27-28!

3. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Stack Overflow Dev Survey 2018

4. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Agenda Overview of ASP.NET Core + Angular in VS2017 Coding an App! QnA

5. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Setup .NET Core 2.1 Preview (Win, MacOS, and Linux) ◦ .NET Core 2.1 Preview 1 SDK ◦ .NET Core 2.1 Preview 1 Runtime Visual Studio 2017 Preview ◦ https://www.visualstudio.com/vs/preview/ Angular Item Templates extension

6. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Setup Visual Studio and Visual Studio “Preview” can be installed side-by-side. = VS2017 PreviewVS2017

7. New ASP.NET Core + Angular Project template ASP.NET CORE 2.0 ASP.NET CORE 2.1 (PREVIEW) 7 Where is my View?? Angular ASP.NET MVC API Controller Angular CLI Project!

8. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 New ASP.NET Core + Angular Project template We get the best of both worlds! ◦ ASP.NET Core project: act as an API backend (data access, authorization, …) ◦ Regular Angular CLI project (ClientApp folder): act as a UI web app The template offers the convenience of hosting both project types in a single Visual Studio project, that can be built and published as a single unit.

9. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Architecture ASP.NET Core Web API (RESTFUL) Server side Client side Database HTML + Js

10. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 New Project template Angular CLI ◦ Built-in commands: ng serve, ng test, ng lint, … ◦ Easier to follow Angular versions (ng update!) Webpack middleware integration ◦ In dev, you don’t need to keep rebuilding your client-side application Hot module replacement ◦ Any file changed is pushed into the browser immediately without reloading the page

11. Demo

12. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Or just using dotnet cli… Step 1: Install the templates Step 2: Create a new Angular App Step 3: Change Environment variable to “Development” Step 4: Build the application (restore npm dependencies on the first run…) Step 5: Finally, run the app dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0 dotnet new angular SET ASPNETCORE_Environment=Development dotnet build dotnet run

13. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Already familiar with Angular CLI? No need to run ng serve! By default the ASP.NET Core app deals with serving both server- side and client-side parts of your app (Internally, it uses ng serve). But it can be slow… Each time you modify your C# code, the ASP.NET Core app needs to restart, and the Angular CLI server restarts.

14. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Run "ng serve" independently! Startup.cs ◦ Replace: ◦ With: Now just ng serve in your ClientApp folder! spa.UseAngularCliServer(npmScript: "start"); spa.UseAngularCliServer("http://localhost:4200");

15. Demo

16. Let’s talk about Angular

17. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Angular Core Concepts Components Modules Dependency Injection Language (TypeScript) Services Data Binding Decorators Routing

18. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Building SPAs with Components Header Component Menu Component Footer Component List ComponentGrid Component

19. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 What is a Component?

20. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 What is a Component? A component is a reusable object Made up of: HTML Template Code (ts class)

21. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Map Update App DetailsList ProductsMenu Contact Your app is a tree of Components

22. Demo

23. ASP.NET Core 2 and Angular 5 in Visual Studio 2017 Ottawa IT Community, march 2018 Angular classroom training Tomorrow in Ottawa! Get 50% OFF with promo code OTTUG50

24. Thank you!

ASP.NET Core 2.1 and Angular 5 in Visual Studio 2017

Recommended

Recommended

More Related Content

More from Laurent Duveau

More from Laurent Duveau (20)

Recently uploaded

Recently uploaded (20)

ASP.NET Core 2.1 and Angular 5 in Visual Studio 2017