This tutorial led you to learn the fundamentals of Angular and TypeScript.
TABLE OF CONTENT
- What is Angular?
- Why do we need Angular?
- Architecture and Building Blocks of Angular Apps
- Setting Up the Development Environment
- Your First Angular App
- Structure of Angular Projects
- TypeScript Fundamentals
- What is TypeScript?
- Creating First TypeScript Program
- Declaring Variables
- Type Assertions
- Arrow Functions
- Access Modifiers
- Access Modifiers in Constructor Parameters
- Angular Fundamentals
- Creating Components
- Generating Components Using Angular CLI
- Dependency Injection
- Generating Services Using Angular CLI
What is Angular?
Angular makes HTML more expressive. It powers up HTML with language related features such as local variables, for loops, and if conditions.
Angular has built-in support for making communication with a backend service. This makes it easy for web applications to integrate with a back-end service. It is preloaded with set to features to get and post data or execute server-side business logic.
Picture credit from..
Architecture and Building Blocks of Angular Apps
The Back-end consist of web servers or cloud which responsible for storing the data and doing any kind of processing. Back-end may one or more databases and APIs to make the data available to the client. For a large enterprise level application, it may also implement the business logic of the application like calculating the tax, shipping on various parameters
The Front-end or Client app talks to the Backend-end to get or save the data. At Back-end we create one or multiple HTTP Services / API to make data available to the client. These HTTP Services/ APIs are endpoint that are accessible via HTTP protocol so we call them to through HTTP request to get or save the data.
If we talk about Angular Building Blocks At the heart of every Angular App, we have one or more components. Application developed with Angular is comprised of a set of components and services which facilitates operations/functionality across those angular components.
Angular component is comprised of a template which is the HTML for the user interface fragment defining a view for the application. component encapsulates the Data, HTML mark-up and logic for a view.
Along this, a class for the code associated with the view. The class contains the data or properties for use in the view and methods, which perform actions button for the associated view e.g. responding to a button click.
A component also has metadata, which provides additional information about the component to Angular. It is this metadata that identifies the class as an Angular component.
Every Angular application has at least one Angular module which called the application's root Angular module. As Application grows it can have any number of additional Angular modules including feature modules that consolidate the components for a specific application feature to make code maintainable. It is a container for groups of components.
For an example, in real world scenario If we go to a grocery store then it has few shelf's to maintain their products/items to sell but in a big mall we found lots of I/0 to manage different categories of the products. Similarly, to maintain different type of components we can create multiple modules to organize the components.
If we see in Training web application, there are following modules can be created to manage the application:
Each module will manage their specific group of components, sub components to break the application in smaller and maintainable to facilitate a specific area of the application.
In this section we have learned about the Angular and what/why Angular. Along this we have also tried to know the basic building blocks of the Angular to develop a web application
Next: Setting Up the Development Environment