Generating our Angular project scaffold

In this section, we are going to learn how to set up a new project that follows Angular's development practices. Let's get started:

  1. Run the following commands to generate a new Angular project called integrate-angular:
      ng new integrate-angular
cd integrate-angular

The Angular CLI tool usually asks a series of questions to clarify what extra features you want to have in the resulting application.

  1. If you're asked about routing support, type Y and press Enter:
      Would you like to add Angular routing? (y/N)
Y
  1. Next, if the tool asks you about the stylesheet format, choose SCSS, as shown in the following code:
      Which stylesheet format would you like to use? (Use arrow keys)
SCSS
  1. The output of the preceding code is as follows:

Note how the Angular CLI generates a set of files for you. The tool provides you with various ignore rules for NPM and Git inside the .gitignore file, configuration files for Typescript and the Karma test runner, and even a set of unit and end-to-end tests as part of the initial scaffold.

  1. Check out what the package.json file looks like, especially its general information and the scripts section:
      {
"name": "integrate-angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
}

  1. The Angular CLI also performs dependency library installation, so all you need to do is run the following command to get your web application up and running:
      npm start

Historically, every web app that we generate with the help of the Angular CLI runs on port 4200 by default. You can quickly change the port in the future, but for now let's stick to the defaults.

  1. Launch your preferred browser and navigate to http://locahost:4200. You should see a landing page called Welcome to integrate-angular! that the Angular CLI has created for you:

Now, let's configure the Electron shell so that it works with Angular code.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset