Beginner Guide To Angular!

Today I'll tell you how you can start your hustle with angular.

What are the Prerequisites for using Angular??

• Javascript
• HTML
• Css

Just to began with we need some of the necessary things in your local system.

Node.js

Install node in your local system. Visit the website and download one version.

Install the Angular CLI

npm install -g @angular/cli

You are using CLI(Command Line Interface) to generate you project ,application and libary code.

It'll take some moment to happen don't worry

Create Angular Workspace

To create a new workspace and initial starter app

Open your Cmd in one of your empty folder

I'm leaving a link about Ng to read more about it.

Press Enter

It'll ask you to do you want router in your application or not If you want type yes if you don't want type no.

It'll not affect your application if you type no,it's just basically creating a file to manage the navigation of your n number of pages

Now for styling part which styling extension you want just navigate through your up and down arrow and press enter on it.

After you enter your choice you'll see different files are generated in your terminal.

type cd your_App_Name

cd means change directory

Now type code .

To open your code editor

Now you'll see all the pakages and the files are listed.

Serve your project with ng serve --o

--o for open

You'll see a beautiful Webpage In Chrome that's deafault set up create by Google.

Create Your Own Application like you do with your HTML,CSS,VanillaJs

Go ---> app.component.html --> ctrl + A and then backspace

and save it.

Now save it ,and now go the webpage where your is serve.You'll see that the Beautiful webpage is empty ...Taaadaaa!!!

Now you can write your own html,css and javaScript . In each component .Where component comes from ?😕

What is component ?

Components are like the basic building block in an Angular application. Components are defined using the @component decorator. A component has a selector, template, style and other properties, using which it specifies the metadata required to process the component.

Let see how we can create component through our CLI

By deafult it's create Four File(Html,css,ts,spec.ts) in one go but you can customize it.

Warning!! don't stop your server in your terminal unless you're not able to the changes in your application

If you stop the server, no worries just start the server again with the same command ng serve --o

Let's write a minimal Html so that we can assure the angular application is working fine.

ctrl + s

Check your web page in chrome.

Now you've successfully created the angular starter file and know how to create a component.

I hope this blog gives you a basic understanding of how to create Angular project.