Creating an App

You'll learn how to create an Angular app with a few commands, run the server, and turn it off.

We'll cover the following

We’re going to start things off by scaffolding a new project. You’ll learn how to start a project both locally and on Educative.

Scaffolding a new project locally

We installed the CLI in the previous lesson. We’re going to use it to create a new project. In the terminal, we’ll need to run the ng new command.

ng new reverse-phrase

After inputting the command, we’ll need to provide a name for the project. The first project we’ll create will reverse a string based on an input. Hence, the reason we’re calling it the reverse phrase.

The CLI will ask us a couple of questions about the project we’d like to generate. These are just options to customize the project further. Generally, we’ll be asked if we’d like to turn on routing. Routing is a topic we’ll cover in the future, but we don’t need it right now. Select No.

Then, it will ask us to select a CSS tool. Plain CSS will work.

Just hit enter for everything. We’ll be using the default settings. We won’t be doing anything super complex, so the default settings will work just fine.

After running the command, the CLI will start downloading the starter files and install its dependencies.

Starting/stopping the server

Angular will provide us with a development server to locally preview the app in the browser. It will even watch the files for changes and refresh the application for us. The best part is that we don’t need to configure the server. It works out of the box. This lets us focus on developing the application.

There are two commands to start the server: npm start and ng serve. You will find that most tutorials will use either one. However, they’re 100% identical. There aren’t any differences between the two. Behind the scenes, the npm start command will run the ng serve command. Feel free to use either one. In the terminal, run the following command:

ng serve

Angular will begin to compile your project. It will then watch your files for changes. Anytime you make a change, Angular will recompile the project. You should be provided with a link to view your project in the browser.

By default, you can view the project over at http://localhost:4200 or http://127.0.0.1:4200

Here’s an example of what you may see:

You may see something different depending on when you’re taking this course. The default start page usually changes in future versions. Regardless, you should be able to view the application in the browser if everything worked.

The server can be stopped by pressing CTRL + C on your keyboard.

Educative example

Throughout this course, you’ll come across Educative’s widget for running code. You’ll be able to modify the files in the widget freely. In fact, I encourage you to do so to help you better understand Angular.

You can run the example by pressing the Run button. This will generate a preview of the output and logs in the terminal. There’s even a link if you’d like to see the fully functional app in a separate tab. Keep in mind that the link will not work unless you press the Run button first.

The following example is scaffolded when you run the ng new command.

Note: The widget will not have the node_modules directory. The project’s dependencies are installed behind the scenes. Don’t sweat about it; we won’t need to preview any of the files in this directory.

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));
  });
});