JavaScript代写:CS3047 Angular



Using Angular for the views, refactor your three separate html files, index.html, main.html, and profile.html, into a SPA. This means index.html will contain a div for the application to mount and a script tag for the JavaScript application bundle. For navigating between the three views you may use Angular Router but a more simple approach is to have a “location” state variable and then selectively display a Component based on the value. For example,

if (location == MAIN_PAGE) {
<Main .../>
} else if (location == PROFILE_PAGE) {
<Profile .../>
} else {
<Landing .../>

and “links” in your app will dispatch updates to the location state variable.

The file structure of your web app should have separate directories for each “section” of your application, see below for an example file structure. Remember to make your files small, ideally with only a single Component within, or at least a single concern.

As you being transforming your three pages into a Angular site, focus on the navigation of your site from page to page before implementing the details of each page. To help with the transition to pulling data from the future backend server, put your dummy data in json files that are loaded into your application. For example, suppose we create a fileinitialItems.jsonfor the initial todo items in the todo app:

"todoItems": [
{"id": 0, "text": "This is an item", "done": false},
{"id": 1, "text": "Another item", "done": false},
{"id": 2, "text": "A third item?", "done": true}

Then in our app.service.ts file we would load that data:

const initialItemsURL = http.get('./initialItems.json').then(response => response.json());

In this way we separate our concerns between business logic and data. You can grab sample articles fromhere.

Landing View Requirements

The “landing” view is the first view users will see when they navigate to your site. It should have the following

  • Registration fields to make a new account as described in the previous assignment. After validation (ala the previous assignment), the submit button navigates to the main view
  • Text fields for a previously registered user to enter their account name and password
  • A log in button. The button validates that there is text in the account name and password fields and then navigates to the main view. The validation is for presense of text nothing more.

Main View Requirements

The “main” view contains a collection of posts. These posts will be referred to as “articles.” For now we continue to use hard coded text and images for each article as we did in the previous assignment. Each post should have text or both an image and text.

In addition to a collection of posts displayed on the main view as the feed (which can be single or multi-column), there are the following requirements

  • Button or link to navigate to the profile page
  • Button or link to log out, which navigates to the landing page (index.html)
  • Each post has text, or text and an image (images do not change periodically, no pause/resume buttons)
  • There should be at least 8 posts, at least four have images.
  • Each post has a button to leave a comment. But the button currently does nothing.
  • Each post has a button to edit the article. But the button currently does nothing.
  • A search box, that filters the displayed articles by text or author, but not date or article id
  • There is an area for a user to add a new article, this can be an editable div, a textarea, or some other tag. But the area currently does nothing on user input.
  • There is a button to “post” the article which adds the article to the top of the displayed feed and clears the text area. The new article is not persistent.
  • There is a button to “cancel” writing the new article. This button should clear the new article text.
  • There is a button to upload an image (Hint: input type=’file’). But the button currently does nothing after a file is chosen.
  • The user’s display name and profile picture are shown. These can be hard coded.
  • The user’s status headline is shown. The status headline can be hard coded.
  • There is a button to update the user’s status headline. The button should update the status headline, but on refresh there is no persistence required, i.e., it can return to the original value.
  • Sidebar listing at least 3 followed users. The list should include a picture, name, and status headline for each user. These can all be hard coded.
  • Text field and button to add a user to the following list. For non-empty text, the follower is added to the sidebar with an arbitrary (i.e., hard coded) image and headline message
  • Each followed user has a button to unfollow which removes that user from the list

Profile View Requirements

The “profile” view is where a user can update their profile picture and account information.

  • The current display name, email address, phone number, date of birth, and zipcode are displayed
  • There are fields to update each user piece of user information along with a field to update the user’s password. Birth date can not be changed.
  • Show the user’s current profile picture
  • There is a button to upload a new profile picture. But the button currently does nothing after a file is chosen.
  • There is a button to update the user’s values based on user input. The button validates each of the fields that are changed and then updates the displayed value as in the previous assignment.
  • There is a button or link to navigate back to the main page