WWU Hackathon May 6 & 7

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.

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>

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

Hackathon Problem

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

Sample App Review

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

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

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

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

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