Awesome
Learning Angular 8
Just one of the things I'm learning. https://github.com/hchiam/learning
DesignCourse tutorial I'm following:
- https://www.youtube.com/watch?v=_TLhUCjY9iA
- or https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course
(Re)-run npm install -g @angular/cli
to make sure the ng
command is up to date.
Aside: You can run np help
to get a list of available commands for the Angular CLI tool.
Start up commands
node -v
npm -v
npm install -g @angular/cli
ng help
ng new myapp
# routing? y
# SCSS
cd myapp
ng serve -o
# automatically opens and hot-reloads http://localhost:4200
# Control+C
ng build --prod
Folder structure
myapp
e2e
node_modules
src
app <-- you'll spend most of your time here on components and routing
..app.component.ts <-- main heart component
assets
environments
..index.html <-- here be the entry point <app-root>, but usually not doing work here
..styles.scss <-- global styles go here
app.component.ts
@Component({...})
is the component decorator, which is set up to connect to the component tag (e.g. <app-root>
), the HTML file (e.g. app.component.html
), and the CSS file (e.g. app.component.scss
).
Routing
cd myapp
# ng generate component <component-name>, or just:
ng g c home
ng g c list
Keep <router-outlet></router-outlet>
in HTML inside myapp/src/app/app.component.html
.
Groups of files
ng g c <component-name>
generates 4 files:
.ts = brain
.html = structure
.scss = style
.spec.ts = test
Services
= special components that are reusable throughout your app
cd myapp
# ng generate service <service-name>
ng g s http
Aside CSS note
.container {
display: flex; /* automatically fills up a row */;
flex-wrap: wrap; /* to automatically create new rows */
/* to wrap columns instead, change flex-direction and make sure height is bounded: */
/* flex-direction: column; */
/* height: 100vh; */
}
Build for production (dist
folder)
cd myapp
ng build --prod
To run the production build on a local server, you can try:
cd myapp
# (stop any other running local server)
npm i -g lite-server
cd dist/myapp
lite-server