#03 Editing the First Angular Project | Getting Started with Angular | A Complete Angular Course

Summary

In this lecture, the instructor demonstrates how to create, run, and edit a basic Angular project. The process starts by running the Angular application on localhost (port 4200) using the 'ng serve' command. They then explain how to navigate through the project folder, open it in VS Code, and identify the source of the application's HTML rendering. The lecture covers the role of Angular components, data binding, and introduces dynamic content generation using Angular’s features. This foundational setup prepares for deeper exploration in upcoming lectures.

Takeaways

• 👨‍💻 The Angular project is set up and running on localhost port 4200 after using the 'ng serve' command.
• 🛑 Pressing Ctrl + C will terminate the Angular process, making the app unavailable at localhost 4200 until 'ng serve' is run again.
• 🗂 VS Code is recommended as the code editor for the course, though other editors like Atom or Sublime can also be used.
• 📂 To edit the project in VS Code, navigate to the project folder and open it through the editor.
• 💻 The default UI is loaded from the 'index.html' file when running the Angular app.
• 📜 When 'ng serve' is executed, it injects five scripts (runtime.js, polyfills.js, styles.js, vendor.js, and main.js) into 'index.html'.
• 📝 The 'approot' is a custom Angular component tag that loads the 'app.component.html' template when used in the HTML.
• 🎨 The 'app.component.ts' file is the core file where the class and logic of the app component are defined, which ties the HTML and TypeScript together.
• 🔗 Dynamic content in Angular can be generated using data binding with double curly braces, allowing for dynamic updates in the UI.
• 🔄 Angular enables single-page applications, meaning only one 'index.html' file is loaded, and the content changes dynamically without reloading the entire page.

Q & A

What is the purpose of the NG serve command in an Angular project?

The NG serve command compiles the Angular project, creates necessary bundles, and starts a development server. This allows the project to be accessible at a URL, typically localhost:4200, while the process is running.

What happens when the process started by NG serve is killed?

When the NG serve process is killed, the Angular application can no longer be accessed at localhost:4200 because the development server stops running. The project must be restarted with NG serve to make it accessible again.

How do you open an Angular project in Visual Studio Code?

To open an Angular project in Visual Studio Code, go to 'File' > 'Open Folder,' navigate to the project folder, and select it. The project files will then be available for editing within VS Code.

Which file in an Angular project defines the main HTML structure that gets rendered initially?

The `index.html` file in the `src` folder defines the main HTML structure that gets rendered when an Angular project is loaded in the browser.

What is the role of the app-root element in an Angular application?

The `app-root` element serves as a selector for the root component in the Angular application, typically rendering the content defined in the `app.component.html` file.

What is the purpose of the app.component.ts file in an Angular project?

The `app.component.ts` file contains the logic for the root component of the Angular application. It includes a class (e.g., AppComponent) that is decorated with the `@Component` decorator, defining the selector and the template for the component.

How does Angular generate dynamic content in the HTML?

Angular generates dynamic content using data binding. For example, by using double curly braces (`{{}}`), you can bind a component's property (like `title`) to the HTML, dynamically rendering the property's value in the UI.

What is the difference between static and dynamic content in Angular?

Static content is hardcoded in the HTML and does not change, whereas dynamic content is generated based on component properties and can change depending on user interaction or data updates.

Why does Angular use TypeScript instead of JavaScript, and how is it executed in the browser?

Angular uses TypeScript because it provides better type checking and object-oriented programming features. However, TypeScript is compiled into JavaScript, which is then executed by the browser.

What is the importance of the scripts injected into the index.html file in an Angular application?

The scripts injected into the `index.html` file (like `runtime.js`, `polyfills.js`, `vendor.js`, etc.) are essential for running the Angular application. They include necessary bundles and dependencies compiled by the NG serve command.

Outlines

00:00

👋 Introduction to Angular Project Setup

In this paragraph, the speaker welcomes the audience back and summarizes the previous lecture where they created their first Angular project. They discuss the default appearance of the Angular application, explain how the project is accessible through localhost at port 4200 due to the NG serve command, and demonstrate how terminating the NG serve process stops the server, making the application inaccessible.

05:02

🔧 Setting Up VS Code for Angular Development

