$ npm install -g ionic @IonicPage decorator to lazy load your pages, but now in the latest version of Ionic (Ionic 4), we lazy load our Angular components with Angular routing.<ion-button> and <ion-tab> will only be loaded when they are accessed in the application.| Ionic Polymerization | Free - Radical |
|---|---|
| Ionic polymerization is a chain polymerization in which the center contains ions and ion pairs. | Polymerizations created by adding free-radical building components are known as free radical polymerizations. |
| Ionic polymerization requires less activation energy than radical polymerization. | Initiators and co-initiators are used in free radical polymerization. |
| It's an alternative to polymerization by free radicals. | It's the only method to get diverse polymers and composite materials. |
$stateProvider
.state('todos', {
url: '/todos',
controller: 'TodosCtrl',
templateUrl: 'todos.html',
resolve: {
todos: function(TodosService) {
return TodosService.getTodos()
}
}
})resolve over stateful services is better testing: as resolve injects dependencies in the controller, it is easy to test them.$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})maxCache to 0 :$ionicConfigProvider.views.maxCache(0);<ion-app> element is used to hold the whole Ionic app. Only one ion-app> element and various Ionic elements such as headers, footers, menus, content, and so on should be included in the Ionic project. Each of these elements is wrapped inside the <ion-app> component when it is displayed.<ion-app>
<ion-header>
//code
</ion-header>
<ion-content>
//code
</ion-content>
</ion-app>@ionic/storage package. The storage module allows us to store key-value pairs and JSON objects in secure, reliable storage. It also has its own set of limits.SQLite. When running on the Web or as a Progressive Web App, Storage will use IndexedDB, WebSQL, and localstorage.SQLite is the most stable and used a file-based database, which avoids the pitfalls of the other storage engines like IndexedDB, WebSQL, and localstorage.ionViewDidLoad, ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, ionViewDidLeave, ionViewWillUnload, ionViewCanEnter, ionViewCanLeave. ionViewDidLoad : Fired only when a view is stored in memory, will not fire if view has been already cached. ionViewWillEnter : fired when entering a page, before it becomes active one. this event is triggered every time user enters in the view.ionViewDidEnter : fired when entering a page, after it becomes active page. ionViewWillLeave : fired when user leaves a page, before it stops being the active page. ionViewDidLeave : fired when user leaves a page, after it stops being the active page. ionViewWillUnload : fired when a view is going to be completely removed. ionViewCanEnter : this is a nav guard. fired before entering a view. Useful when you want to control access to pages based on access credentials. ionViewCanLeave : this is also a nav guard, fired before leaving a view. ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy.$ionicBackdrop performs shows and hides backdrop over UI. Appears behind popups, loading, and other overlays. Usually multiple UI components require a backdrop but only one backdrop is needed in DOM. Each component which requires backdrop to be shown calls $ionicVackdrop.retain() when it wants to backdrop then $ionicBackdrop.release() when it is done with the backdrop. Method $ionicBackdrop.retain() and $ionicBackdrop.release() is used for backdrop. $ionicBackdrop.retain() is used to apply overlay over the content. $ionicBackdrop.release() is used to remove Ionic Backdrop from content. Each time when $ionicBackdrop.retain() is called $ionicBackdrop.release() method is called.
<platform> moves all files from the www folder to the www folder on the target platform. This is likewise done by ionic build <platform>, but it also produces the app's source code so that it can be executed on a simulator/emulator or a device. Config.xml is a global configuration file that controls the build settings of the Ionic apps. It controls many aspects of a Cordova application behavior. When you scaffold the Ionic application, a basic config.xml file is generated for you in the top-level directory. This file follows the W3C Package Web Apps (widget) specification. It allows developers to specify metadata about their applications easily. It contains various information about the project, such as package name, version, author's information, plugins, platform, etc. <ion-refresher> component to add pull-to-refresh functionality on a content component. An Ionic allows the users to pull the page down from the top on a list of data using touch to retrieve more data. The updated data should be modified during the refresher's output events. Once, the refreshing of page ends, call the complete() function on the refresher. <body> tag when the application is loaded on the device. Ionic, for example, adds the platform-ios class to the <body> tag on iOS devices.ionNavDidChange : This event is fired when the nav has changed components.ionNavWillChange : This event is fired when the nav will components.ionNavWillLoad : This event is fired when nav will load a component.ionic start --listpromiseFunction(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("Promises Resolved");
},3000);
})
}​3000 milliseconds. We can call the above promise function as below.promiseFunCall() {
this.promiseFunction().then(
successData => {
console.log(output: successData);
},
rejectData => {
console.log(output: rejectData);
}
);
} ​promiseFunction() will remain the same, and the async-await function handled how the promises will be called. So, the above function promiseFunCall() can be re-written as :async promiseFunCall() {
try {
let successData= await this.promiseFun();
console.log(output: successData);
} catch (error) {
console.log(error);
}
} ​chrome:/inspect/#devices to see your phone and application name. There's an inspect button there.iOS and use Xcode.Safari -> Windows -> Developer Options to enable developer options.developer -> Your phone -> localhost.| Event Name | Event Detail |
|---|---|
| on-hold | It is called whenever the duration of the touch is greater than 500ms. |
| on-tap | It is called whenever the duration of the touch is less than 250ms. |
| on-double-tap | It is called whenever there is double-tap touch. |
| on-touch | It is called instantly when the touch begins. |
| on-release | It is called when the touch ends. |
| on-drag | It is called when touch is moved without releasing around the page in any direction. |
| on-drag-up | It is called when an element is dragged up. |
| on-drag-right | It is called when an element is dragged to the right. |
| on-drag-left | It is called when an element is dragged to the left. |
| on-drag-down | It is called when an element is dragged down. |
| on-swipe | It is called when there is any dragging that has a high velocity moving in any direction. |
| on-swipe-up | It is called when there is any dragging that has a high velocity moving up. |
| on-swipe-right | It is called when there is any dragging that has a high velocity moving to the right. |
| on-swipe-left | It is called when there is any dragging that has a high velocity moving to the left. |
| on-swipe-down | It is called when there is any dragging that has a high velocity moving down. |
this.navCtrl.push(B, {name: ‘test’}) Where navCtrl is an object of NavigationController.this.navParams.get(“name”) where navParams is an object of NavParams.@Injectable()
export class BaseProvider {
email:any;
}import { BaseProvider } from "YOUR_PATH";
@IonicPage()
@Component({
selector: 'page-A',
templateUrl: 'a.html',
})
export class a {
constructor(private base: BaseProvider){
this.base.email = "test@test.com"
}
}import { BaseProvider } from "YOUR_PATH";
@IonicPage()
@Component({
selector: 'page-A',
templateUrl: 'a.html',
})
export class a {
constructor(private base: BaseProvider){
console.log(this.base.email) //whatever set on page A can be accessed here
}
}| Observable | Promise |
|---|---|
| Computation does not start until subscription so you can run then only when you need the result | Execute immediately after creation |
| Provide multiple values over time | Provide only one |
| Subscribe method is used for error handling which makes centralized and predictable error handling | Pushes errors to the child promises |
| Provides chaining and subscription to handle complex applications | Uses only .then() clause |
var promise = new promise((resolve) => {
setTimeout(() => {
resolve(42)
}, 500)
console.log("Promise started")
})
promise.then(data => console.log("Output", data))var observable = Rx.Observable.create((observer) => {
setTimeout(() => {
observer.onNext(42)
},200)
console.log("Observer started")
})
observable.forEach(x => console.log("Output is x))create() method to create an alert and can be customized by passing alert option in the create() method.complete() method on the infinite scroll instance.