Setup¶

In order to add dynamic data to our application, we first need to create a new instance of the application. To do that, first create a new directory week09

$ mkdir ``week09``

Then in that directory install ember, initialise the application, and add all dependencies:

$ yarn add ember-cli
$ yarn ember init
$ yarn add sass bootstrap ember-cli-sass
$ yarn ember install ember-truth-helpers

Now start the ember application to test that all these steps were successful.

The next step is to copy over the code from the previous week. To do that, copy the week08/app directory into the week09 directory:

$ cp week08/app week09

The final step is to update the app/index.html file so that it loads the files built for the week09 project, by replacing all uses of “08” with “09” in the app/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Week09</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"/>

    {{content-for "head"}}

    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css"/>
    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/week09.css"/>

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}

    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/week09.js"></script>

    {{content-for "body-footer"}}
  </body>
</html>

Restart the ember server and test that the application still works before moving on to this week’s changes.