Start With Angular 13

What is angular?

Angular is a development platform, built on Typescript. As a platform, Angular includes:

• A component-based framework for building scalable web applications
• A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
• A suite of developer tools to help you develop, build, test, and update your code

With Angular, you’re taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as straightforward as possible, so take advantage of the latest developments with a minimum of effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.

Angular Features and Benefits :

1.  Angular Generic Features :

Cross-Platform – 

With Angular, you can develop progressive web applications (PWA). PWA offers an app-like experience to the audience using modern web capabilities.  As per your needs, you can deploy an app as native as well as progressive. The hybrid mobile SDK called Ionic can ship your apps to the app store and deploy the same to the mobile web as PWA. 

In addition, you can develop apps for the desktop with Angular

High Speed & Optimum Performance –

Angular redefines the modern JavaScript virtual machine by turning templates into code. Thus, your hand-written code can leverage on a productive framework. The best thing about Angular is that you can render the code into HTML & CSS and have the first view of the application on any other platform like NodeJS, .Net, PHP, etc.

The loading time of Angular apps is faster than any other front end framework in the industry. It loads at the speed of Cheetah with any new component router. Further, the code gets split automatically as per user’s loading and rendering requirements.  

Angular Applications for Everyone –

Angular is a magical front end platform that not only allows developing mind-blowing applications, but also enables the creation of high-end animations to enhance the user experience. The API of Angular is so intuitive that developers can brew complex choreographic as well as animation with low code.

In addition, with smart unit testing frameworks like Jasmine and Karma, you can fix your broken code anytime. Angular has more than 11 build-in testing modules to ensure error-free code.

Building accessible applications is one of the breakthrough capabilities of Angular. Everyone, including people with special abilities can use the accessible applications.  

2. Angular Technical Features :

MVC Architecture –

MVC stands for Model-View-Controller. The application data is managed by the Model and View manages the data display. While the controller plays as a connector between the view and model layers. Generally, in MVC architecture, you can split up the app accordingly and write code to connect the same. However, in Angular; developers just need to split up the application into MVC and it does the rest on its own. And it saves a significant amount of coding time.

Efficient Two-Way Data Binding –

The most effective Angular feature is its two-way data binding system. The View layer exactly represents the Model layer and they stay in perfect synchronization. If you make any change in the model, the users can see in the view model automatically. Thus, it decreases important development time.

Less Code Framework –

Angular is a low code framework compared to the other front end technologies. You don’t need to write separate code to link the MVC layers. And you don’t require specific code to view manually also. In addition, the directives are isolated from the app code. These all together automatically minimize the development time.  

Angular CLI (Command Line Interface) –

The Angular CLI follows the industry-best-practices for frontend development with striking build-in features SCSS support or routing. Moreover, the common Angular CLI like ng-new or ng-add supports the developers to discover ready-made features with ease. The basic CLI of Angular is:

ng New: It’s a primary initial for any Angular app development. And you can also create a new workplace with this command.ng Generate: It allows you to create new components, services, routes, and pipes. Also, you can create simple test shells with ng Generate.ng Serve: It permits you to test your Angular app on a local server.Test, Lint: Shine your code with smart units and end-to-end tests. And ng lint helps to run programs to analyze code for possible errors.

CDK and Angular Material –

Angular as a top frontend language has been improving its Component Development Kit (CDK) with the version upgrades. Refreshing and virtual scrolling are the prominent features of the latest Angular CDK. It helps in dynamic loading as well as unloading of the DOM to create a large list of high-performing data. You can import the ScrollingModule or DragDropModuleto the application.

Some of the prominent features of this DragDropModule are sorting within a list, free dragging, previews, and placeholders. In addition, it helps in reordering lists (moveItemInArray) and transferring items between the lists (transferArrayItem).

Virtual Scrolling –

Angular Virtual Scrolling helps the code react to various scroll events. Besides loading and unloading visible DOM elements, Virtual Scrolling enables an effective way for item simulation.

TypeScript-

With TypeScript, Angular offers a seamless experience to the developers. And TypeScript is the top choice for frontend development in 2019. It is highly efficient in detecting bugs and thereby, reduces developing time. TypeScript also automatically populates the root file configuration for easy compilation. In comparison to JavaScript, TypeScript has richer enums, interfaces, generics, hybrid types, union/intersection types, access modifiers, etc.

Dependency Injection-

The built-in dependency injection of Angular makes application development easier for developers. It just asks for your dependencies. Just ask it ‘I need y’! And it creates the same & delivers it to you.

Directives-

Directives are the most challenging Angular features. You can create custom HTML tags serving as custom widgets with the help of directives. Developers can use these to decorate behavior-driven elements. You can also manipulate DOM attributes as per needs with the help of directives.

3.  Setup and installation of Angular 13 :

Following are the steps to install Angular 13

