1. WWU Hackathon
May 6 & 7

2. Angular CLI
The CLI is a tool used to initialize, develop, scaffold, and maintain Angular applications
The scaffolding provides easy to use commands to easily create and build applications
ng new
Creates an application that runs out-of-the box
ng generate or ng g
Enables the creation of components, services, classes, and pipes with their respective test modules
ng serve
Provides a simple web server used to test your app during the development phase
Other commands
Provides mechanisms to enable testing, deployment, etc.

3. Using Angular CLI Create a new application Run the new application
ng new <app name>
Run the new application
ng serve
Add components to the application
ng g component <component name>
Add services to the application
ng g service <service name>
Add classes to the application
ng g class <class name>

4. Example Sample commands ng new social-app ng g component welcome
social-app (Module and Bootstrap)
Example 1
AppComponent (Component)
Sample commands
ng new social-app
ng g component welcome
ng g component topics
cd topics
ng g component topic-entry
cd ..
ng g service social-api
ng g class app-route 4
welcome (Component)
topics (Component)
topic-entry (Component)
social-api (service) 3 2
app-route (router)
Execution flow and component relationships

5. Hackathon Problem

6. Social Media
Build a social media web app that allows users to post topics and other users can comment on the posts.  Facebook is as an example
Priorities
Scenario
Points
View all topics for a user 40
View all comments for a topic 1
Write/Post a topic 30
Write a comment for a post 2
Reply to comment by writing a new comment 20
Like a comment or a post
Associate URLs to posts at creation time
Change URLs associated with comments 3
Login using account 10
Create account

7. Sample App
Review

8. Returns or Sends a JSON Payload matching the interfaces
Big Picture
Directives
(*ngFor and *ngIf)
Web Services
HTML Views
Pipes (format data)
Module
Data Binding
Event Binding
Component
(template and model)
Component
Component
Component
Services
(Use HTTP Client)
REST API
endpoints
Page Routing
Returns a JS Object
Returns or Sends a JSON Payload matching the interfaces

9. ng new social-app Directives (*ngFor and *ngIf) Web Services
HTML Views
Pipes (format data)
Module
(new)
Data Binding
Event Binding
Component
(template and model)
Component
Component
Component
Services
(Use HTTP Client)
REST API
endpoints
Page Routing
Returns a JS Object

10. ng g component new-component
Directives
(*ngFor and *ngIf)
Web Services
HTML Views
Pipes (format data)
Module
(updates)
Data Binding
Event Binding
Component
(template and model)
Component
Component
Component
Services
(Use HTTP Client)
REST API
endpoints
Page Routing
Returns a JS Object

11. ng g service social-api
Directives
(*ngFor and *ngIf)
Web Services
HTML Views
Pipes (format data)
Module
(updates)
Data Binding
Event Binding
Component
(template and model)
Component
Component
Component
Services
(Use HTTP Client)
REST API
endpoints
Page Routing
Returns a JS Object
Returns or Sends a JSON Payload matching the interfaces

12. ng g class app-route Directives (*ngFor and *ngIf) Web Services
HTML Views
Pipes (format data)
Module
(updates)
Data Binding
Event Binding
Component
(template and model)
Component
Component
Component
Services
(Use HTTP Client)
REST API
endpoints
Page Routing
Returns a JS Object