Learn Angular 8 Step By Step in 10 Days – Day 1

The above table shows some basic syntax related to the variable declaration or function declaration. In spite of that, we can also create any class and its related functionalities or objects in Typescript.

Create a New Project using Angular CLI

If we want to create a new project on Angular 8, we can use the Angular CLI Commands for that. So, to create a new project using Angular CLI we need to perform the below steps.

1. Open the Command Prompt and create a folder
2. Now run the command - ng new AngularDemo
3. Now, Put “N” for Would you like to Add Angular Routing options (Since it needs to be Y when we want to use Routing in our applications).
4. Choose stylesheet style as CSS and then press enter
   

Now, Angular CLI will create the required files for running the Angular Projects along with related packages which will be downloaded in the node_modules folder.

About Project folder structure

During the Angular Project creation, Angular CLI creates a new folder as per the project name i.e. Angular8Demo. So, now open that project in any code editor like Visual Studio Code or Microsoft Visual Studio. The said project folder contains the below folder structure.

The created project contains the following folders.

1. e2e: This folder is for an end to end-testing purposes. It contains the configuration files related to performing the unit test of the projects.
2. node_modules: This folder contains the downloaded packages as per the configuration.
3. src: This folder contains the actual source code. It contains 3 subfolders as.
   • an app: The app folder contains the Angular project-related files like components, HTML files, etc.
   • assets: The assets folder contains any static files like images, stylesheets, custom javascript library files (if any are required), etc.
   • environments: The environments folder contains the environment-related files that are required during the deployment or build of the projects.

About Different Config Files

When we create any Angular-based project using Angular CLI, then every time it will create 3 different configuration files that help us to configure the projects along with their related dependencies. These configuration files are.

tsconfig.json: If tsconfig.json files exist within the project root folder, that means that the project is a basically TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project. Sample of tsconfig.json as below.

{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

package.json:package.json is basically a JSON file that contains all information related to the required packages for the project. Also, with the help of these configuration files, we can maintain the Project Name and its related version by using the “name” and “version” properties. Also, we can provide the build definition of the project using this file.

{
  "name": "angular8-demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.2",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

angular.json: angular.json file is an Angular Application Environment-based JSON file that contains all the information related to the project build and deployment. It tells the system which files need to change when we use the ng build or ng serve command.

main.ts: The main.ts file acts as the main entry point of our Angular application. This file is responsible for the bootstrapper operation of our Angular modules. It contains some important statements related to the modules and some initial setup configurations like.

• enableProdMode: This option is used to disable Angular’s development mode and enable Productions mode. Disabling Development mode turns off assertions and other model-related checks within the framework.
• platformBrowserDynamic: This option is required to bootstrap the Angular app in the browser.
• AppModule: This option indicates which module acts as a root module in the applications.
• environment: This option stores the values of the different environment constants.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

@ngModule Metadata

In every Angular application, at least one Angular module file is required. An Angular application may contain more than one Angular module. Angular modules is a process or system to assemble multiple angular elements, like components, directives, pipes, services, etc. so that these Angular elements can be combined in such a way that all elements can be related to each other and ultimately create an application.

In Angular, the @NgModule decorator is used to define the Angular module class. Sometimes, this class is called a NgModule class. @NgModule always takes a metadata object, which tells Angular how to compile and launch the application in the browser. So, to define the Angular module, we need to define some steps as follows.

1. First, we need to import Angular BrowserModule into the Angular module file at the beginning. This BrowserModule class is responsible for running the application in the browser.
2. In the next step, we need to declare the Angular elements like components within the Angular module so that those components or elements can be associated with the Angular module.

In the last step, we need to mention one Angular component as a root component for the Angular module. This component is always known as a bootstrap component. So, one Angular module can contain hundreds of components. But out of those components, one component needs to be a root or bootstrap component that will be executed first when the Angular module is bootstrapped in the browser.

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

Demo 1. First Program

So, when we create an Angular Project using Angular CLI, it creates new projects along with a module and a default component file. These files normally exist within the app folder. So, first, simply run the Angular Project using the ng serve command and the below output will be visible in the browser.

Now, we make some changes in the app.component.ts file and app.component.html file as below.

Code of app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Welcome to Angular 8 Learning Series...';
}

Code of app.component.html

<!-- The content below is only a placeholder and can be replaced. -->
<p style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEy

Now, refresh the browser to update the output.

Conclusion

In this article, we discuss how to create an Angular application using Angular CLI along with the basic concept of Angular 8. Also, we discussed the different folders and files that are created automatically by the Angular CLI. Now, in the next article, we will discuss the main building block of Angular framework i.e. components. I hope this article will help you. Any feedback or query related to this article is most welcome.

Next Article: Learn Angular 8 Step By Step in 10 Days: Components (Day 2)