#03 Editing the First Angular Project | Getting Started with Angular | A Complete Angular Course
Summary
TLDRIn 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
👋 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.
🔧 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.
📂 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.
📜 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.
Mindmap
Keywords
💡Angular project
💡NG serve
💡localhost:4200
💡Component
💡app-root
💡index.html
💡Dynamic content
💡VS Code
💡Data binding
💡TypeScript
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
Ver Más Videos Relacionados
#02 Creating a new Angular Project | Getting Started with Angular | A Complete Angular Course
#12 Create Component using Angular CLI | Angular Components & Directives | A Complete Angular Course
#04 Angular files and folder structure| Getting Started with Angular | A Complete Angular Course
FAQs Angular Maximilian Schwarzmuller
#15 String Interpolation | Angular Components & Directives | A Complete Angular Course
#18 Two way Data Binding | Angular Components & Directives | A Complete Angular Course
5.0 / 5 (0 votes)