DEV Community

Cover image for Beginner Guide To Angular!
paul-coder-22
paul-coder-22

Posted on

Beginner Guide To Angular!

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

What are the Prerequisites for using Angular??

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

type cd your_App_Name

cd means change directory

Alt Text

Now type code .

To open your code editor

Alt Text

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

Alt Text

Serve your project with ng serve --o

--o for open

Alt Text

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

Alt Text

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

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

and save it.

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

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.

Alt Text

ctrl + s

Check your web page in chrome.

Alt Text

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.

Discussion (0)