Basics of Angular JS

Why We use Angular?

• Angular (Angular JS) and JS together bring structure and consistency to web application developments, and provides scalability and maintainability
• Java Script is client-side scripting language, add interactivity to web pages in unique ways but not suitable for single page application.
• Angular is specifically designed for single page application.

What is Angular

• Angular is an open-source JavaScript framework
• It is completely written in type-script (TS)
• TS TypeScriptextends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes
• It is designed to build single page application.
• It uses HTML syntax to express your applications components clearly.
• Maintained by Google
• It is designed for web desktop and Mobile application. Read More

Features of Angular

• DOM (Document Object Model)

DOM is a programming interface used for web documents. It represents the page in such a way that programmers can change the document structure, style and content. DOM represents the document as nodes and objects. Angular uses the DOM, this will update the entire tree structure of HTML Tags, until it reaches the data to  update.

• Type Script

The Type Script is a superset of JavaScript language that has a single open-source compiler and single development vendor. Type script helps to catch errors early through a type system which makes development more efficiently. For installation type in cmd “npm install -g typescript”.

• Data binding

Data binding is a process of building connection b/w app UI and data it displays.

Angular uses two-way data binding, any changes in UI element are also reflected in corresponding model state and vice versa. This allows the frame work to connect the DOM to model data by the controller.

• Testing

Angular uses Jasmine to run various tests.

Jasmine is a behavior-driven development framework for testing JavaScript. Jasmine allows various functionalities to different kind of test cases.

Karma is the task runner for tests.

Angular Architecture

• Angular is a full-fledged MVC frame work.
• MVC is an architectural pattern view that separate the application layer into model, view and controller.

Advantages of Angular

• Custom Components
• Data Binding
• Dependency injection
• Testing
• Comprehensive
• Browser compatibility

Different version of angular

• Angular 1

The Angular 1 built on JavaScript and completely based on controllers

• Angular 2

Incorporated the component-based approach.

• Angular 4

Included router updation, Angular CLI 1.0 was introduced

• Angular 5.6

The Angular CLI was optimized and ng-update and ng-add commands were added.

• Angular 7

Prompts were introduced in CLI which provide the information about functions.

• Angular 8

Ivy renderer and Bazel were introduced

Main Component

• 1^st Root Component

In Angular Js Root element is present in index.html, root element is the first marker to load the application code when it gets start.

• 2^ndts

It is the part of bootstrap and decide which angular module should be load at first when application started.

• 3^rd app folder

In app folder , there is app.module.ts

Learning Curves of angular

        Angular Components

• The Angular components are building block of the application
• Angular components of sub set of directives. (Structural, attribute, component).
• We can create angular component by typing in vs_code ng g c component name

Creating App in angular JS type ng new app name like ng new hello world, and type ng serve to run this app.

Meta Data

Component of meta data

• Selector
• Template
• Template URL
• Style
• Style URLS
• Providers
• Animations

Dependency injection

• 1^st create component to make a button to display employee info. Ng g c emp_info(Component).
• Then have to create a service class, injected to my component. Ng g s Records (Service_name).
• We will write the data in services.TS.
• After the declaration of array we will write the method to get data.
• To receive this data we need 3 more arrays in our component.TS file.
• Services are implement with the help of dependency injection. For this purpose we have to import the services in the component.TS file. And now import the service in component.TS. and then add providers in @component. Now we will create an object in constructor to retrieve data from services.