Angular (1) -- Package Structure

Day 9:

Environment

Install node and npm first.

https://nodejs.org/en/

Install/update npm:

npm install -g npm

check npm version:

npm -v

Install Angular Cli: (-g means global in your system.)

npm install -g @angular/cli

Check Angular version:

ng version

Create a new Angular project:

ng new my-first-app
cd my-first-app
ng serve

ng serve means starting the application in port 4200.

Editing the app

The package structure

package.json has all the dependencies we need in this project. e2e is end-to-end testing. node_modules is the package that the dependencies installed in. In the src->app folder, app.component.html is the html file that displayed in the browser.

The entrance of the program is always index.html in the root folder. Inside it, there is a tag called app-root, which will be replaced by the angular project.

In the app.component.ts file, there is an annotation @Component which includes a selector, app-root. I think this will replace the original index.html file with the template file app.component.html. We defined the title in this class, so we can use it in the template html file.

Modify the files

We can modify the app.component.html file as we like. Add an input, and use a directive [(ngModel)]="name" to bind this input with the name that we defined in our component class. Additionally, we need to import the module that is needed for a input, which is the form module.

In the app.modules.ts file:

import { FormsModule } from '@angular/forms';

Then add the FormsModule in the imports array:

imports: [
    BrowserModule,
    FormsModule
]

Installing bootstrap locally in this project

npm install --save bootstrap@3

This command will download bootstrap and save it inside the node_modules folder.

To make angular aware of this, we have to also modify the angular.json file. There is already a style configuration in this file

"styles": [
  "src/styles.css"
],

This points to the css file in the root, which is used globally. We need to add the bootstrap above it.

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],

• To make this change take effect, run ng serve to restart the server. *