Project Setup – Angular7 (Create first app)

by · Published · Updated

Now the next step is to start your first angular project. Jump into the folder where you want to keep your projects, and follow the commands to install a new Angular 7 project :

C:\> ng new my-test-app

It’s going to present you with a couple questions before beginning:

Would you like to add Angular routing? Yes

Which stylesheet format would you like to use? SCSS [ http://sass-lang.com ]

It will take some minutes and once completed, you can now jump into the new project folder by typing:

c:\ cd my-test-app

Open up this project in your preferred code editor (I use Visual Studio Code, and you can launch it automatically by typing code . in the current folder), and then run this command to run a development server using the Angular CLI:

ng serve -o

-o is for open, this flag will open your default browser at http://localhost:4200. Tip: You can type ng to get a list of all available commands, and ng [command] –help to discover all their flags.

If it does not get opened by default. Go to your web page after the compiling process is completed. Type the URL Http://localhost:4200/my-test-app and your first page of the Angular gets opened.

Below will be seen on your web browser screen

Hurray! If everything goes well, you should be presented with the standard landing page template for your new Angular 7 project.

Now, we can use any IDE (editor) to edit and run our code. In this tutorial, we are using Visual Studio. Open the IDE and open your app “my-test-app” in it. It looks like below :

Now expand the “my-test-app” folder and

You will see 6 components in “app” folder there:

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts
  • app-routing.module.ts

Now we will go through all the components to look and understand what is going on each one of them.

app.component.css

Here is no code in this file now. As, we have not added any code in this file yet.

This part is empty because we don’t specify any CSS here.

app.component.html

This is the most important component, the front page of your app. Here, you can change the salutation used before your app’s name. You can also change the content on the front page and their respective links.

This is the home page of your site, this is also called front page. Here, you can change the content, links of you page.

Code:

<!–The content below is only a placeholder and can be replaced.–>
<div style=”text-align:center”>
<h1>
Welcome to landing page {{ title }}!
</h1>
<imgwidth=”300″alt=”Angular Logo”src=”data:image/svg+xml;”>
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><atarget=”_blank”rel=”noopener”href=”https://angular.io/tutorial”>Tour of Heroes</a></h2>
</li>
<li>
<h2><atarget=”_blank”rel=”noopener”href=”https://angular.io/cli”>CLI Documentation</a></h2>
</li>
<li>
<h2><atarget=”_blank”rel=”noopener”href=”https://blog.angular.io/”>Angular blog</a></h2>
</li>
</ul>
<router-outlet></router-outlet>

app.component.spec.ts:

This file is used for testing purpose only.

import { TestBed, async } from ‘@angular/core/testing’;
import { RouterTestingModule } from ‘@angular/router/testing’;
import { AppComponent } from ‘./app.component’;
describe(‘AppComponent’, () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it(‘should create the app’, () => {
constfixture=TestBed.createComponent(AppComponent);
constapp=fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title ‘my-test-app’`, () => {
constfixture=TestBed.createComponent(AppComponent);
constapp=fixture.debugElement.componentInstance;
expect(app.title).toEqual(‘my-test-app’);
});
it(‘should render title in a h1 tag’, () => {
constfixture=TestBed.createComponent(AppComponent);
fixture.detectChanges();
constcompiled=fixture.debugElement.nativeElement;
expect(compiled.querySelector(‘h1’).textContent).toContain(‘Welcome to my-test-app!’);
});
});

app.component.ts

You can change the name of your app here. You just have to change the title.

import { Component } from ‘@angular/core’;
@Component({
selector:’app-root’,
templateUrl:’./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title=’my-test-app’;
}

app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

 

 

 

You may also like...