Introduction to Angular 4 – Lesson 1

Hi guys. In this tutorial we are going to learn about Introduction to Angular 4.

Introduction to Angular4

  1. What is angular?
  2. What are the advantages of learning Angular?
  3. Why should we choose angular?
  4. Differences between Angular Version (1.X, 2, 4)

1.1 What is Angular?

  • Perquisite to learn Angular 4 is Javascript and Typescript.
  • If someone ask you this question, then you must be aware of what is JAVASCRIPT. Because javascript is the basic for all the scripting languages like Angular4, ReactJs, NodeJs, etc… Here are few languages that are supersets of javascript that will generate Javascript on compiled.

  • The Aim of Javascript is to make the HTML page dynamic. Now if you have a question that what is dynamic, “Making a HTML Dynamic mean, nothing but changing the data in the HTML page by an action done by the user”.
  • Angular 4 is a Framework which supports,
    •  Databinding (one-way/two-way),
    • OOPs Features (Inheritance, Interfaces, Encapsulation, Abstraction). One thing clear is Angular 4 doesn’t support polymorphism.
    • Angular uses its own routing to develop Single Page Applications (SPA).
    • Services like HTTP.
    • Dependency Injection.
    • Animations.
    • Lazy loading application.
    • ES5 and ES6 (ECMA script)


  • Angular is a Framework but not a library, where the difference is pretty simple that library is just an add-on for a framework. But framework gives you a platform to create the application.
  • Angular is a Structured Framework which is very useful to maintain the DOM and to manipulate the DOM. Why do we call it a Structured F/w is because Angular has its own specified architecture to create an application. To create a new application we must create in the following structure.

  • Angular 4 uses Typescript language to create an application. So perquisite for learning Angular 4 is Javascript and Typescript. Where Typescript is a superset of javascript which will generate javascript on compile. For compiling typescript it uses TSC (Typescript compiler).
    Ex: You have sample.ts.
    On compiling sample.ts using tsc –compiler it will generate two more files

1.2  What are the advantages of learning Angular?

  • Main advantage is the Consistency and it is easy to Maintain.
  • It has a Component-based architecture that provides a higher quality of code
  • Google has announce the LTS( Life time support) for Angular 4.
  • Angular4 is developed using Typescript enabling us to optimize the code using OOPS concept.
  • Angular is very famous for Single Page Application (SPA).
  • Two-way data binding reduces the development time for synchronizing View and Model.
  • Dependency Injection allows us to reuse the code, and we can import third party libraries to Angular by using DI (Dependency Injection), and where we can share the various services into other services or components.
  • Directives are very helpful for developers to change the behavior of the HTML elements in Document Object Model (DOM), permitting us to create dynamic and rich content with HTML. Angular provides us the facility to create our custom Directives.

1.3 Why Should we choose Angular ?

  • Angular is a open source framework which we can freely download, no need for pay money for
    this framework.
  • It makes client side programming very easy.
  • The tooling support is as good as on Java or .Net platforms.
  • Angular uses TypeScipt language, Its object oriented and supports core features like interfaces and classes. TypeScipt code analyzer warns you about the errors as you type.
  • Data Binding is a primary feature of angular, it can be implemented in 2-Ways,
    • One-way data binding
    • Two-way data binding
  • First time in client side frameworks angular introduced this data binding concept, this
    feature will reduce lot of client side coding related to data presentation (HTML view).
  • It’s a pattern language it uses HTML and extends the behaviour of the HTML elements with directives(for example, <myPaging></myPaging>. This improve code readability.
  • Dependency injection give you a clean way to implement loose coupling between components and
    services. Binding and events allows you to create reusable and loosely coupled components.
  • Performing validations will becomes so simple, just we need to know about HTML5 Validation attributes (required, pattern, max-length, min-length).
  • Unit testing becomes easy in Angular.
  • Angular applications can run on all major browsers and smart phones, including Android and
    IOS based phones/tablets.
  • It has own Routing support for single page application(SPA), in SPA only main page will load from
    server remaining all requestes are processed at clint side without reloading the whole page.

One thought to “Introduction to Angular 4 – Lesson 1”

Leave a Reply

Your email address will not be published. Required fields are marked *