https://github.com/hchiam/learning-angular8
Learning Angular 8: https://www.youtube.com/watch?v=_TLhUCjY9iA
https://github.com/hchiam/learning-angular8
angular angular8 angularcli scss ts typescript
Last synced: 7 months ago
JSON representation
Learning Angular 8: https://www.youtube.com/watch?v=_TLhUCjY9iA
- Host: GitHub
- URL: https://github.com/hchiam/learning-angular8
- Owner: hchiam
- Created: 2020-03-04T23:02:11.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-05-05T21:10:16.000Z (over 4 years ago)
- Last Synced: 2025-06-09T09:04:05.713Z (7 months ago)
- Topics: angular, angular8, angularcli, scss, ts, typescript
- Language: TypeScript
- Size: 1.23 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Learning Angular 8
Just one of the things I'm learning.
DesignCourse tutorial I'm following:
-
- or
(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
```bash
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
```
```bash
# Control+C
ng build --prod
```
## Folder structure
```text
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 , 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. ``), the HTML file (e.g. `app.component.html`), and the CSS file (e.g. `app.component.scss`).
## Routing
```bash
cd myapp
# ng generate component , or just:
ng g c home
ng g c list
```
Keep `` in HTML inside `myapp/src/app/app.component.html`.
## Groups of files
`ng g c ` generates 4 files:
```text
.ts = brain
.html = structure
.scss = style
.spec.ts = test
```
## Services
= special components that are reusable throughout your app
```bash
cd myapp
# ng generate service
ng g s http
```
## Aside CSS note
```css
.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)
```bash
cd myapp
ng build --prod
```
To run the production build on a local server, you can try:
```bash
cd myapp
# (stop any other running local server)
npm i -g lite-server
cd dist/myapp
lite-server
```