Angular ARTICLE

History of Angular

Prior to its release, a Google employee by the name of Miško Hevery, was developing a side project. This side project was to help make building web applications easier for a couple internal projects he was working on. This side project later became known as AngularJS (Angular because of the < > in HTML). Angular is used as the frontend of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular itself (or AngularJS), and Node.js server runtime environment.

Angular Introduction

What is Angular?

• Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.
• An application always has at least a root module that enables bootstrapping, and typically has many more feature modules.
• Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data
• Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

Angular Template Syntax

• Binds property value to the result of expression firstName.

        
             < input [value]="firstName" >
        
      

• Binds attribute role to the result of expression myAriaRole.

        
          < div [attr.role ]="myAriaRole">
        
      

• Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.

        
          < div [class.extra-sparkle]="isDelightful">
        
      

• Binds style property width to the result of expression mySize in pixels. Units are optional.

        
          < div [style.width.px]="mySize">
        
      

Defining Template Reference variable

• We declare Template reference variables using # followed by the name of the variable ( #variable). We can also declare them using #variable="customer" when the component/directive defines a customer as the exportAs Property.
• For Example

HTML Element

        
             < input type="text" #firstName>
        
      

Component/Directive

        
          < app-customer #customerList=”customer”></app-customer>