Skip to content

Image instructions for tutorials #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 21, 2022
Merged

Image instructions for tutorials #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
779e23d
fix: adds instructions on including image assets to angular tutorial
winescout Feb 6, 2022
31fc27c
fix: adds image instructions to tutorials
winescout Feb 6, 2022
c341ba4
chore: cleanup
rigor789 Feb 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions tutorial/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ Based on the Angular starter app, we will be creating the following file/folder

```
src/app
|- assets
|- anastasia.png
|- beetlejuicemusical.png
|- bookofmormon.png
|- core
|- models
|- flick.model.ts
Expand Down Expand Up @@ -315,6 +319,8 @@ export class FlickService {
}
```

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).

:::tip Note
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.
:::
Expand Down
6 changes: 6 additions & 0 deletions tutorial/plain.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ Based on the Typescript starter app, we will be creating the following file/fold

```
app
|- assets
|- anastasia.png
|- beetlejuicemusical.png
|- bookofmormon.png
|- home
|- home-page.ts
|- home-page.xml
Expand Down Expand Up @@ -263,6 +267,8 @@ export class FlickService {
}
```

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/plain-tutorial/app/assets).

Next, let's break down the layout and UI elements of the home page.

![Home page layout breakdown](/assets/images/tutorial/tutorial-example-app-master-breakdown.png)
Expand Down
6 changes: 6 additions & 0 deletions tutorial/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ Based on the Typescript starter app, we will be creating the following file/fold

```
src
|- assets
|- anastasia.png
|- beetlejuicemusical.png
|- bookofmormon.png
|- components
|- HomeScreen.tsx
|- DetailsScreen.tsx
Expand Down Expand Up @@ -266,6 +270,8 @@ class _FlickService {
export const FlickService = new _FlickService()
```

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/react-tutorial/src/assets).

Next, let's break down the layout and UI elements of the home page.

![Home page layout breakdown](/assets/images/tutorial/tutorial-example-app-master-breakdown.png)
Expand Down
6 changes: 6 additions & 0 deletions tutorial/svelte.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ Based on the Typescript starter app, we will be creating the following file/fold

```
app
|- assets
|- anastasia.png
|- beetlejuicemusical.png
|- bookofmormon.png
|- pages
|- Home.svelte
|- Details.svelte
Expand Down Expand Up @@ -239,6 +243,8 @@ export class FlickService {
}
```

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/svelte-tutorial/app/assets).

Next, let's break down the layout and UI elements of the home page.

![Home page layout breakdown](/assets/images/tutorial/tutorial-example-app-master-breakdown.png)
Expand Down
6 changes: 6 additions & 0 deletions tutorial/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ Based on the Vue starter app, we will be creating the following file/folder stru

```
app
|- assets
|- anastasia.png
|- beetlejuicemusical.png
|- bookofmormon.png
|- components
|- Home.vue
|- Details.vue
Expand Down Expand Up @@ -244,6 +248,8 @@ export default class FlickService {
}
```

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/vue-tutorial/app/assets).

Next, let's break down the layout and UI elements of the home page.

![Home page layout breakdown](/assets/images/tutorial/tutorial-example-app-master-breakdown.png)
Expand Down