This article on introduction to angular is part of the Learning Angular series.
Angular replaces AngularJS which had taken the internet by storm, when it was released almost a decade back in 2009. While AngularJS was quite a robust library, there were also quite some nuances which was making it difficult to manage. So the developers went for a whole rewrite of the library and built a framework instead which came to be known as Angular 2, or better Angular. Over the years, the team has been releasing newer versions every 6 months, v8 being the most recent.
We won’t go about the differences between AngularJS and Angular as a lot of articles can be found on the internet about it. Also this article series is to learn more about Angular, than discussing about what changed.
Angular is a JavaScript framework that helps build single-page interactive web apps. It has been designed to work on almost all platforms including, web, desktop and mobile platforms. It uses HTML, CSS and JavaScript to run in the intended systems.
While JavaScript is used, Angular requires the knowledge of TypeScript, a superset of JavaScript to do the development. TypeScript forces stricter rules on writing JavaScript. While TypeScript is used in most application, we can also use plain JavaScript and Dart to do the development.
Getting Started
Angular comes with it’s own CLI which makes development easier. To get started, we need to install the CLI by running the following command:
npm install -g @angular/cli
Creating a new project
With the CLI under our belt, we can start with the creation of a new Angular project. To create,
ng new learning-angular
The CLI present a few preferences, and after we have set that, the application is created. This will take some time to complete, as Angular would be bootstrapping a new project for us with all the boilerplate code.
Run the application
To run the application, we can run the command
ng serve
After this, visit http://localhost:4200 on your browser, and you can see a default application running.
Build the application
To make sure that the application can be deployed to any server, we need to build the application first. This can be done by
ng build
If we go to the dist folder of the project, we can find the built files. Let us have a look at those files.
The most important file is the index.html file and is the only file that is served by the browser. If we open up that file, we can see that there is a custom tag <app-root></app-root>. It also has a few more imports, the most important being main.js
The main.js is the entry point of the file and is compiled from the main.ts file of the Angular application. Let’s open up the main.ts file, to see how other things fit together. The main.ts has a single line which reads as:
platformBrowserDynamic().bootstrapModule(AppModule)
This line tells the compiler to bootstrap the AppModule for the browser-platform. The AppModule in turn, bootstraps the AppComponent which is the entry component of the application. If we look into the AppComponent (app.component.ts),
We can see that there is something called selector which stands as:
selector: 'app-root',
So the flow is somewhat like:
index.html => main.ts => app.module.ts => app.component.ts
For creating our application, we would be adding other components to the AppComponent.
This sums up our introduction to angular. To read other topics, please visit the Learning Angular.