This section explains the importance of a code editor for modifying the Angular project. The speaker introduces VS Code as their preferred editor and provides instructions for downloading and installing it. They describe how the correct operating system is automatically selected for download and guide users through the installation process, explaining how to launch VS Code after it is installed.

10:03

📂 Opening the Angular Project in VS Code

The speaker demonstrates how to open the Angular project folder in VS Code by navigating to the folder through the File menu. They explain how to view the source code of the running Angular application, emphasizing that the index.html file is the main file rendering the UI in the browser. They also point out additional scripts injected into the HTML by Angular CLI when the project is served.

15:04

📜 Understanding app-root and Components in Angular

This section delves into the `app-root` selector, explaining that it represents a component that renders the Angular UI. The speaker removes and re-adds `app-root` to demonstrate its impact on the UI. They introduce the concept of components, specifically focusing on the app component and its associated files (TypeScript, HTML, CSS), and briefly mention the role of the `component` decorator.

🏗 Dynamic Content and Data Binding in Angular

In this paragraph, the speaker explains how Angular handles dynamic content. They show how to use data binding to dynamically display the project name (`angular ecard`) by binding it to a `title` property in the app component. They demonstrate how changing the `title` property in the TypeScript class updates the content displayed in the browser.

💻 Mixing Static HTML with Dynamic Content in Angular

The speaker clarifies the purpose of using Angular to mix static HTML with dynamic content. They explain how Angular generates dynamic content using data binding and how static HTML alone does not necessitate a framework like Angular. The example provided illustrates how changing the `title` property dynamically alters the rendered content.

🔄 Single Page Application and Routing in Angular

Here, the speaker discusses Angular’s single-page application (SPA) nature, explaining that the browser only loads one HTML file, `index.html`, and JavaScript dynamically changes the content based on navigation within the application. They hint at future discussions on routing and emphasize that TypeScript is compiled into JavaScript, which ultimately handles content changes dynamically in the browser.

🚀 Wrapping Up and Next Steps

The final paragraph summarizes the lecture, noting that more content will be added to the Angular application in future lessons. The speaker reiterates the significance of using Angular for generating dynamic content and ends the lesson, encouraging listeners to ask questions if needed.

Keywords

💡Angular project

An Angular project is a web application built using Angular, a popular framework for developing single-page applications. In the video, the speaker creates an Angular project, showing its default structure and explaining how it can be customized by modifying its files and components.

💡NG serve

The NG serve command is used to run an Angular project locally, creating a development server that can be accessed on a specific URL, such as localhost:4200. The video demonstrates how this command starts the server and keeps it running, making the project accessible in a browser.

💡localhost:4200

This URL represents the local server where the Angular project is hosted when using the NG serve command. The speaker frequently refers to this address as the location where the default Angular project is displayed in the browser during development.

💡Component

In Angular, a component is a building block of the user interface, consisting of HTML, CSS, and TypeScript code. The video discusses how components like app-root and app.component.ts are used to render content dynamically and manage the look and feel of the application.

💡app-root

app-root is a selector used in Angular to render the app component in the browser. The speaker explains that removing app-root will result in a blank page, showing that this is where the core UI elements of the Angular project are rendered.

💡index.html

index.html is the main HTML file loaded by the browser when the Angular application is run. The video shows how this file remains the same during the entire lifecycle of the Angular application, while its content is dynamically updated through Angular's rendering processes.

💡Dynamic content

Dynamic content refers to elements in a web page that are generated and modified at runtime, based on data or user interactions. The video explains how Angular allows developers to use dynamic content through features like data binding, making the application responsive and interactive.

💡VS Code

VS Code, or Visual Studio Code, is a code editor used for writing and managing code in web development. The speaker uses VS Code in the video as the preferred editor for working with Angular projects, explaining how to download, install, and open project folders in VS Code.

💡Data binding

Data binding is a concept in Angular that allows developers to bind data from the component class to the HTML template. In the video, this is demonstrated with the title property, which is dynamically updated in the web page through curly braces in the HTML file.

💡TypeScript

TypeScript is a superset of JavaScript used in Angular for writing more robust and structured code. The speaker explains how the app.component.ts file defines the logic of the component, and how TypeScript gets compiled into JavaScript to dynamically update the content of the web page.

