Updated April 8, 2023
What is exactly Angular?
Angular is a JavaScript open-source front end framework and creates reactive Single Page Applications (SPAs) and it was built by the developers of Google. Angular has attested wide-spread control in Open Source JavaScript Frameworks and it is remarkably highly valued between developers and enterprises for its great functioning techniques. Angular an innovative client-side MVW framework is highly used at the present time for mobile app and web app development. It was written in Typescript with support ES6 (ECMA Script 2015) standardization. Typescript developed by Microsoft and it is a superset of JavaScript. This will transpile the code and converts in JavaScript or ES5 format. The Typescript is a strongly typed and it is allowed to write OOPS feature like class, interface and module statements just like C# or Java which boost the execution and reduce the run time errors.
Features of Angular 2
Following are the major features of angular 2.
Components
the prior version of Angular had the attention of Controllers but now totally changed the focus to working with components over the controllers. Components help to create the applications into several modules. This helps in more effectively managing the application in a period of time.
Module
the module is quite identical to a class. A module is generally described by a block of code that is utilized to execute a certain single task. Angular has the ability of modularity, where just one application is built by separating it in several modules. Export keyword is utilized to export component class from a module. Every Angular application has at least one Angular module by convention called app module.
Example:
Template
The template is the key role which justifies the browse of the component. It could be declared the view of the component is identified using a template. It is created with HTML, includes binding and directive.
Example:
Metadata
It is majorly helpful to extend the efficiency of the class. In Typescript, for this purpose is identified by decorating class. For example, to specify any component in Angular application, use metadata of the class (i .e. @Component decorator).
A decorator is a function that puts on metadata to a class, it is members, or it is method arguments.
Data Binding
The most effective feature, Data Binding, is the connecting bridge between Model and View. It makes automatically synchronized. Angular supports four types of binding – Property Binding, Event Binding, Interpolation, and Two-Way Binding.
Directive
Directives are custom-made HTML attributes helpful to persist ability of HTML. To make a directive, the @Directive decorator is utilized on connected metadata of the class. Three types of directives – Component, Decorator and Template.
Services
Services are used whenever single productivity is required normally in different modules of the application. Fundamentally, is utilized to share the data and behavior within the application. The service has no base class. Often used services are logging service, data service, massage service, etc.
Dependency Injection
Dependency Injection in Angular. Dependency Injection (DI) is a basic concept of Angular 2+ and enables a class to collect dependencies from another class. Usually in Angular, dependency injection is performed by injecting a service class into a section or module class.
Example:
There are many Text Editor which fully supports Typescript. Either out of the box or with a plugin, including all of these as per below.
- Visual Studio.
- Visual Studio Code.
- Atom.
- Eclipse.
- WebStorm.
Visual Studio Code is the best choice because it is open source and runs on Linux, Windows, and MacOS. It provides great features that support Typescript, including
- Auto-completion
- IntelliSense
- Syntax Checking
- Refactoring
To Download Visual Studio code visits the website at https://code.visualstudio.com/download.
Steps to Install Angular 2
Now, Getting Started with the Process to install Angular 2
Step 1: To install Angular 2, first download the node.js package from the https://nodejs.org/en/download/ site.
Install the downloaded npm (Node Package Manager) repository in your system.
- If you use Windows System, Install Windows installer.
- If you use MacOS System, Install MacOS installer.
Check your system compatible versions like 32 bit or 64 bit.
Step 2: Installing Node,
Now, Double click on the downloaded node-v10 15.3-x64.msi file to run the installer and Click Next button on installer screen.
Step 3: Now, click on the checked box and accept the terms in the License Agreement. Then Click Next button.
Step 4: On the next screen, Change the installation path if required or Click the Next button.
Step 5: On the Next feature selection screen, Keep default selection and Click Next button.
Step 6: Now, to install Node.js Click Install button.
Step 7: On the next screen, Wait for the installation to finish.
Step 8: Now, Click Finish button.
Step 9: Open the command prompt on your machine and type the following command and check nodejs version and npm version:
c:/>node -v
c:/>npm -v
Step 10: Once the installation is finished. Visit the site at https://angular.io/cli for Angular CLI(Command Line Interface).
Step 11: Open the command prompt on your machine and type the command “npm install –g @angular/cli” and hit the enter to install Angular 2 CLI(Command Line Interface).
Step 12: Type “ng new first-app” and hit enter to create the First App.
Step 13: When you install Angular 2 app you will be asked some questions by Angular CLI.
- Would you like to add angular routing? (Y/No) -> No
- Which style sheet standard wants to use? (Use arrow keys) -> CSS
Step 14: In First App add all packages using Angular CLI
Once you install all packages it means the app is created on the disk.
Step 15: Type “ng –version” command in command prompt and hit enter to find out the angular version
Step 16: Now, type the command “cd first-app” to get into the app directory or folder.
Step 17: Finally, the “First App” Angular app is created; now type the command “ng serve”.
Step 18: Now, open the browser and type http://localhost:4200 in the address bar and hit enter to run the First Application Angular app in the browser.
Recommended Articles
This has been a guide to Install Angular 2. Here we have discussed the Major Features of Angular 2 along with different steps to install Angular 2. You may also look at the following articles to learn more –
