This is my first session on Angular 9 tutorials. In the tutorial, we will be learning about
1.Setting up Angular 9 development Environment.
2.Secondly ,We will be creating a new Angular 9 Project. Initial Requirement for Angular
Node JS 8.x or later
NPM .
Angular CLI
To download NodeJS , you can download https://nodejs.org/en/.
If NodeJS is already installed you can check the version using.
node -v
If NPM is already installed you can check the version using.
NPM -v
Install Angular CLI 9 or later: npm install -g @angular/cli Update to Angular: npm install -g @angular/cli@latest Since you have understood the setup for angular , We will create angular project. you can also create project using command line argument.
First we will be checking the command to see what all files generated using dry run option.
For Generating the physical file we use the command
Ng new Angular9Project
Your first Angular application is ready. Run the application using the command ng s -o
We have working Angular Project "Welcome to Angular 9 Project", you can see in your first page. This is coming from app.component.
Let's open the Video studio code. Go to new folder and go to path of Project Angular9Project.
In the Project root folder, we have source folder, which contain application source code,Component template, Services,Style,Image.
Outside Src folder we have other files which helps in support building,testing,maintaining and deploying the angular application.
You can change the title by navigating to app.component.ts changing the title.
When you make any changes since server is running in watch mode, the changes will be compiled and deployed automatically.
Create a new ASP.NET Core Web Application: Select Angular and Click on OK. Create a API Controller and get action which will act as endpoint for the class. Add below code in API. // GET api/values [HttpGet] public ActionResult<IEnumerable<string>> Get() { return new string[] { "value1", "value2" }; } // GET api/values/5 [HttpGet("{id}")] public ActionResult<string> Get(int id) { return "value"; } // POST api/values [HttpPost] public void Post([FromBody] string value) { } // PUT api/values/5 [HttpPut("{id}")] public void Put(int id, [FromBody] string value) { } // DELETE api/values/5 [HttpDelete("{id}")] public void Delete(int id) { } Run the code and change t...
Hello Friends, In this tutorial, we will be discussing about Template Driven and Model Driven Form creation. Model Driven Form: In Model driven form, app.module.ts need to be updated import { ReactiveFormsModule } from '@angular/forms' ; and need to be imported in Imported Array. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { NavMenuComponent } from './nav-menu/nav-menu.component'; import { HomeComponent } from './home/home.component'; import { CounterComponent } from './counter/counter.component'; import { FetchDataComponent } from './fetch-data/fetch-data.component'; import { HttpService } from './services/http.service...
Comments
Post a Comment