Highlights

Created the first Angular project with all the required files, folders, and dependent packages.

Running the Angular project on localhost at port 4200 using the 'ng serve' command.

Demonstrated how killing the process with Ctrl+C stops access to the application.

Explained how the 'ng serve' command compiles the project and creates bundles for access on localhost.

Guided through installing and setting up VS Code as a code editor for Angular projects.

Opened the Angular project folder in VS Code for editing and customizing the project.

Showed that the index.html file is rendered when running the Angular project in the browser.

Scripts injected into index.html are generated and bundled by Angular CLI during 'ng serve'.

The 'approot' element renders the main app component in the UI, linking to a specific component in Angular.

Explained the structure of Angular components, including the .ts, .html, and .css files.

Demonstrated how the app component's HTML file content is rendered in the UI.

Illustrated how Angular handles dynamic content generation using data binding with properties like 'title'.

Clarified Angular's role in creating dynamic content, distinguishing between static HTML and dynamic rendering.

Reiterated the use of Angular in creating single-page applications where only the content changes dynamically, not the HTML file itself.

Explained that TypeScript code is compiled into JavaScript, which dynamically updates the content in the browser.

Transcripts

hello and welcome back

so in the last lecture we created our

very first angular project so we have

our angular project ready with all the

required files and folders and also the

dependent packages

and when we run that angular project it

looks something like this here let me go

ahead and let me zoom out a little bit

maybe 200 percent

so this is how our angular application

looks currently so this is the default

look of the angular project when we

first create it and now we can go ahead

and we can edit the look and feel of

this project but before I do that let me

show you one thing So currently this

project is running at localhost Port

number 4200 and we are able to access

this web page on localhost port number

4200 because in the last lecture we run

this NG serve command Okay so first we

move to the project folder and in that

project folder we run this NG sub

command now what this NG serve command

does is it runs a process behind the

scenes and as long as that process is

running we will be able to access this

webpage on localhost port number 4200

and if we kill that process that means

the process which is currently running

when we run this NG serve command in

that case we will not be able to access

this angular application on this URL on

localhost port number 4200 let me

actually show you that so here I am

going to kill the process and in order

to kill the process we can simply press

Ctrl C on the keyboard

so now the process has been terminated

so now if I go back to browser and if I

refresh the page now we should not be

able to access this web application at

this port number

because now we have killed the process

so the process is no more running and

because of that we are not able to

access the angular application on this

URL but if I go ahead and if I start

that process Again by running the NG sub

command so keep in mind that in order to

run your angular project first you need

to move to the project folder okay this

is my project folder path

so this is that path inside this angular

ecard folder we have our all the project

related files and folders so this

angular card here it is my project

folder so using command prompt first I

need to move to that folder that project

folder and in there I need to type NG

serve command in order to start the

angular CLI process so if I press enter

it will again compile the project it

will create some bundles and it will

start the process and then we will be

able to access the angular application

again so you can see the project has

been compiled the bundles have been

created and now that angular process is

started and since the angular process

has started now it is running we can go

back to the browser and now you can see

we are able to access the angular

application at this URL localhost port

number 4200

so in case if you are not seeing this

web page when you are typing this URL

localhost port number 4200 that means

your development server is not running

and in order to start your development

server you need to go to your project

folder and in there you need to type

this NG serve command and start the

annular CLI process and then you'll be

able to access your angular application

at this URL

all right

now in order to proceed further in this

course we need a code editor which we

will use to make changes in our angular

project

so in this course I am going to use vs

code as my code editor if you have any

other preferences if you want to use any

other code editor like atom or Sublime

you can go ahead and you can use that

but if you want to follow along with me

in this course then you can also go

ahead and download vs code code editor

because that's what I'll be using in

this course

so let me go ahead and let me open a new

window here

and here let's search for vs code

okay and you need to go to this first

result code.visualstudio.com

and from here you can download vs code

on your local machine

now in order to download vs code on your

local machine you need to click on this

download button so here you can see the

operating system has been selected

automatically in my case I am using

Windows so that operating system has

been selected automatically

in your case your operating system will

be selected here if you are using

Windows then it will say download for

Windows if you are using Mac OS it will

say download for Mac OS or if you're

using Linux it will say download for

