Gallery

Angular Notes

Angular

Intro and Preq

Pre requisites for Angular

Create new angular Proj

Problems

Interactive book list

Angular Notes

Explore

Intro and Preq

A sentence or two about yourself. It should convey your personality.

Angular

Core Java

HTML + CSS+ JS -- Front End

JS - JavaScript

Alert box

Run time message

Event Handling

Validation

Servlets & JSP -- Backend

MVC

Spring

SpringBoot

Struts

*********************************************

Model View

Separation Of concern:

Framework is required: Angular

*******************************************************

Pre requisites for Angular

1) Node.js should be installed on ur machine

2) Visual Studio code has be installed

3) install angular on ur machine /

?update angular

4) browser

**************************************

To create a new Angular Project :

1. go to terminal of visual studio / command prompt

2. type "ng new helloWorldDemo"

Syntax: ng new projectName

3: Would you like to add Angular routing? press y

4. Which stylesheet format would you like to use? select CSS with the help of the arrow key.

Then it will take 2-5 minutes for the project to get created.

************************************************

After project creation to open the project :

Select file --> Open Folder -->go to ur folder and select ur project.

a new Visual Studio screen will open up.

********************************************

Important Files in the Project:

In the first Chapter we are going to work with the following files:

(These files are present inside src/app folder)

1) app.component.html (works as my view file)

2) app.component.css

3) app.component.ts -- (works as my model file)

some html code is already there

I will simply run

***************************************

How to run :

//this one will run but will not open the browser

ng serve

//this command will run the app and also open the browser

ng serve --open

_________________________________________________

To change the title dont make any changes in the HTML file.

Just open app.component.ts file and change the title:

The code is as follows:

_______________________________________

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Welcome to my Page';

}

__________________________________________

In the app.component.html file the title gets displayed:

<span>{{ title }} app is running!</span>

********************************************

or u can have the following code in app.component.html file

<span>{{ title }} app is running!</span>

<router-outlet></router-outlet>

**************************************************************

We did not make use of any JS file.

JS is difficult to write and difficult to maintain.

We wrote ts.

TS stands for TypeScript.

TS files are not supported by the browser.

JS runs on the browser.

Typecript files are object oriented.

In JS we never created class , enums, generics, inheritance.

Typescript supports all the above OOP features.

TS ---> converted --> JS

TS is a source file

JS is a source file

Transpiler converts TS files to JS files.

Transpilers are similar to compiler.

Task of a compiler is to convert from source code to machine code

whereas transpilers are used for converting from one source file to another source file.

In angular we are not writing JS files.

TS files we have compiler. --- we resolve the error here itself.

then conversion happens to js files and then it runs.

***********************************************************

var name:string="abc";

var name=null;

var name=undefined;

****************************************

If you are having network issue at ur end please ask me to repeat it again.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.