Angular Application Step by Step (part 1)

Angular is a versatile web development framework, we can build application using html javascript template engine, scaffoding, command line to generate different directives, using typescript as language, testing with karma, deploy the application to server, perform end to end testing with one framework, so it is a cool framework to develop web application.

Setup Environment

Prerequisites

1. Node (latest version), you can also use nvm .
2. TypeScript npm package
3. @angular/cli npm package

First we need to install typescript npm package because Angular prefer typescript as language for development.

To start building web app with angular, we need to install angular cli to enable command line functionality

To create angular project we have to follow the command below .

To autoconfigure the Angular Routing and scss as styling, we need to type Angular routing to yes and select scss option as style from command line.

What is Angular Routing?

Angular router is a routing library for angular, the package name is @angular/router. It provides functionality to build a single page application with multiple views. It provides the rich features which helps the developer to add Multiple router outlet, provides different path matching strategies, easy access to router paramter, router guards to protect the unauthorized access.

What is SCSS?

Scss is the preprocessor of the css. It is built with Ruby, it enables to do programming with css styles, later it is converted to css when displayed in browser. By using scss we can declare variable in style, add nested styles, inherite and reuse the style.

Most of javascipt file of this application use (.ts) extentions. (.ts) is typescript file extension. Typescript is the super set for javascript. Typescript provide full features javascript, it also includes datatypes and strongly types declarations, inheritance, interface, class feature like object oriented language such as java , c# .

Basic understading of Angular application folder structure.

In project root folder, there is a file named main.ts, which is entry point for angular app, which helps to bootstrap the angular application using function platformBrowserDynamic().bootstrap(<module name>).

In line 4, Import the AppModule to app.module.ts file which contains application’s main or root module then add it as boostrap module in line 11..12. Now you have question, what is module in angular?

Angular apps are modular, it has it own modularity system called NgModules. NgModules contains the block of code which is dedicated to an application domain. It contains components, service providers and it can import the sub modules of application. Angular App have one root module which is named AppModule, which is implemented in app.module.ts .

App module contains code below

In line 7, we declared @NgModule decorator, so angular can identify it as module and it is a root module of the application. @NgModule contains declarations , imports , provider bootstrap attributes.

1. declarations, contains the angular components array. Developer must add the angular component for showing the component in application at browser.
2. imports, contains the other submodule related to application
3. provider, contains all the service consume from third party library and also contains the async services, which consumes data from api
4. bootstrap, contains the main components array, by this atrribute angular knows that which components are loading during bootstraping the application. 

In line 13, you can see that there is AppRoutingModule module. This module is imported from src/app/app-routing.module.ts file. It is submodule of a AppModule which contains all the routing configuration of application. Now you have question in mind, how is the routing works in application? We can see later in this articles.

To Run the application you need to know about Angular CLI command, which is provided below.

ng serve will normally run in localhost:4200 port in development environment.

Generate the component in Angular apps

Before Create the component in Angular, we need to know about some Angular CLI command, those are ng generate component <component name> or for shortcut we can use ng g c <component name> . To create the component in sub folder we can use ng g c <folder name/component name>.

For Learning purpose, we can add folder components in src/app where we can organize the components of angular application . we need to create two component home and about to learn about navigation or routing to multiple views in angular application.

Running the commands ng g c components/home and ng g c components/about, creates folder named home and about in components folder, and each of these components folders contain html , scss , test file spec.ts and component classfile.

Component class Structure (e.g home.component.ts )

In line 1, Import Component decorator and OnInit interface from @angular/core library.

What is Component Decorator ?

Component decorator allows you to mark a class as an Angular component and provide its members and method argument and additional metadata that determines how the component should be processed, instantiated and used at runtime. Normally `decorator` use prefix with an ‘@’.

‘@Component’ decorator includes

In line 2 and 11 declare Selector attribute, which is used in template view like a html tag. For component based application, selector is just name of the component , which is being called by its className in the directives list.

Also we can say selector is a complete functionality name used as html tag in the template view.

In line 3 , We can add view template (html with angular syntax) file soruce using templateUrl .

In line 12, we can see that, the template is directly added to @Component decorator, which is then render to a browser.

We can say that, we can import html template view of angular component by using templateUrl or template attribute of @Component Decorator.

In line 4,styleUrls attribute, shows the location of styles source file, used for changing style of template view .

In line 13, we can also use styles array for designing the template view for angular component.

So styleUrls and styles attribute is helping to add and modified the design of angular template view

Steps to enable the Angular Routing to angular apps

1. If we select Angular Routing to yes while generating angular app,<base href="/"> is added automatically in src/index.html file. If <base href="/"> is not available in src/index.html file, we need to add it manually.

