CREATING FIRST ANGULAR APP
Creating Our First Angular App
Workflow Of Angular App – Flow Of Angular App – Flow Of Execution Of Angular App

Things Required For Angular Installation

  1. Code Editor (Visual Studio Code)
  2. Node JS
  3. NPM (Node Package Manager)
  4. Angular CLI (Command Line Interface)

Creating New Angular App

  • To create a new workspace and initial starter app:
  • Run the CLI command ng new and provide the name new-app, as shown here:
    • ng new “new-app”

Run the application

  • The Angular CLI includes a server, for you to build and serve your app locally.
  • Navigate to the workspace folder, such as new-app.
  • Run the following command
    • ng serve
  • The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.
  • The –open (or just -o) option automatically opens your browser to http://localhost:4200/

UNDERSTANDING WORKFLOW OF ANGULAR APP

Important Points

  • Every Angular App has 1 module file called AppModule / root module.
  • Every Angular App has 1 pre-defined component called app / root component.
  • Angular App can have one or more modules.
  • Modules can have one or more components and services.
  • Components have HTML and Class.

Main.ts File Code

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

app.module.ts File Code

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts File Code

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Learning Never Ends';
  name = 'Mohammad Adil';
  helloMessage(){
    return "Hello Adil";
  }
}

app.component.html File Code

<p>Welcome To Angular By Learning Never Ends</p>

Index.html File Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mohammad Adil</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Download Notes & Source Code Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/v3900slexk84qoe/CREATING+FIRST+ANGULAR+APP.rar/file

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *