-
Notifications
You must be signed in to change notification settings - Fork 3.2k
docs(v6): Update v6 StackBlitz set up and examples for JavaScript and Angular #4213
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.
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
Open
soundproofboot
wants to merge
53
commits into
ionic-team:main
Choose a base branch
from
soundproofboot:updateV6Stackblitz
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
53 commits
Select commit
Hold shift + click to select a range
56e257c
docs(v6): update v6 stackblitz setup for Angular and JS
soundproofboot c625d4d
docs(v6): update Angular examples for accordion
soundproofboot b595e1e
docs(v6): update Angular examples for action-sheet
soundproofboot 1170b47
docs(v6): update Angular examples for alert
soundproofboot fbbde06
docs(v6): update Angular examples for breadcrumbs
soundproofboot 40e55c0
docs(v6): update Angular examples for content
soundproofboot 9c37e15
docs(v6): update Angular examples for datetime
soundproofboot edf261f
docs(v6): update Angular examples for picker
soundproofboot e54bffb
docs(v6): update Angular examples for infinite-scroll
soundproofboot a27f649
docs(v6): update Angular example for icon
soundproofboot f6bbe3e
docs(v6): update Angular example for input
soundproofboot 067d6aa
docs(v6): update Angular example for item
soundproofboot 09130ff
docs(v6): update Angular examples for item
soundproofboot 9af634d
docs(v6): update Angular example for menu
soundproofboot 710cf89
docs(v6): update Angular examples for modal
soundproofboot 89b3478
docs(v6): update Angular example for nav
soundproofboot b105668
docs(v6): update Angular examples for popover
soundproofboot b367f11
docs(v6): update Angular examples for loading
soundproofboot 45666ff
docs(v6): update Angular examples for progress-bar
soundproofboot 107b465
docs(v6): update Angular example for skeleton-text
soundproofboot 47ef967
docs(v6): update Angular examples for range
soundproofboot dc66afa
docs(v6): update Angular examples for refresher
soundproofboot 7eea39b
docs(v6): update Angular examples for reorder
soundproofboot 1d609aa
docs(v6): update Angular examples for searchbar
soundproofboot 143d9ef
docs(v6): update Angular examples for segment
soundproofboot 34fcc9b
docs(v6): update Angular examples for segment-button
soundproofboot 0501513
docs(v6): update Angular example for segment-button
soundproofboot 626a46f
docs(v6): update Angular examples for select
soundproofboot d243ff3
docs(v6): update Angular example for router
soundproofboot 2ee2ea9
docs(v6): update Angular examples for toast
soundproofboot 5934210
docs(v6): update Angular examples for toolbar
soundproofboot 28795fb
docs(v6): update Angular example for buttons
soundproofboot b9b4fd0
docs(v6): update Angular examples for back-button
soundproofboot f48db54
docs(v6): update Angular example for text
soundproofboot 50c1e6f
docs(v6): revert changes required to build v6 docs locally
soundproofboot d49391b
docs(v6): run linter
soundproofboot 362e902
docs(v6): update JavaScript example for icon
soundproofboot 3ef6fd8
docs(v6): update JavaScript example for accordion
soundproofboot c3340ae
docs(v6): update JavaScript example for back-button
soundproofboot ec26bf2
docs(v6): update JavaScript examples for breadcrumbs
soundproofboot bf28ee7
docs(v6): update JavaScript example for buttons
soundproofboot f994a43
docs(v6): update JavaScript examples for item
soundproofboot 1fdbb55
docs(v6): update JavaScript example for refresher
soundproofboot 3f8b81e
docs(v6): update JavaScript example for reorder
soundproofboot 12a2bc4
docs(v6): update JavaScript examples for searchbar
soundproofboot f28c3c7
docs(v6): update JavaScript examples for segment
soundproofboot 9a04992
docs(v6): update JavaScript examples for segment-button
soundproofboot 7fa5d9d
docs(v6): update JavaScript example for tabs
soundproofboot f7a8988
docs(v6): update JavaScript examples for text
soundproofboot 7e67fc0
docs(v6): update JavaScript example for toast
soundproofboot f136105
docs(v6): update JavaScript example for toolbar
soundproofboot a722c87
revert changes required to build v6 docs locally
soundproofboot 7853751
docs(v6): run linter
soundproofboot File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
<ion-app> | ||
<app-example class="ion-page"></app-example> | ||
<app-example class="ion-page"> | ||
<router-outlet></router-outlet> | ||
</app-example> | ||
</ion-app> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,13 @@ | ||
import { Component } from '@angular/core'; | ||
import { IonicModule } from '@ionic/angular'; | ||
import { RouterOutlet } from '@angular/router'; | ||
import { ExampleComponent } from './example.component'; | ||
|
||
@Component({ | ||
selector: 'app-root', | ||
templateUrl: 'app.component.html', | ||
styleUrls: ['app.component.css'] | ||
styleUrls: ['app.component.css'], | ||
imports: [IonicModule, ExampleComponent, RouterOutlet], | ||
standalone: true | ||
}) | ||
export class AppComponent { } |
4 changes: 3 additions & 1 deletion
4
static/code/stackblitz/v6/angular/app.component.withContent.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,7 @@ | ||
<ion-app> | ||
<ion-content class="ion-padding"> | ||
<app-example></app-example> | ||
<app-example> | ||
<router-outlet></router-outlet> | ||
</app-example> | ||
</ion-content> | ||
</ion-app> |
15 changes: 15 additions & 0 deletions
15
static/code/stackblitz/v6/angular/app.component.withContent.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Component } from '@angular/core'; | ||
import { IonicModule } from '@ionic/angular'; | ||
import { RouterOutlet } from '@angular/router'; | ||
import { ExampleComponent } from './example.component'; | ||
|
||
@Component({ | ||
selector: 'app-root', | ||
templateUrl: 'app.component.html', | ||
styleUrls: ['app.component.css'], | ||
imports: [IonicModule, ExampleComponent, RouterOutlet], | ||
standalone: true | ||
}) | ||
export class AppComponent { | ||
constructor() {} | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { Routes } from '@angular/router'; | ||
|
||
export const routes: Routes = [ | ||
{ | ||
path: 'example', | ||
loadComponent: () => import('./example.component').then((m) => m.ExampleComponent), | ||
}, | ||
{ | ||
path: '', | ||
redirectTo: 'example', | ||
pathMatch: 'full', | ||
}, | ||
]; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,11 @@ | ||
import { Component } from '@angular/core'; | ||
import { IonicModule } from '@ionic/angular'; | ||
|
||
@Component({ | ||
selector: 'app-example', | ||
templateUrl: 'example.component.html', | ||
styleUrls: ['example.component.css'] | ||
styleUrls: ['example.component.css'], | ||
imports: [IonicModule], | ||
standalone: true | ||
}) | ||
export class ExampleComponent { } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Ionic App</title> | ||
</head> | ||
|
||
<body> | ||
<app-root> | ||
</app-root> | ||
</body> | ||
|
||
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||||
---|---|---|---|---|---|---|---|---|
@@ -1,7 +1,14 @@ | ||||||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | ||||||||
import { bootstrapApplication } from '@angular/platform-browser'; | ||||||||
import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router'; | ||||||||
import { IonicRouteStrategy, IonicModule } from '@ionic/angular'; | ||||||||
import { importProvidersFrom } from '@angular/core'; | ||||||||
import { routes } from './app/app.routes'; | ||||||||
import { AppComponent } from './app/app.component'; | ||||||||
|
||||||||
import { AppModule } from './app/app.module'; | ||||||||
|
||||||||
platformBrowserDynamic() | ||||||||
.bootstrapModule(AppModule) | ||||||||
.catch((err: any) => console.error(err)); | ||||||||
bootstrapApplication(AppComponent, { | ||||||||
providers: [ | ||||||||
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, | ||||||||
importProvidersFrom(IonicModule.forRoot({ })), | ||||||||
provideRouter(routes, withPreloading(PreloadAllModules)), | ||||||||
], | ||||||||
}) | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We add new lines at the end of the files as a standard.
Suggested change
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,31 @@ | ||
{ | ||
"name": "angular-starter", | ||
"private": true, | ||
"scripts": { | ||
"ng": "ng", | ||
"start": "ng serve", | ||
"build": "ng build" | ||
}, | ||
"dependencies": { | ||
"@angular/animations": "^15.0.0", | ||
"@angular/common": "^15.0.0", | ||
"@angular/compiler": "^15.0.0", | ||
"@angular/core": "^15.0.0", | ||
"@angular/forms": "^15.0.0", | ||
"@angular/platform-browser": "^15.0.0", | ||
"@angular/platform-browser-dynamic": "^15.0.0", | ||
"@angular/router": "^15.0.0", | ||
"rxjs": "~7.8.0", | ||
"tslib": "^2.3.0", | ||
"zone.js": "~0.12.0", | ||
"@ionic/angular": "^6.0.0", | ||
"@ionic/core": "^6.0.0", | ||
"@angular/platform-browser-dynamic": "17.3.2" | ||
"ionicons": "8.0.13" | ||
}, | ||
"devDependencies": { | ||
"@angular-devkit/build-angular": "^15.0.0", | ||
"@angular/cli": "^15.0.0", | ||
"@angular/compiler-cli": "^15.0.0", | ||
"typescript": "~4.9.4" | ||
} | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"extends": "./tsconfig.json", | ||
"compilerOptions": { | ||
"outDir": "../out-tsc/app", | ||
"types": [] | ||
}, | ||
"files": ["src/main.ts", "src/polyfills.ts"], | ||
"include": ["src/**/*.d.ts"] | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,19 @@ | ||
<html> | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" /> | ||
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" /> | ||
<meta charset="UTF-8" /> | ||
<link rel="icon" href="/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Ionic App</title> | ||
</head> | ||
|
||
<body> | ||
<ion-app> | ||
{{ TEMPLATE }} | ||
</ion-app> | ||
|
||
<script type="module" src="./index.ts"></script> | ||
</body> | ||
|
||
</html> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We add new lines at the end of the files as a standard.