Linux but in case if your operating

system has not been selected then you

can also click on this drop down and

from here you can select your operating

system and then you can go ahead and you

can click on this download button in

order to download vs code in your local

development machine

so when you will click on this download

button it is going to download an MSI

file let me actually show you that so if

I click on this download button

it is going to download an MSI file this

exe file okay now all you have to do is

once this exe file is completely

downloaded you can double click here

or you can go to the downloads folder

and from there you can double click on

this exe it is going to open an

installation window just follow along

the installation steps it is very easy

there is nothing complex in that just

follow the installation steps and

install this vs code on your local

development machine

now once the vs code is installed on

your machine

you can just go ahead and open vs code

if you're on Windows in the search bar

you can type vs code

and you can click on that

so it will open vs code

when you will open it you will see this

welcome screen

now what we want here is in vs code we

want to open our angular project folder

okay for that you can go to file

open folder

and then go to the location where your

project folder is located in my case it

is in documents folder in there we have

this angular complete course folder and

in there we have our project folder

called angular ecard so I will select

this project folder and I will click on

the select folder button and it will

open that project folder in vs code

let's close this welcome screen here

all right so here we have opened our

angular project in vs code now the next

question which will come to your mind is

when I'm running this angular project in

the browser

it is showing this UI so from where this

UI is being rendered

now to show you that which HTML file is

being rendered in the browser in order

to show this UI what I will do is I will

right click and I will say view page

source

so here you can see the page source

which is being rendered in order to show

this UI

okay so just look at the content here

let me increase the font size here

okay

so this HTML here it is coming from

index.html file and to go to index.html

file you can open this Source folder in

there you will see this index.html file

okay and you will see the same content

here okay so this content is what we are

seeing here when we are viewing the

source code of this web page

right now here you will also see some

extra things like you'll also see these

scripts which have been added here but

these scripts are not there in the

index.html file apart from that

everything is same so this HTML content

is also available

here when we are viewing the page source

all right so we know that when we are

running our angular project in the

browser index.html file is getting

loaded and it is being rendered

now the next question which will come to

your mind is from where these scripts

are coming

well these scripts are coming from

angular CLI

so basically when we run this NG serve

command what it does is it first

compiles our project then it creates

some bundles so these bundles basically

these five bundles and then it inject

these bundles in the index.html file so

these are the scripts which you will see

here

you see runtime.js

polyfills.js styles.js

vendor.js and main.js so these are the

five script files which have been

injected in the index.html file

and these script files have been created

by this NG serve command

they have been bundled and they have

been injected in our index.html file of

angular project I hope it is clear

now the next question which will come to

your mind is in the UI we have so many

things rendered

but in the HTML file I only see this

approot

and this approot is not even an HTML

element

then what is this approot and when we

are using this approot how it is

rendering this UI

now just to show you that this approot

is what is rendering this UI let me go

back to vs code and let me remove this

approach from here so I will simply cut

it from here let's save the changes

let's go back to the browser let me

reload the page

and now you will see the page is blank

but if I go back and if I bring back

that approved

if I see the changes now

then you will see that that UI is back

so it is this app Root which is

rendering this UI when we are running

our angular project

now let's try to understand what this

approach actually is

this Air route here it is basically

rendering a component

here it is rendering an app component

now we will talk about components in

great detail in our coming lectures but

for now just understand that when we are

using this approot like an HTML element

here it is going to render a component

now which component it is rendering here

it is rendering app component

and to see the app component you see

this app folder if I expand this here

you will see that we have five files app

component.css appcomponent.html

appcomponent.spec.ts and appcomponent.ts

file we also have this app modules.ts

file but it is not part of app component

okay we will talk about this app

module.ts file letter in this course but

for now just understand that a component

consists of four main files the

typescript file so this dot TS is an

extension of typescript file so we have

a typescript file we have an HTML file

we have a CSS file and we also have the

spec.ts file now the spec.ts file is not

important at this point of time

basically in this spec.ts file we write

the unit tests for testing our component

okay but a component has mainly three

files app component.ts

appcomponent.html and appcomponent.css

in these four files the most important

file is this app component.ts file this

is a typescript file and in there you

will have a component class

in this case the component class name is

app component

and if you notice this app component

class have been decorated with this

