Sorry, you need to enable JavaScript to visit this website.

An introduction to UI development with Angular

An introduction to UI development with Angular
January 21, 2022

Introduction

Angular is a powerful framework that heavily leverages JavaScript, HTML, CSS, and Typescript to build client-side mobile and desktop web applications and single-page applications where views get refreshed asynchronously without reloading the entire page. This blog is intended for developers who would like to try their hand at writing their first “hello world” application using this open-source platform.

Development environment setup

  1. Install Node Js: To run an Angular application, node.js is required, and the installer can be downloaded from https://nodejs.org/en/. It manages npm dependencies, supports browsers when loading pages, and provides the required libraries to run the Angular project. Please note that node.js serves as the run-time environment in localhost.

    Angular1

  2. Install Angular CLI: This command-line interface allows the building of the angular application by typing commands. It makes development quicker and easier following the best practices. Through Angular CLI command, developers can create projects, applications, and library code as well as perform testing, bundling, and deployment.
    To install Angular CLI, a command prompt is to be opened, and the following command is to be executed:
    npm install -g @angular/cli

    Angular2

  3. Text editor or IDE: Visual Studio Code is recommended to be used as IDE for developing Angular web applications. This code is freely available at https://code.visualstudio.com/download/

    Angular3

Initial workspace setup

To set up an initial workspace, a command “ng new <project name>” needs to be executed from the command window. Visual Studio Code also has an integrated terminal to execute the same.
To run the new angular project, execute the following command:
ng new MyAngularApp
* Please note: That MyAngularApp is the name of the project created above

Angular4

angular5

Following the execution of the command, the MyAngularApp folder gets created in a few minutes. To start working on the project, change the folder to MyAngularApp using the cd MyAngularApp command.

angular6

Run application

Initially, the application needs to be built to run in the browser using the ng serve -o

Angular CLI command. Here ‘-o’ describes open. So, this Angular CLI command will automatically open the application in the default browser as soon as the build is complete without errors.

Angular7

The ng serve command keeps checking for any changes in the project file(s). If any change is made to any file of the project, the application is rebuilt, and the browser is automatically refreshed to reflect the changes.

The application can be stopped/ terminated by pressing CTRL + C in the command window.

Angular components

The Angular components comprise the following three parts:

  1. Template: This indicates an HTML-created view that will be the user interface of the application. It is an HTML code along with an Angular-specific HTML markup known as the Angular Template syntax. It includes references to Angular directives, Angular pipes, and other Angular components.
  2. Class: This is a code in the typescript that supports the view. The class, like any other programming language, contains data properties and methods that can control the view. For example, there can be a method to show or hide an element based on the value of a property.
  3. Metadata: Metadata is used to decorate a class to configure its expected behavior. An Angular Decorator is a function using which metadata can be attached to a class, method, accessor, property, or parameter.

To create a component, the following command is required to be executed:

ng generate component NewComp

Once the component is generated, the following files will be added to the project:

  1. component.css:  It is a CSS file for the component where styles can be defined. This is an architecture that simplifies the CSS authoring for large web applications. CSS is used to define styles for web pages, including the design, layout, and variations in display for different devices and screen sizes.
  2. component.html: It is an HTML file for the component with a defined view. It uses HTML as a template language and extends HTML's syntax to express the application's components. AngularJS's data binding and dependency injection help to achieve functionalities developing lesser code.
  3. component.spec.ts: Using this file, test cases can be written for a component. To run test cases *.spec.ts file is executed. To run tests using the Angular CLI, the  following command is executed in the command window:

ng test 

As soon as it is executed, Karma opens up the default browser and runs all the tests written in this file with the help of Jasmine and displays the outcome.

  1. component.ts: It is a class file for a component. It creates a new class called NewcomComponent, which implements OnInit.In. It has a constructor and a method called ngOnInit(). ngOnInit is called by default when the class is executed.

Application styling

There are several ways to style the application by adding inline, importing in index.html, or adding through angular-cli.json. Angular has component-specific styles which override the global ones. Sometimes it won’t work when it is added inside the global styles for individual component-specific.

Custom CSS styles can be added inside angular.json file under the styles array. While creating the Angular app using CLI, by default Angular adds the styles.css under the src folder. Multiple CSS files can also be added inside the styles array by adding an external style sheet.

Third-party libraries can be installed by using npm package. The CSS files are copied inside the node_modules folder. To install the bootstrap execute the following command:

npm install bootstrap

It can be imported directly in one of the stylesheets inside the style.css

@
import "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css";

Styles can be directly referred inside the index.html file if someone does not want to use Angular CLI as shown below:

< link rel="stylesheet"
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

< link rel="stylesheet" href="assets/css/bootstrap.min.css">

FontAwesome can also be installed by using the following command

npm install @ fortawesome /angular-fontawesome

npm install @ fortawesome /angular-fontawesome@<version>

Data binding

Data binding syncs data between the component and the view. Once the user updates any data in the view, the components are updated automatically. As soon as the component is updated and receives the new data, Angular updates the view. Data binding has many uses. There are four types of data binding in Angular applications, which are listed below:

  • String Interpolation
  • Property binding
  • Event binding
  • Two-way binding

Directives

Angular directives manipulate the DOM. Appearance, behavior, layout of a DOM element can be changed by using the Directives. It helps to extend the HTML by giving it new syntax. Each directive has a name, for example – ng-repeat, which is from the Angular predefined library. It can be used in an element, attribute, class, or comment by determining each directive. There are four types of Angular directives:

  • Component directive
  • Structural directives
  • Attribute directives
  • Custom directive

Routing

In Angular, navigation and routing are handled by the Router Module. Routing helps to navigate from one view to another view. It performs application tasks, which help to navigate between different views.

Angular routing is a separate module. It has its library package. The service provider and directive offer a routing module when the user navigates between views.

By using Angular routing, users can do the following:

  • By typing a URL in the address bar, users can navigate to a specific view
  • Optional parameters can be passed to the view
  • Users can perform application tasks by binding the clickable elements to the view and can also load the view
  • Browser’s back and forward buttons can be handled
  • It allows users to dynamically load the view
  • Guards protect routing from unauthorized users

Components can be displayed anywhere by using the RouterOutlet directive. RouterOutlet directive allows displaying of the view on the page. The following directive should be added to the root component.

< router-outlet></router-outlet>

Conclusion

Angular helps create high performance, smart, and user-friendly web, mobile, and desktop solutions.

Angular helps create high performance, smart, and user-friendly web, mobile, and desktop solutions such as:

  • SPAs
  • PWAs
  • large-scale enterprise software
  • cross-platform mobile apps

Angular has gone far beyond being just a framework; it is a whole platform with varied sets of tools and structural features that help developers write clean code faster and easier. By using these toolsets, an experienced team of software developers can deliver:

  • an affordable front-end part of a cross-platform solution,
  • a responsive, efficient, and high-quality web or desktop app,
  • a readable and testable code,
  • a maintainable codebase,
  • a powerful material design solution.