As discussed in Understanding Ionic 2: Classes, classes are at the center of everything thanks to ES6. These classes use a new syntax called decorators to specify what the purpose of each class is. One of these decorators, @App, is used to designate a class as the main component of your app.
In this article, we’ll discuss the @App decorator and how to use it.
Ionic 1.0 Equivalent
There is a very clear parallel in Ionic 1.0: ng-app. In 1.0, you would add the ng-app attribute to an element (usually body), pass in a name to that attribute, and create a module with that name.
<body ng-app="app">
angular.module('app', ['ionic']);
Basic @App Syntax
In our index.html file, we will use the new ion-app tag.
<ion-app></ion-app>
Then, in our app.js file, we will create a class and mark it as our app class.
import {App, IonicApp, Config, Platform} from 'ionic/ionic';
@App({
})
Class MyApp {
}}
Basic Decorator Options
The first thing you’ll want to provide to your @App decorator, is a templateUrl. This is an html file that is placed into the ion-app tag. This is the html template of your @App component.
import {App, IonicApp, Config, Platform} from 'ionic/ionic';
@App({
templateUrl: 'app/app.html',
})
Class MyApp {
}}
The next thing you can pass in is a config object which has a bunch of options to really configure your Ionic app. Some things you can configure include icons, animations, tab placement, page transitions, and much more. For more information, see the Official Ionic 2 docs.
import {App, IonicApp, Config, Platform} from 'ionic/ionic';
@App({
templateUrl: 'app/app.html',
config: {
backButtonText: 'Go Back',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabbarPlacement: 'bottom',
pageTransition: 'ios',
}
})
App Class Constructor
Now, in our MyApp class, we should add a constructor.
import {App, IonicApp, Config, Platform} from 'ionic/ionic';
@App({
templateUrl: 'app/app.html',
})
Class MyApp {
constructor(app: IonicApp, config: Config, platform: Platform) {
this.app = app;
this.menuType = config.get('menuType');
platform.ready().then(() => {
// Do any necessary cordova or native calls here now that the platform is ready
});
}
}}
There are a couple things going on here. First, we are pulling into our constructor a reference to our IonicApp itself via app and assigning it to a class property. This allows us to access stuff like this.app.getComponent('leftMenu').close(); to close menus and such.
Second, we are pulling in a reference to our configuration via config. This allows us to query our configuration at any time.
Last but not least, we are pulling in a reference to the platform which allows us to run code when the cordova platform is all ready. that would be a good time to initialize any required plugins. This may look somewhat familiar to you if you did any work with plugins in version 1.
Get/Set Config
As mentioned above, using config, we can get any config value for our app.
var menuType = config.get('menuType'); //Default to "reveal" on iOS
We can also SET configuration values.
var menuType = config.set('ios','menuType','overlay'); //Set to "overlay" on iOS
For the first parameter, we specified ios as the platform. If we leave that parameter blank, it will apply to ALL platforms.
var menuType = config.set('','menuType','overlay'); //Set to "overlay" on all platforms
For a full list of configuration values, see the Ionic Docs.
NOTE: You can also add custom values to the configuration for lookup at a later time using the same API and syntax.
Conclusion
As seen in this article, the @App is the basic and first decorator you will need to use in the process of making an Ionic App. Your @App decorated class is the central component of your app.
Special Thanks
Huge thanks to Brandy Carney for reviewing/editing this post!
NOTE: Alpha
Please be aware that Ionic 2 is in alpha and is subject to change at any time. If this post becomes inaccurate at any time, feel free to leave a comment and I’ll do my best to update it as soon as I can.
The post Understanding Ionic 2: @App appeared first on Andrew McGivery.