Skip to main content

Angular

What is Angular?

  • It is an open-source Javascript framework, which is written in TypeScript and maintained by Google for web development. The first version of Angular was released in 2010 as Angular 1.0, which is also known as AngularJS .
  • AngularJs is based on Javascript but Angular (2.0 and +) is based on Typescript.
  • Angular is mostly used for developing single-page applications.

Why Angular?

  • Angular is easy to learn.
  • It is being supported by the Google Team, which itself is another great benefit.
  • It is component-based architecture which is one of the most important factors that separate Angular from others.
  • Angular is full-fledged, It doesn’t require any additional libraries.

How to use?

  • Step-1: Before moving further make sure you have installed node and npm in your system. you can check using node --version and npm --version command.
  • Step-2: If npm and node is not installed. Download node "click here" .
  • step-3: As you already install node and npm you can check it by node --version and npm --version command. Now install angular cli by this npm install - g @angular/cli command.
  • Step-4: Create new project by this ng new projectName command. Choose yes for routing option and, CSS or SCSS.
  • Step-5: Go to your project directory cd projectName .
  • Step-6: Now run the server ng serve --open .

Features

  • Cross-Platform : Angular is used for developing applications across all platforms – web, mobile web, native mobile and native desktop.
  • MVC Architecture : MVC stands for Model-View-Controller.
  • Two-Way Data Binding : The most effective Angular feature is its two-way data binding system.
  • Simple and Interactive : Angular UI Framework helps build features quickly with simple and declarative templates.
  • Speed and Performance : The loading time of Angular apps is faster than any other front end framework in the industry.

Angular Architecture

Angular is a full-fledged model-view-controller (MVC) framework. It provides clear guidance on how the application should be structured and how to reduces the complexity in building and maintaining large web applications, it does this by the use of powerful tools like Angular CLI, Dependency Injection, etc.

ss

The following are some important building blocks of an Angular :

1. Modules

  • In angular modules is refers to a place where we can group the components, directives, pipes, and services, which are related to the application. Every Angular application has at least one module i.e. the root module, which must be present for bootstrapping the application on launch.

  • New Module can be generated using this cli command : ng g m moduleName .

2. Components

  • In angular components are the main building block for Angular applications. Each component consists of:

    • An HTML template that declares what renders on the page.
    • A Typescript class that defines behavior.
    • A CSS selector that defines how the component is used in a template.

  • New Components can be generated using this cli command : ng g c componentName .

3. Services

  • When we have data or logic that isn’t associated with any specific view but has to be shared across components, so a service class is created. The class is always associated with the @Injectible decorator.
  • With the help of service we can access method and properties accross other components in the entire project.
  • New Service can be generated using this cli command : ng g service serviceName.a1

4. Dependency Injection

  • This feature lets you keep your component classes crisp and efficient. It does not fetch data from a server, validate the user input, or log directly to the console. Instead, it delegates such tasks to the services.

5. Directives

  • Directives are custom HTML attributes which tell angular to change the style or behavior of the Dom elements.
  • 3 Types of Directives
    1. Components directives
    2. Structural directives
    3. Attribute directives

Important concept of Angular :

1. Lazy Loading

2. Observables

3. Pipes

4. Reactive Form

5. Two-Way Data Binding

Pros and cons of Angular

Pros:

  • Readable and Testable Code.
  • Provides Faster Development Process.
  • Excellent Material Design Library.
  • It helps developers to keep their code clean and understandable.
  • Two-way data binding

Cons:

  • One of the major drawbacks to using Angular is the platform's limited SEO options and poor accessibility for search engine crawlers.
  • Divided community.

Where to learn Angular :

  1. angular docs
  2. Youtube tutorials such as: