Monday, June 25, 2018

How to run angular app

Introduction

  1.  ASP.NET Core + Angular in VS2017 
  2. Installation
  3. Archistructure 
  4. Demo Project
  5. Angular Core Concepts
  6. Building SPAs with Components
  7. What is a Component?
  8. Your app is a tree of Component

Overview of ASP.NET Core + Angular in VS2017
  • What is ASP.NET Core. ASP.NET Core is an open source and cloud-optimized web framework for developing modern web applications that can be developed and run on Windows, Linux and the Mac. It includes the MVC framework, which now combines the features of MVC and Web API into a single web programming framework.
  • Angular Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is itself written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Installation

  • Download and install the latest version of Node.js from here
  • SQL Server 2014 or above
  • NET Core 2.1 Preview (Win, MacOS, and Linux)
                 1 .NET Core 2.1 Preview 1 SDK  from here
                 2 .NET Core 2.1 Preview 1 Runtime here
  •        Visual Studio 2017 Preview
                      1.https://www.visualstudio.com/vs/preview/
  • Angular Item Templates extension

Archistructure

Demo Project

  • Open vs2017 create  new project >>Web >> select .Net Core >> Asp.net core web application
  • Select Angular app template and click to OK
  • Now right click on your ClientApp Folder and select open containing folder
  • Write cmd on path and enter and run > npmInstall
  • Now run your application and automatically restore your npm packages.
  • See your project structure given below.

Angular Core Concepts

Building SPAs with Components

What is a Component?


  • A component is a reusable object
  • Made up of: Code(ts class) + html Template

Your app is a tree of Components

  • Now see the output of your first project.

You can check my code from here