Scribd
Upload
16 views9 pages

Angular Full Learning

The document provides an overview of what to learn in Angular 12, including how to install Angular, the basic structure and components, MVC architecture, routing, forms, and what's new in Angular 12. It also summarizes how to create a new Angular project, open it in the code editor, and run it locally on a development server. Key files and folders like package.json, src, and components are explained. Interpolation is discussed as a way to display dynamic data in templates.

Uploaded by

hypeddivo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
16 views9 pages

Angular Full Learning

The document provides an overview of what to learn in Angular 12, including how to install Angular, the basic structure and components, MVC architecture, routing, forms, and what's new in Angular 12. It also summarizes how to create a new Angular project, open it in the code editor, and run it locally on a development server. Key files and folders like package.json, src, and components are explained. Interpolation is discussed as a way to display dynamic data in templates.

Uploaded by

hypeddivo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like