Angular Tutorial – Learn Angular with Example Applications
Angular is a framework to develop web, mobile web, native mobile, and native desktop applications. Angular is popularly used for web applications. It provides scalability at server side and better performance at the client side.
When to use Angular
With so many frameworks out there for developing web and native applications, you may be wondering why to use Angular. The reasons are pretty straightforward and will convince you in migrating to Angular. The most prominent one is that you can reuse the components of your application to develop across different platforms. With Angular, you can control scalability by building data models on RxJS, Immutable.js or another push-model.
Angular is generally used to build client-side applications, but it will be a great platform for developing Single Page Applications.
Single Page Applications are those with only a single page and only parts of the page load asynchronously without loading the whole page.
Prerequisites for Angular
To learn Angular, the prerequisites are basics of Web Development: HTML, CSS, and JavaScript.
Learning TypeScript can bring a huge difference to your Angular Application Development.
Pros of Angular
- Angular is by design, modular and promotes modularity.
- Reusability of code comes with the concept of components in Angular.
- Because of the inbuilt functionalities for routing, validation, etc., application development is relatively fast.
- Angular is from Google, hence one can expect a decent support for the framework.
- Angular requires TypeScript language, which is from Microsoft.
Is it Angular JS, Angular 2, Angular 4 or Angular 6
Now that you are learning Angular, you might have heard a lot like Angular JS, Angular 2, Angular 4, Angular 6 and so on. Seriously! What are these? Which one to choose?
Angular was first released in 2010 as Angular JS. After a very long time, in 2016, Google released version 2 called ‘Angular’, just Angular. Then updated versions, Angular 4, Angular 5, Angular 6 and so on followed. The core concepts of Angular aren’t going to change from version to version. Only cool new features are going to be added to the previous versions. So, learning any recently upgraded version of Angular is fine.
Environment Setup for Angular
Before we install Angular, there are some dependencies:
- NodeJS
- NPM (Node Package Manager)
After installing the dependencies, we shall install the following:
- Angular CLI
- Visual Studio Code (IDE that is generally used for Angular Development)
Based on your OS, download the latest Node.js version from https://nodejs.org/en/ and follow the simple steps with the installer. If you are using Ubuntu, refer this step by step tutorial to install NodeJS.
To verify if the node program is installed correctly, open command prompt or terminal, type node, and press enter.
npm is included in Node. So, once Node is installed, we are good to go with the Angular installation. npm is used to install Angular CLI as a third party library. Angular CLI is a command line interface to create an Angular project.
We shall install Angular CLI globally so that you can create an Angular project from any location in your PC.
To install Angular CLI, open command prompt or terminal and run the following command :
npm install -g @angular/cli
Note: -g option is used in the command to install the Angular CLI globally.
Angular CLI is successfully installed and we are good to go with our first Angular Application.
IDE for Angular Development
Any text editor would be sufficient but there are many IDEs available that you could work with Angular Application Development. In this series of Angular tutorials, we shall use Visual Studio Code which is free, open source and lightweight.
Conclusion
In this Angular Tutorial, we have learned what Angular is, its features, its relation with previous versions and also a step by step process to get started with Angular Application Development.