Search⌘ K
AI Features
Home
Courses
Angular: Designing and Architecting Web Applications

Creating a New Project

Explore the steps to create a new Angular project configured with routing and Bootstrap for styling. This lesson guides you through setting up the project structure to support modular application design.

We'll cover the following...

It’s time to learn about modules. Modules are a way to group a set of components that share a common purpose. They’re a great way to organize an application by feature. We’ll dive more into it throughout this section. First things first, let’s create a new project.

New project with routing

We’re going to be focusing on multiple topics for this project. It’s going to be larger than what we’ve done so far. We’re going to include routing.

If you’re running code locally, then you’ll need to run the following command:

ng new website --routing

During the setup process, the CLI will ask you about the default settings for the project. Typically, it will ask if you’d like to add routing. By adding the --routing option, it will skip this question and automatically install routing for you. As for the rest of the settings, you can go with the default.

Alternatively, you can just run the command without the --routing option. You can select to have routing installed during the setup. They both result in the same thing.

Installing Bootstrap

After installing the project, navigate to the newly created directory, and install Bootstrap. We’ll be using it to help us with styles. You can run the following command to install Bootstrap:

npm i bootstrap

We’ll need to update the styles.css file to import Bootstrap.

@import "bootstrap/dist/css/bootstrap.css"

We’re done! Here’s the codebase we’ll be using for this project:

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', async () => {
    await page.navigateTo();
    expect(await page.getTitleText()).toEqual('starter app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});