Install 'Allow-Control-Allow-Origin: *'-extension (We need to allow cross origin requests to be able to reach the chat server)
Dont forget to disable it after this tutorial!
Install angular cli:
$ npm install -g @angular/cli
Set ip address to the chat server in: environment.ts
Go to root folder:
$ cd simpleChatApp
Install dependencies:
$ npm i
Start serving the web app and open it in a tab:
$ ng serve --open
In this tutorial, were going to GET and POST messages to a simple chat server.
In the app/src/app-component.html there is a preconfigured router with a single welcome route.
Now lets create two new views, one for messages and one for settings. This can be done using the angular cli likeso:
$ ng generate component <name>
You can prepend a path to the name if you want to place your component in a specific folder.
Next:
- Find the router component and map your generated components to a route
- Create links to the routes in the root component.
Now lets create a service for handling messages to and from the chat server. The angular cli can provide us with a template for that, too:
$ ng generate service message --module=app
The module=app param creates a shared instance of the service and provides it to the angular injection system.
Next:
- Try to fetch messages from the chat server using the HttpClient
- Try to display each message using NgForOf directive
In the message view, create a message <input> and a <button> and try to trigger a POST to the api when the user clicks. There are multiple ways to bind and reference the value from the input field.
- Create a input field for settings username.
- Read up on Pipes and play around with them. Try to display the messages via an
asyncpipe in the template.