Getting started with Angular, Introduction & application architecture.
Angular is a front-end javascript framework that works with typescript. Originally developed and maintained by Google, Angular has rich features overall of adjacent frameworks despite having pros of their own.
Angular formally is known as Angular JS AKA Angular js 1.0, was sort of libraries that could be used just like jQuery. Later on, Upon releasing Angular 2.0, it was decided to drop JS from the name, so now it is just Angular.
When we say Angular JS, that would be referred to Angular 1.0, and From 2.0 it is just Angular. Angular is entirely different from Angular JS so be careful when you calling and learning them.
Enough of introduction, let's get to create our first Angular application.
What you should know?
You should be aware and should have good hands-on if possible on
- HTML
- CSS
- Javascript/jQuery
Prerequisites in your system
- NPM(Node package manager): You should have installed npm which you can get from the official NPM site.
- AngularCli: Its powerful tool which abstract manual work of creating project/components/modules etc and lets you focus on code and logic part of the application. You can install Angular CLI using instruction given at https://cli.angular.io/
npm install -g @angular/cli
Let’s Hello world in Angular
You can create hello world app using single command. Issue
ng new hello-world
Say yes if you been asked for routing
Select your preferred styling method, let's choose CSS for simplicity
There you go.
It may take less than a minute to install based on your system configuration and network speed.
Once done, Open hello-world directory with your favorite IDE/editor, I am going with VScode here.
Run your first Hello world Angular app.
Just cd into your project directory, or if you are in VS code, use the integrated terminal to issue
ng serve
Once command finished executing you will see
That means, your application is ready and running at http://localhost:4200/
Woila… it's Running!! Congrats. Now let's get into code/project and see what is going on and how this all happened.
The understanding folder structure of Angular 8(Current version)
So here is the Folder structure of the Angular 8 Project.
We will be working inside /src/ directory most of the time and our application logic/code will be in /src/app/ directory.
Upon opening the project in the browser, index.html Gets to the browser where everything bootstraps.
main.ts file is executed on a primary basis thus all further requests and responses are handled accordingly.
Inside the app/ directory, you will see app components details.
- Angular application is made up of one or more Modules.
- Modules are made up of one or more components
- Components are made up of one or more HTML templates, CSS and classes.
In the next article, we will understand components, how to create it and how it works.
