Announce Final Project
Create mock designs, implement frontend, and setup a backend to store data from your frontend.
Last updated
Create mock designs, implement frontend, and setup a backend to store data from your frontend.
Last updated
Create an Angular web app you can either make a movie search app or Stock Search.
For this part of the project we are focused on just the frontend of our application. You will need an api key from either api in order to access it, so you will have to sign up.
Important Notes:
Going forward we will be creating a front-end folder and a back-end folder inside of this new final-project folder.
We need to make sure that we are not creating a back-end folder inside of the front-end folder, rather we need to create a back-end folder inside of the final-project folder.
Additionally:
We will not be making new directory by running the following command:
$ mkdir <dir-name>
Instead after we make sure we are in the final-project folder and we run the following commands these folders will be created for us:
Creating front-end folder
$ ng new final-project-front
Creating a back-end folder
$ lb
*if you see:
phortonssf:~/workspace/final-project/final-project-front(master)
*then skip the below command. Else enter:
phortonssf:~/workspace/final-project/final-project-front $ git init
phortonssf:~/workspace/final-project/final-project-front $ git remote add origin <<your url>>
phortonssf:~/workspace/final-project/final-project-front $ git push -u origin master
Create a simple mock of what your app will look like using the following tool: https://www.adobe.com/products/xd.html
Create a component that will be the view for the main page of the app and setup your router.ts and place the <router-outlet> in the app.component.html
Create a service that will be used to make the http call to your select app api.
Then an <input> so the user can search. You will need to use ngModel and bind it to a value in the service created in step 3. This way our search will eventually be dynamic.
Now make the http call dynamic by using the variable in the service this 2 way bound to the input box. Console.log the data you get in the response.
Once you have data back from the server check what properties are available and think about what you want to display and use. For example movie title or the picture or stock closing price.
Use NgFor: Using structural directives such as *ngFor is critical in angular.
Retrieve data from an API: Making http calls is another common task needed to have a real functional app.
Install Project Clarity
Use Flex Box or Project Clarity Grid: Creating layouts is critical to any web application
Click Event: Executing function onclick events or button press is another must know task for any web application
NgModel: Allows us to accept user input and use it in our http call.
Components: Create components for your repeated code.
Service: must have a service that makes an http call and display data.
Your web application will have a search bar that takes in user input and allows them to search your chosen API for information. From there the user can add the results of the HTTP request to a favorites list. The favorites list should update in real time after the user clicks, add to favorites once the backend has successfully been integrated.
For those of you looking to further your skills
@Input: Pass data into components with input decorator
@Output: Emit data from our components using output decorator
Pipes: Create a custom angular pipe to filter user input data
Async Pipes: Use angular async to subscribe to an observable