component decorator

again we will talk about decorators in

great detail in our coming lectures but

for now just understand that when we

create a component first we create a

class in this case the class name is app

component and we need to decorate that

class with this at component decorator

in order to make that class a component

class

and to this at component decorator here

we are passing an object

and in this object you will see we have

a selector which is approot

so it is the same approot which we are

using here

so for a component class when we specify

a selector the value of that selector

can be used as an HTML element

and that's what we are doing here we are

using the value of this selector this

approot like an HTML element

now when we use a selector like this

in that case what it is going to do is

in place of this selector it is going to

render the template which is associated

with that selector

in this case with this selector this

template is associated

now this template here we are simply

calling it template URL because to this

we are assigning a path the path of the

HTML file

so in this case wherever we will use

this approot there the content of this

HTML file will be rendered

now where is this HTML file present so

in the same app folder you will see that

we have this app component.html

and in this app component.html we have

some HTML and CSS so it is this HTML and

CSS which is getting rendered in the UI

when we are using this approot like an

HTML element okay so here we have a

selector

we are using that selector like an HTML

element for this selector

we have an Associated template in this

case that template is

appcomponent.html file so wherever we

will use this selector like an HTML

element there the content of this HTML

file will be rendered

so in the UI currently this HTML is

being rendered and that's why the UI

looks like this but if I go ahead and if

I delete everything from this HTML

and if I add some new htmls here

here let's add an H2 element and here

let's say welcome to

angular

okay a simple H2 element

let me save the changes now and now if I

go to the web page you will see that H2

element rendered in the web page

now here one thing you need to

understand is here we are writing static

HTML and for writing static HTML we

don't need a framework like angular

we use a framework like angular in order

to generate Dynamic contents

right so we don't use angular for

generating static content we use it for

generating Dynamic content

so how can we generate Dynamic content

using angular in this case so let's say

instead of Welcome to angular I want to

say welcome to ecard okay that's our

project name

so here either we can say ecart or we

can generate that content dynamically

for that let's go to our app component

class in there we have a property called

title which is currently assigned with

angular ecard

so if I go to app component.html and

here if I say welcome to and then if I

use a double set of curly braces like

this and in there I simply specify title

here

the value of this title property will be

rendered now what is the value of this

title property is this angular ecard so

in place of this angular ecard will be

rendered if I save the changes if I go

back to the browser

you will see now it says welcome to

angular ecard

so in this way we are generating Dynamic

content whenever we will change the

value of this title property for example

instead of angular ECOT if I say

if I save the changes if I go back to

the browser

you see now it says welcome to ecard

so now we are generating the content

dynamically

and this concept here is called as data

binding so basically we are binding this

title property in our HTML using this

double set of curly braces

and don't worry we are going to talk

about data binding and component in

great detail in our coming lectures

so basically angular allows us to mix

static HTML code with Dynamic things we

want to Output in the code

so this is a very simple change we have

made in our angular project right now

but we are going to do a lot of stuff in

our coming lectures

now one thing which I want you to

remember is that in the very first

lecture we learned that we use angular

for creating single page applications

that means when we run an angular

application only a single HTML file will

be loaded in the browser and that will

be rendered by the browser

whenever we navigate around in the

angular application only the content of

that HTML file will change the HTML file

itself will not change it will always

remain same

and that single HTML file which gets

loaded in the browser when we run our

angular application is this index.html

file

okay

and in the future lectures when we will

implement the routing in our angular

application that time you will see that

when we are navigating to different URLs

the HTML page will remain the index.html

file but the content will change

dynamically and that content will be

changed by JavaScript

now here you might see that you're

saying that the content will be changed

by JavaScript but we are not even using

JavaScript in our angular application

then how JavaScript is going to change

the content well keep in mind that the

typescript code gets compiled to

JavaScript code so we write our code in

typescript but ultimately when the code

is compiled that typescript code will be

converted to JavaScript and that

JavaScript will change the content

dynamically

all right so for now this should be it

from this lecture we are going to add

more content in our angular application

currently we have added only one H2

element but we are going to add more

HTML contents in our web page and we are

going to make it look nicer and dynamic

but for this lecture this should be

enough

if you have any questions then feel free

to ask it thank you for listening and

have a great day