Create Your First Angular App and Directory Structure of Project

Angular is best suited for Single Page App (SPA), for getting started with Angular we need to set up the development environment first. So for setting the development for Angular please check out the earlier post for same for Getting Started with  Angular.

1.Create a Project in Angular

For creating the project into angular using angular CLI is very easy, so open a terminal and execute the below command to create the new project.

ng new FirstApp

Wait for some time above command will create the new project along with complete project hierarchy and structure of an Angular project, we required for developing our first SPA app in angular. Make sure you are connected to the Internet before using the above command because above command download some package and dependency from GitHub.

The output of the above command will look like as given below.

  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
  create src\app\index.ts
  create src\assets\.gitkeep
  create src\environments\environment.prod.ts
  create src\environments\environment.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\styles.css
  create src\test.ts
  create src\tsconfig.json
  create src\typings.d.ts
  create angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.

2. Serve the App using ng serve

In earlier steps, we have created our project with the name of FirstApp, what next? We have to check that whether our created app is working or not for which, this app needs to be tested. For testing the app we have to use the ng serve command from our project home directory to start serving our app.

cd FirstApp
ng serve -o

The above ng serve -o or -open will start the serving our app and launch the app by opening the browser on URL http://localhost:42oo/ . If you face any error after issuing the above command its might be due to the older version of your angular CLI. So, check the error logs and update the angular CLI version.

3. Working with Angular Component

Angular by default create an app for you when you create your app with ng serve command. It is the root component of you App and its name is app-root.

You can find this component files at ./src/app/app.component.ts which are as given below.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

Below is the explanation of the different component inside the app.components.ts files. In the very first line of the code, you can see that we are importing the core component.

Next part which is defined with the name of @Component in this section of the code we are defining three part selector, templateUrl and styleUrls for our component.

The selector is the definition of the tag which we will use inside our index.html to represent this component.

The templateUrl is the definition of the component HTML file where we will define the element for our app component and it will that HTML in place of the selector.

The StyleUrls is the definition of the CSS style files which will describe the look and feel of our components.

Here in below code we are defining and exporting our class and setting the title of the component.

export class AppComponent {
title = 'app works!';
}

Change the title in the component file from app works to Welcome to My First Angular App and test it the browser by opening the http://localhost:4200/



Check the demo at http://demo.nplix.com

4. Build your App for Production

By default angular run in the development environment and whatever changes you are doing in your code immediately show in the browser and its automatically compile the code.   So for publishing the app in production, we need to build the app for production. Use the below command for building the app.

ng build --prod

Above command will compile and build the whole app and store the all build files inside dist folder of project home.

5. Testing automation with KARMA

Testing is the important part when we are developing our application for production. So when we create any app using the angular CLI by default create the default setting and configuration. For testing our application with Karma we required specification files which are stored at the below-given location.

src/app/app.component.spec.ts

Above configuration file is for root component, we have to create the similar configuration file for each module and specifying the all testing details.

In this specification file by default angular CLI create the three testing specification which are as given below. Firs one is for creating the app so our application should be able create the app.

it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));

Below code is for testing the title of the application so that our application should contain "app works!" the app.

it(`should have as title 'app works!'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app works!!');
}));

Here is definition of the code which will check that application check that title should be inside a h1 tag and title should contain "app works!".

it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('app works!!');
}));

Using the below command we can start the automated testing of our app.

ng test

We we run this test it will show the error as given below because as per code we have write that title should "app works! " but as we have change the title earlier in our app.component.ts files it will show the error.



So for making the testing successful, we need to change the definition in the specification files accordingly, which are given below.

Modify the app.component.spec.ts

Below code is for testing the title of the application so that our application should contain "Welcome to My First Angular App!" the app.

it(`should have as title 'Welcome to My First Angular App!'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('Welcome to My First Angular App!');
}));

Here is definition of the code which will check that application check that title should be inside a h1 tag.

it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to My First Angular App!');
}));

Now run the ng test again you will get the output as given in below screen shots, where all testing scenario are tested successfully.



Visit the Demo application at http://demo.nplix.com