2. Remove all unecessary code from src/app/app.component.html file, except router-outlet. But why? because

The RouterOutlet is a directive from the router library that is used like a component. It acts as a placeholder that marks the spot in the view template where the router should display the components for that outlet.

Add those code below to the app.component.html file:

routerLink: RouterLink is used for generating link.

routerLinkActive: This will set the active-link class on the <a> tag, for which routing is active now.

3. Import routing Components (e.g home and about) to app.module.tsfile. if we create component with terminal command ng g c <component name>, the Components are added automatically to app.module.ts file. If not, we need to add it manually to app.module.ts file for routing purpose. We must add the HomeComponent and AboutComponent to declaration attribute for registering the component with AppModule .

4. Configure the route for home and about in src/app/pp-routing.module.ts file with those two component.

If we select Angular Routing to yes while generating the application, it will automatically generate most of the code in src/app/pp-routing.module.ts and automatically add AppRoutingModule module as sub module to app.module.ts file. Open app.module.ts file, you can see that AppRoutingModule is added into imports attributes of AppModule.

If the app-routing.module.ts file is not available in application we need to run this command at terminal.

> ng generate module app-routing --flat --module=app

This command will generate the app-routing module, without test file and import app-routing module automatically to app.module.ts file.

Replace the code with below code for app-routing.module.ts file.

We need to import Route and RouteModule from @angular/router package, to enable the navigation or routing in angular apps.

So we just need to add Angular component to that file like line 4 and 5. Define with {path: <route path in browser> , component: <Angular Component Name>}as in line 8 to 10.

In line 10, we can define default route. so you have question in mind what is default route?

Default route

If the user browse to any route which doesn’t match with any existing route, it will then automatically redirect to default route of application. we can define the default route element to route array by {path: '', redirectTo: 'home' pathMatch: 'full'}. That means, if the path is empty, or whole URL path needs to match with route, otherwise it redirect to home component.

In line 4, we will import the route module for angular application.

Angular Router deals with a global shared resource — location, we cannot have more than one router service active in application.

That is why there are two ways to create the route module: RouterModule.forRoot andRouterModule.forChild.

• forRoot creates a module that contains all the directives, the given routes, and the router service itself.
• forChild creates a module that contains all the directives and the given routes, but does not include the router service.

We can see the output of the application by simply using this command ng serve , it will run application in 4200 port by default. The output of the application.

Applying the style to Angular Application

Web application is incomplete without applying the style, as it look ugly. So we need to apply style in application. During generating the application, we are selecting scss as style standard for application. So when we generate the component , style file get generated with .scss extension with component name.

In angular JS, normally style is isolated with component, means the style only works on specific component which style is assigned to. We can also declare the global style by angular configuration.

To declare the style globally we need to add the style file path to angular.json configuration file. Now we discuss about how we add the globally accessible style in angular.

(1) Create the folder named scss in src/ folder and move the style.scss file to src/scss folder.

(2) Open angular.json file from root application and then change style file path src/style.scss to src/scss/style.scss.

we can also add the multiple global style file in styles array in angular.json file. such as

"styles": [ 
    "src/scss/style.scss", 
    "src/scss/theme.scss",
    ...
]

Now add some style in style.scss to change the website background color. Heading color of the components of application.

(1) open the style.scss file from src/scss folder

(2) create the class app-body, scss that support nested style for css selector. so we are nesting style for app-body class selector. we will change style of child dom element h1 , also change .nav children class and its hyper link <a> dom element design.

(3) add the class app-body to main <div> dom element.

(4) This is output of applying scss style for angular application.

Component Wise Styles.

For example, we need to change some css style for home component. while generating the home component from command, home.component.scss file is added with home component directory. There is a two way for declaring style

First one is using styleUrls array in @component decorator and other is styles array in @component decorator in component class declaration (e.g home.component.ts) file.

First we see the styleUrls attribute in @Component decorator

(1) home.component.scss file generated automatically with component.

(2) Import the home.component.scss file to styleUrls array.

The Second is inline style added to ‘@Component’ decorator of component class declaration file.

(1) Open the about.component.ts file from file browser

(2) change the styleUrls to styles attribute to @Component Decorator . Add the style element in styles array. then create class named about-paragraph whose color is green. we can add the multiple style in this styles array attribute.

(3) Open the about.component.html file. add the about-paragraph in paragraph dom element.

(4) Color of the paragraph is changed to green .

(5) Open the developer console , in elements tab, we will see that angular generate unique identifier for paragraph dom element. And angular will isolate design element with that unique identifier.

All the code for this article you can find in github with following links:

tariqulislam/ng-basic-learning