-
you get an ionic 3 project, using ionic 3 routing $ ionic start myProject blank
-
you get an ionic 4 project, using angular routing $ ionic start myProject blank --type=angular
-
Preview $ ionic serve vs ionic lab
-
Generate page $ ionic generate $ ionic g page detail
-
Generate service $ ng generate service checklist
-
Template language comes from Angular
- *ngFor
- {{ item }}
- (click)
- [(banana_in_a_box)]
- constructor(public router: Router, public navCtrl: NavController ) {}
- onClick() {this.router.navigateByUrl('/about');}
- onClickUsingNavCtrl() { this.navCtrl.navigateForward('/about'); /// another form of navigation!}
- gotoSettings(){ this.navCtrl.navigateForward('/settings'); /// another form of navigation!}
- Pass Data between pages while navigating - paramter: { path: 'pageTwo/:name', loadChildren...}
- Hero
- Name
- Powers
- functions to retrieve and modify these
- HeroManager
- The list of Heroes
- functions to get all Heroes, add Heroes, remove Heroes
- Timestamps
- Promise
- Score sorting
- Images display
- Dynamic UI https://umich.instructure.com/courses/235244/files/8875862/download?verifier=7me7augihHgnkDRKTOohAsWX2GDdyuYwWEjqkQwl&wrap=1
- https://paper.dropbox.com/doc/Going-Native-with-Ionic-3-Ionic-Native-and-Cordova--ASGakOVNPHEF2DOE0z4Ad_iNAg-20tY5KivpJnNNnSXfNdec
- https://vimeo.com/298460004
- https://paper.dropbox.com/doc/Week-8-CRUD--ASEWNEHJtO7nJqlwlIabIQJ6Ag-sndIVll1DZcLad9sFm4uV
- All https://vimeo.com/300637980
Create Read Update Delete
Creating the EntryDataService
- We can ask Ionic to create a (service) Provider for us using the
generate
(org
for short) command.- $ ionic g provider entry-data-service
This will do a few things for us:
- Create a new folder in
src
calledproviders
- Create a new subdirectory called
entry-data-service
that contains a single file called entry-data-service.ts - Define the class
EntryDataServiceProvider
inside entry-data-service.ts, and attach the@Injectable
decorator to it.
You will need to do the rest, which includes:
- importing
EntryDataServiceProvider
into app.module.ts. - Adding
EntryDataServiceProvider
to theproviders:
array in app.module.ts - Importing
EntryDataServiceProvider
into home.ts and entry-detail.ts. - Adding a parameter of type
EntryDataServiceProvider
to the constructors for HomePage and EntryDetailPage.
Now that everything is in place, we can start to implement the service.
https://github.com/JaneYum/cordova-plugin-local-notifications
-
dynamic [hidden]="todos && todos.length > 0”
-
For icon https://beta.ionicframework.com/docs/layout/css-utilities -Here are some pointers that you may find useful:
-
Adding a background image: https://www.w3schools.com/cssref/pr_background-image.asp (image from https://www.toptal.com/designers/subtlepatterns/
-
Using cards: https://ionicframework.com/docs/components/#cards
-
Using icons for buttons: https://ionicframework.com/docs/components/#icon-buttons https://ionicframework.com/docs/ionicons/
-
Using a floating button: https://ionicframework.com/docs/components/#fabs
-
Styling the input field: https://ionicframework.com/docs/components/#stacked-labels
-
Modifying the color palette and changing the color of the cancel button. see week 11 lecture notes
-
Positioning buttons to the right: https://ionicframework.com/docs/theming/css-utilities/