Categories: AngularJS

Project Setup – Angular7 (Create first app)

Project Setup – Angular7 (Create first app)

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 { }

 

 

 

6 years ago
jyoti rani

Related Post

Recent Posts

Modern Toys, Magical Moments: Why the Best Toy Shop in Noida Is More Than Just a Store

When it comes to children, there’s one universal truth: the right toy can spark imagination, build skills, and make memories…

5 months ago

Rediscovering Joy: A New Era of Creativity & Comfort in Toy Stores

In today’s digital age, where screens and gadgets dominate our children’s lives, there’s something heartwarming about a well-loved plush toy…

5 months ago

Unboxing Imagination: Discovering the Joy of Play at a Toy Store in Noida

In a world dominated by screens and fast-paced routines, it’s easy to forget the simple magic of a toy in…

5 months ago

Imagination Unboxed: Discover Joy at the Toy Shop in Delhi

In the heart of Delhi’s vibrant streets lies a world where imagination meets innovation — the magical universe of toys.…

5 months ago

Play with Purpose: Discovering the Ultimate Toy Store in Noida

When was the last time a toy truly amazed you—not just as a product, but as a thoughtful tool for…

5 months ago

From Tears to Toys: Exploring Modern Childhood through Delhi’s Favorite Toy Shop

In the digital age, the way we experience childhood has changed, but the essence remains the same—imagination, exploration, and joy.…

5 months ago