Gallery

Angular Notes

Angular

Intro and Preq

Pre requisites for Angular

Create new angular Proj

Problems

Interactive book list

Angular Notes

Explore

Angular Notes

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

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

Problems faced while working with JS:

1) Errors are not prompted

2) JS code is embedded inside HTML.

?(Design + Logic part)

3) code becomes to cumbersome. (spagetti code) -- messy code

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

sample.js

functions

html

how will u link the html page with js page

HTML

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

Things are messy when they are kept together?

what is the need of the hour to simplify things?

Separate the stuff

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.

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.