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
- It is completely written in type-script (TS)
- 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.
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.
Angular uses Jasmine to run various tests.
Karma is the task runner for tests.
- 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
- Browser compatibility
Different version of angular
- Angular 1
- 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
- 1st 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.
It is the part of bootstrap and decide which angular module should be load at first when application started.
- 3rd app folder
In app folder , there is app.module.ts
Learning Curves of angular
- 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.
Component of meta data
- Template URL
- Style URLS
- 1st 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.