What To Learn In Angular 12:
How To Install
Structure
Basic
MCV
Advance
Routing
API
Forms
Interview
Project
What is new in Angular 12
How to use CSS
------------------------------------------------------------------------------------
Angular 12 Full
Course
- Create a new folder of angular project by typing cmd in
Page 1 of 9
the location bar in file explorer and type "ng new (your
project name", this should create a new folder.
- To enter your folder and make changes type cd (your
folder name)
- To open your project manually type "code ."
- To open your project on a web browser type cd (project
name) then type ng serve, this should build your website
at localhost:4200.
------------------------------------------------------------------------------------
Current Video Tutorial #5
------------------------------------------------------------------------------------
Page 2 of 9
Introduction:
What is angular?
All angulars are same, Angular 12 has only minor updates. Angular is
front-end development framework for java. its used because its fast and
it has alot of options which is easier, it also makes single page
application the website doesn't reload on angular programming and the
project speed is faster. it is For develop single page applocation. the
Angular is made by Google.
It is An Open Source (Free) and we use Npm (note package manager)
and command line interface(CLI), it helps in fast project development.
Angular vs Angular.js
Angular is a re-written version of Angular.js, Angular.js was the first
version of Angular and was released before 2016, the whole framwork
was changed.
Why Angular 12?
It has bug fixes, it always has new features, everything is not new, Its
speed and others are improved. most of their features are always same!
Important Files And Folders For Beginners
-package.json
Page 3 of 9
-node_modules
-src folder
app
assets
enviornments
index.html
main.js
style.css
For Advance Use
package-lock.json
angular.json
tsconfig files
.browserlistrc
karma.config.js
polyfills.ts
(Package.json - Its the most important file which have all your project
details for example, project name, version, scripts and other libraries
Scripts) - Which Command will start our project, which will test our
project, will build our project, will watch our project and others.
Page 4 of 9
Also when making a project in Angular there
are a lot of libraries like angular, form, some
are routing, some are css and some are for
testings!
Node_modules - stores all your folders/libraries. if you reinstall or
reopen npm all your code will be useless so its important not to
open/resinstall npm.
------------------------------------------------------------------------------------
(Src - It is the most important folder because the developer does his 99%
of his work in this folder the dev might change some confirugration
outside this folder but all the work is done inside this folder
App - piece of code which we can use alot of times, it is a type of
components.
Assets - Where we store all our images or videos
Environment - first where we test the servers if all the work is working
correctly then comes production server where all the work is visible or
can be used online by anyone, when we don't know which build to make
we setup an enviornment, we'll use enviornment.prod.ts to
upload/update the work or the website online, enviornment.ts is used to
Page 5 of 9
test the work. we can make alot of enviornment files if you want!
Favicon.co - Icon visible on the website for example:
Index.html - The file which loads first on your project
main.ts - it bootstraps our angular application to html, or by simple
words it connects our angular application to html to load it properly.
styles.css - you can add global styles to this file
angular.json - it is the configuration file of the application you can put
which page to load first for example index.html is by default, if u put
xyz then the xyz file will load first
.browserlistrc - it stores that which browser it supports and which
browser it does not supports. if you clear the file the support still won't
change.
karma.config.js - it stores which browser to load, which path should
load
Page 6 of 9
polyfills.ts - we add some types of libraries which then supports our
browser
Erase all the code written in src>app>app.component.html to create
a blank page on the website testing server.
How to input “Hello World” in our angular project website
Using <h1>(Write your text here)<h1>
This will result in your text visible on the website blank page.
Using “{{your title name from app.component.ts}} will show the title of your
project
EXAMPLE
<h1>Hello Angular {{title}}<h1> #this will show Hello angular Blog( my title
name is blog) on the website blank page.
Note: You can use the command <br> to break a line in <h1> and create a new
one without having to go write a new heading in a new line again but this is not
really recommended because it can mess up/confuse you when finding the code.
Also, you can change your website title in index.html
Page 7 of 9
Interpolation
What is Interpolation?
It is used in our HTML page to Display Dynamic Data,
Dynamic data are the property in app.component.ts and
Interpolation are the brackets “{}” so with the help of
Interpolation we display Dynamic Data in our HTML page.
The data in app.component.ts can come from our logic,
property, functions or also API so these data are also known
as Dynamic Data.
How to use it?
We can use it for Mathematics, it can perform just like a
Calculator. We can use it for matching a data and it will
answer in True or False, like matching if data == ‘Blog’ is
correct in our Dynamic Data or not, if yes it will Display True
if not then False.
What can we do with Interpolation?
We can use it for Mathematics, it can perform just like a
Calculator. We can use it for matching a data and it will
answer in True or False, like matching if data == ‘Blog’ is
correct in our Dynamic Data or not, if yes it will Display True
Page 8 of 9
if not then False. We can use it measuring length, printing an
error and many more things that we can almost use in Java
Script.
What can we not do with Interpolation?
You cannot change the value of a Dynamic Data with
Interpolation, for example writing ++ with the data name,
changing its value in the HTML code from (data = Blog to
data = 200” without changing it in the Dynamic Data, you can
not use the word new, you cannot change its type, Incremental
and Decremental operator doesn’t work, doing these will
always result in an error “Failed to compile.”
Page 9 of 9
