Environment
Install node and npm first. Then install angular.
npm install -g @angular/cli
ng new my-first-app
cd my-first-app
ng serve
-g means global in your system.
ng new means creating a new project.
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 fold. 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.
随时随地看视频
