You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -277,54 +277,48 @@ You can exit out of the development server at any time by typing `Ctrl + C` into
277
277
278
278
The development server has a feature called *live reload*, which monitors your app for file changes, automatically re-compiles everything, and refreshes any open browser pages. This comes in really handy during development, so let's give that a try!
279
279
280
-
As text on the welcome page pointed out, the source code for the page is located in `app/templates/application.gjs`. Let's try to edit that file and replace it with our own content:
280
+
As text on the welcome page pointed out, the source code for the page is located in `app/templates/application.hbs`. Let's try to edit that file and replace it with our own content:
When you are done experimenting, go ahead and delete the `app/templates/application.gjs`file. We won't be needing this for a while, so let's start afresh. We can add it back later when we have a need for it.
301
+
When you are done experimenting, go ahead and delete the `app/templates/application.hbs`file. We won't be needing this for a while, so let's start afresh. We can add it back later when we have a need for it.
306
302
307
303
```run:command hidden=true cwd=super-rentals
308
-
git rm -f app/templates/application.gjs
304
+
git rm -f app/templates/application.hbs
309
305
```
310
306
311
307
Again, if you still have your browser tab open, your tab will automatically re-render a blank page as soon as you delete the file. This reflects the fact that we no longer have an application template in our app.
312
308
313
309
## Working withHTML, CSS and Assets in an Ember App
314
310
315
-
Create a `app/templates/index.gjs` file and paste the following markup.
311
+
Create a `app/templates/index.hbs` file and paste the following markup.
<p>We hope you find exactly what you're looking for in a place to stay.</p>
318
+
</div>
325
319
```
326
320
327
-
If you are thinking, "Hey, that looks like HTML!", then you would be right! In their simplest form, Ember templates are really just HTML wrapped in a `<template>`tag. If you are already familiar withHTML, you should feel right at home here.
321
+
If you are thinking, "Hey, that looks like HTML!", then you would be right! In their simplest form, Ember templates are really just HTML. If you are already familiar withHTML, you should feel right at home here.
328
322
329
323
Of course, unlike HTML, Ember templates can do a lot more than just displaying staticcontent. We will see that in action soon.
Before we do anything else, let's add some styling to our app. We spend enough time staring at the computer screen as it is, so we must protect our eyesight against unstyled markup!
Ember comes with strong *[conventions][TODO: link to conventions]* and sensible defaults—if we were starting from scratch, we wouldn't mind the default `/contact` URL. However, if the defaults don't work for us, it is no problem at all to customize Ember for our needs!
@@ -136,43 +132,30 @@ Since Ember offers great support for URLs out-of-the-box, we *could* just link o
136
132
137
133
With Ember, we can do better than that! Instead of the plain-old `<a>` tag, Ember provides an alternative called `<LinkTo>`. For example, here is how you would use it on the pages we just created:
There is quite a bit going on here, so let's break it down.
174
157
175
-
`<LinkTo>` is an example of a *[component](../../../components/introducing-components/)* in Ember. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface. Unlike regular HTML tags, components need to be imported before they can be used. In this case, `<LinkTo>` is imported from the `@ember/routing` package that is part of Ember.
158
+
`<LinkTo>` is an example of a *[component](../../../components/introducing-components/)* in Ember—you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface.
176
159
177
160
We have a lot more to say about components later, but for now, you can think of them as a way to provide *[custom tags][TODO: link to custom tags]* to supplement the built-in ones that came with the browser.
We will learn more about how all of this works soon. In the meantime, go ahead and click on the link in the browser. Did you notice how snappy that was?
It happens really quickly though—blink and you might miss it! In fact, I had to slow this animation down by a hundred times just so you can see it inaction. I told you the robot has really, really fast hands!
122
122
123
-
As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has *[passed][TODO: link to passed]*, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.gjs`, delete the `<LinkTo>` component and see what things look like when we have *[a failing test][TODO: link to a failing test]*.
123
+
As much as I enjoy watching this robot hard at work, the important thing here is that the test we wrote has *[passed][TODO: link to passed]*, meaning everything is working exactly as we expect and the test UI is all green and happy. If you want, you can go to `index.hbs`, delete the `<LinkTo>` component and see what things look like when we have *[a failing test][TODO: link to a failing test]*.
0 commit comments