Angular April
Day 1 >>
Setting Up Your Workspace
Goals:
Set up your dev tools
Create 4 new Angular projects
Add Bootstrap or Material Design to the projects
Customize your projects with default page templates
VIDEO
Notes:
On Cloud 9:
use a blank project
update Node.js (nvm install 6.9.1, nvm alias default 6.9.1)
install Angular (npm install -g angular-cli)
create project by typing "ng new project1" on the command line (replace project1 with any name you like)
open package.json file and find line for "start", change it to "start": --host 0.0.0.0 --port 8080 --live-reload-port 8081
test install by changing to the project directory and typing "npm start" on the command line and opening the preview window
Change title in src/index.html
Change project name in arc/app/app.component.ts (the line that starts "title=")
(optional styling)
Add the CDN link for Bootstrap (or any other css framework you like) to the <head> section of src/index.html
Add Material Design library with
command line (npm install --save @angular/material hammerjs, npm install --save-dev @types/hammerjs)
in tsconfig.js add "types": ["hammerjs"]
in app.module.ts add:
in main styles.css file add "@import '~@angular/material/core/theming/prebuilt/pink-bluegrey.css';" (current prebuilt themes also include: indigo-pink, purple-green, or deeppurple-amber)
in main index.html add <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Resources:
More Help
Share your project, ask questions, or help someone else on the Angular April - Facebook group page .
If you have a comment or suggestion for "Angular April" then send and email to: KarenFreemanSmith@gmail.com