Skip to content

Commit b9fcecc

Browse files
DmitrySharabinDmitrySharabin
authored
fix(tutorial): Angular Tutorial (#102)
* chore: fix tab title * chore: add missed import statement * chore: fix path to assets According to the folder structure stated in the Folder structure section, the assets folder is in the app folder, not in the src one. * chore: app.scss --> app.css Since the app template provides app.css but not app.scss, we need to provide the styles in the correct format.
1 parent d141e7f commit b9fcecc

1 file changed

Lines changed: 36 additions & 41 deletions

File tree

‎tutorial/angular.md‎

Lines changed: 36 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ export class FlickService {
223223
id: 1,
224224
genre: 'Musical',
225225
title: 'Book of Mormon',
226-
image: '~/assets/bookofmormon.png',
226+
image: '~/app/assets/bookofmormon.png',
227227
url: 'https://nativescript.org/images/ngconf/book-of-mormon.mov',
228228
description: `A satirical examination of the beliefs and practices of The Church of Jesus Christ of Latter-day Saints.`,
229229
details: [
@@ -237,13 +237,11 @@ export class FlickService {
237237
},
238238
{
239239
title: 'Revenue',
240-
body:
241-
'Grossed over $500 million, making it one of the most successful musicals of all time.'
240+
body: 'Grossed over $500 million, making it one of the most successful musicals of all time.'
242241
},
243242
{
244243
title: 'History',
245-
body:
246-
'The Book of Mormon was conceived by Trey Parker, Matt Stone, and Robert Lopez. Parker and Stone grew up in Colorado and were familiar with The Church of Jesus Christ of Latter-day Saints and its members. They became friends at the University of Colorado Boulder and collaborated on a musical film, Cannibal! The Musical (1993), their first experience with movie musicals. In 1997, they created the TV series South Park for Comedy Central and in 1999, the musical film South Park: Bigger, Longer & Uncut. The two had first thought of a fictionalized Joseph Smith, religious leader and founder of the Latter Day Saint movement while working on an aborted Fox series about historical characters. Their 1997 film, Orgazmo, and a 2003 episode of South Park, "All About Mormons", both gave comic treatment to Mormonism. Smith was also included as one of South Park\'s "Super Best Friends", a Justice League parody team of religious figures like Jesus and Buddha.'
244+
body: 'The Book of Mormon was conceived by Trey Parker, Matt Stone, and Robert Lopez. Parker and Stone grew up in Colorado and were familiar with The Church of Jesus Christ of Latter-day Saints and its members. They became friends at the University of Colorado Boulder and collaborated on a musical film, Cannibal! The Musical (1993), their first experience with movie musicals. In 1997, they created the TV series South Park for Comedy Central and in 1999, the musical film South Park: Bigger, Longer & Uncut. The two had first thought of a fictionalized Joseph Smith, religious leader and founder of the Latter Day Saint movement while working on an aborted Fox series about historical characters. Their 1997 film, Orgazmo, and a 2003 episode of South Park, "All About Mormons", both gave comic treatment to Mormonism. Smith was also included as one of South Park\'s "Super Best Friends", a Justice League parody team of religious figures like Jesus and Buddha.'
247245
},
248246
{
249247
title: 'Development',
@@ -255,7 +253,7 @@ export class FlickService {
255253
id: 2,
256254
genre: 'Musical',
257255
title: 'Beetlejuice',
258-
image: '~/assets/beetlejuicemusical.png',
256+
image: '~/app/assets/beetlejuicemusical.png',
259257
url: 'https://nativescript.org/images/ngconf/beetlejuice.mov',
260258
description: `A deceased couple looks for help from a devious bio-exorcist to handle their haunted house.`,
261259
details: [
@@ -285,7 +283,7 @@ export class FlickService {
285283
id: 3,
286284
genre: 'Musical',
287285
title: 'Anastasia',
288-
image: '~/assets/anastasia.png',
286+
image: '~/app/assets/anastasia.png',
289287
url: 'https://nativescript.org/images/ngconf/anastasia.mov',
290288
description: `The legend of Grand Duchess Anastasia Nikolaevna of Russia.`,
291289
details: [
@@ -319,7 +317,7 @@ export class FlickService {
319317
}
320318
```
321319

322-
Add a `/src/assets/` directory to your project, and copy the 3 static images over from the sample project [here](https://github.com/NativeScript/tutorials/tree/main/angular-tutorial/src/assets).
320+
Add a `/src/app/assets/` directory to your project, and copy the 3 static images over from the sample project [here](https://github.com/NativeScript/tutorials/tree/main/angular-tutorial/src/assets).
323321

324322
:::tip Note
325323
You can create barrel exports for your models and services to give you more flexibility in organizing your files and folders. To do this, create an `index.ts` in your `services` and `models` directory and export `flick.service.ts` and `flick.model.ts` respectively. You can also add another `index.ts` in your `core` folder and export your `services` and `models` directory.
@@ -384,41 +382,37 @@ Next, open your `home.component.html` and add the `ListView` component:
384382

385383
### Create flick cards
386384

387-
Before we dive into creating the card below, let's create some classes for our background and text colors that we will be using in the application. As this will be shared throughout the application, let's add this to the `app.scss`. Open `app.scss` and add the following:
385+
Before we dive into creating the card below, let's create some classes for our background and text colors that we will be using in the application. As this will be shared throughout the application, let's add this to the `app.css`. Open `app.css` and add the following:
388386

389-
```scss
390-
// src/app.scss
387+
```css
388+
/* src/app.css */
391389

392-
// applied when device is in light mode
393-
.ns-light {
394-
.bg-primary {
395-
background-color: #fdfdfd;
396-
}
397-
.bg-secondary {
398-
background-color: #ffffff;
399-
}
400-
.text-primary {
401-
color: #444;
402-
}
403-
.text-secondary {
404-
color: #777;
405-
}
390+
/* applied when device is in light mode */
391+
.ns-light .bg-primary {
392+
background-color: #fdfdfd;
393+
}
394+
.ns-light .bg-secondary {
395+
background-color: #ffffff;
396+
}
397+
.ns-light .text-primary {
398+
color: #444;
399+
}
400+
.ns-light .text-secondary {
401+
color: #777;
406402
}
407403

408-
// applied when device is in dark mode
409-
.ns-dark {
410-
.bg-primary {
411-
background-color: #212121;
412-
}
413-
.bg-secondary {
414-
background-color: #383838;
415-
}
416-
.text-primary {
417-
color: #eee;
418-
}
419-
.text-secondary {
420-
color: #ccc;
421-
}
404+
/* applied when device is in dark mode */
405+
.ns-dark .bg-primary {
406+
background-color: #212121;
407+
}
408+
.ns-dark .bg-secondary {
409+
background-color: #383838;
410+
}
411+
.ns-dark .text-primary {
412+
color: #eee;
413+
}
414+
.ns-dark .text-secondary {
415+
color: #ccc;
422416
}
423417
```
424418

@@ -482,7 +476,7 @@ Let's start with creating the files for our details feature with the following c
482476
<!-- src/app/features/details/details.component.html -->
483477
```
484478

485-
<!-- tab:home.component.ts -->
479+
<!-- tab:details.component.ts -->
486480

487481
```typescript
488482
// src/app/features/details/details.component.ts
@@ -575,13 +569,14 @@ export class AppRoutingModule {}
575569

576570
Now that we have the routes already set up, we can use NativeScript Angular's `RouterExtensions` to perform the navigation. The `RouterExtensions` class provides methods for imperative navigation, similar to how you would navigate with the Angular `Router` and `Location` classes. To use the class simply inject it in your component constructor and call it's `navigate` function. Open `home.component.ts` and add the following:
577571

578-
```typescript{7,21,25-27}
572+
```typescript{7-8,22,26-28}
579573
// src/app/features/home/home.component.ts
580574
581575
import { Component } from '@angular/core'
582576
import { FlickService } from '~/app/core'
583577
584578
// Add this 👇
579+
import { ItemEventData } from '@nativescript/core'
585580
import { RouterExtensions } from '@nativescript/angular'
586581
587582
@Component({

0 commit comments

Comments
 (0)