1. Prerequisites
2. How to install Node.Js?
3. How to install Node Package Manager (NPM)?
4. How to install Angular CLI (Command Line Interface)?
5. How to create the first application?
6. How to execute an Angular application?

Prerequisites 

To work with Angular, we need the below software/packages installed,

1. Node.js
2. Node Package Manager (NPM)
3. Angular CLI (Command Line Interface)

How to Install Node.js & NPM?

Navigate to the official node.js website

Click on Downloads link from Menu,

Based on the operating system and processor in your system, download the .msi file and install it. 

Node.js and NPM will be installed in your system once installation is complete. Execute the command in the command prompt to check the installed version : Node -v

Npm –v

How to Install Angular CLI (Command Line Interface)?

We will use the below command to install Angular CLI. 

npm install –g @angular/cli

In the above command ‘-g’ means, it will install globally and be available from anywhere in the system. 

Once CLI installation will be complete, we can use the below command to check the version.ng –version

We can check the version of Angular CLI, Angular Version, Node, Typescript, rsjx etc versions using the above command.

How to create a new project using CLI?

The below command will be used to create a new Angular project. 

ng new HelloWorld

In the above command “HelloWorld” is the application name.

It will ask two questions, 

1. Would you like to add Angular routing? – I don’t want routing hence entering N.
2. Which stylesheet do you want to use? – I need CSS

It will take some time to install the required packages.

Once installed, you will see the below screen.

Check in the project folder, all files are created successfully.

Let’s execute this project using Angular CLI,

How to Execute Angular using CLI?

use the ‘cd’ command and select the path of the project folder ,as shown below.

Execute Angular Project,

ng serve

The ng serve command is used to build an application and serve it locally. Server will automatically rebuild the application and reload the page when you change any of the source files through this command.

In the browser, open http://localhost:4200.

4.  Workspace and project file structure :

You develop applications in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise a standalone application or a shareable library.

The Angular CLI ng new command creates a workspace.

ng new <my-project>

When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root-level application named my-project. The workspace root folder contains various support and configuration files, and a README file with generated descriptive text that you can customize.

By default, ng new creates an initial skeleton application at the root level of the workspace, along with its end-to-end tests. The skeleton is for a simple Welcome application that is ready to run and easy to modify. The root-level application has the same name as the workspace, and the source files reside in the src/ subfolder of the workspace.

This default behavior is suitable for a typical “multi-repo” development style where each application resides in its own workspace. Beginners and intermediate users are encouraged to use ng new to create a separate workspace for each application.

Angular also supports workspaces with multiple projects. This type of development environment is suitable for advanced users who are developing shareable libraries, and for enterprises that use a “monorepo” development style, with a single repository and global configuration for all Angular projects.

To set up a monorepo workspace, you should skip creating the root application. See Setting up for a multi-project workspace below.

Application Project Files :

By default, the CLI command ng new my-app creates a workspace folder named “my-app” and generates a new application skeleton in a src/ folder at the top level of the workspace. A newly generated application contains source files for a root module, with a root component and template.

When the workspace file structure is in place, you can use the ng generate command on the command line to add functionality and data to the application. This initial root-level application is the default app for CLI commands (unless you change the default after creating additional apps).Besides using the CLI on the command line, you can also manipulate files directly in the application’s source folder and configuration files.

For a single-application workspace, the src/ subfolder of the workspace contains the source files (application logic, data, and assets) for the root application. For a multi-project workspace, additional projects in the projects/ folder contain a project-name/src/ subfolder with the same structure.

Application source files :

Files at the top level of src/ support testing and running your application. Subfolders contain the application source and application-specific configuration.

App Support Files	Purpose
app/	Contains the component files in which your application logic and data are defined.
assets/	Contains image and other asset files to be copied as-is when you build your application.
environments/	Contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production (“prod”) environment. You can define additional target environment configurations.
favicon.ico	An icon to use for this application in the bookmark bar.
index.html	The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don’t need to add any <script>or<link>tags here manually.
main.ts	The main entry point for your application. Compiles the application with the JIT compiler and bootstraps the application’s root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by appending the –aot flag to the CLI Build And Server Commands.
polyfills.ts	Provides polyfill scripts for browser support.
styles.sass	Lists CSS files that supply styles for a project. The extension reflects the style preprocessor you have configured for the project.
test.ts	The main entry point for your unit tests, with some Angular-specific configuration. You don’t typically need to edit this file.

Inside the src/ folder, the app/ folder contains your project’s logic and data. Angular components, templates, and styles go here.

SRC/APP/FILES	PURPOSE
app/app.component.ts	Defines the logic for the application’s root component, named AppComponent. The view associated with this root component becomes the root of the view hierarchy as you add components and services to your application.
app/app.component.html	Defines the HTML template associated with the root AppComponent.
app/app.component.css	Defines the base CSS stylesheet for the root AppComponent.
app/app.component.spec.ts	Defines a unit test for the root AppComponent.
app/app.module.ts	Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.