• 14-Jul-16

    Build a mobile app ionic 3 with angularjs 4

    This is ionic 3. Ionic had updated Ionic 2.0 to Ionic 3.0 to be compatible with Angular 4.0.0 because Angular 4 has been released recently. This upgrade introduces new features such as smaller and faster applications size and all android and ios devices capabilities, support for a more recent version of TypeScript 2.1 and 2.2 in Ionic.

    Ionic 3 will improve the build time and type checking in your application. It also introduces ability to use async await in Ionic Framework, and much more. For more information, see the Angular 4.0.0 defiantly you will get out of your skill and angular knowledge.

    The selectors to style the text color of the native text elements have been removed

     h1[color], h2[color], h3[color],  a[color]:not([ion-button]):not([ion-item]):not([ion-fab]),

    p[color], span[color], b[color], i[color], strong[color], em[color], small[color], sub[color], sup[color]

    These are officially gone and therefore these elements will not get the color unless the ion-text attribute is added in your ionic code file.

    Creating new application in Ionic 3 is same as ionic 2 but there is some file which is different from ionic 2, some functionality is deprecated and many bugs resolved like

    alert, content, date-time, infinite-scroll, item-siding, navigation, split-pane, slides and virtual-list.

    Ionic 3 has added new Features like module-loader, navigation, split-pane , util, etc.

    Concepts:

    1. Develop Ionic 3 Application

    2. What’s new updates in ionic 3?

    1. Create Ionic 3 Application

    First of all install the latest version of the Ionic CLI Documentation - Ionic Framework and Cordova. and also install recent version of Node.js 8.2.1 and lower

    Apache Cordova for Native app development with ionic:


    $npm install - g ionic cordova

     

    $ ionic start ionicv3demo --v2

    This doesn’t mean you will get a 2.x.x version of Ionic, just the latest/current (3.x.x) version has been released


    $ cd ionicv2demo

    $ ionic serve


    2. What are the updates in ionic 3?


    1. For ionic 3 the package.json will lieof the below mentioned Dependency and also included common compiler and others components :

    "dependencies": {

        "@angular/common": "4.0.0",

        "@angular/compiler": "4.0.0",

        "@angular/compiler-cli": "4.0.0",

        "@angular/core": "4.0.0",

        "@angular/forms": "4.0.0",

        "@angular/http": "4.0.0",

        "@angular/platform-browser": "4.0.0",

        "@angular/platform-browser-dynamic": "4.0.0",

        "@ionic-native/core": "3.4.2",

        "@ionic-native/splash-screen": "3.4.2",

        "@ionic-native/status-bar": "3.4.2",

        "@ionic/storage": "2.0.1",

        "ionic-angular": "3.0.1",

        "ionicons": "3.0.0",

        "rxjs": "5.1.1",

        "sw-toolbox": "3.4.0",

        "zone.js": "^0.8.4"

    },

    "devDependencies": {

      "@ionic/app-scripts": "1.3.0",

      "typescript": "~2.2.1"

    }

    1. SplashScreen/startingScreenand StatusBar are updated from using static methods to using instilled providers. This is a best code practice for ionic 3 beginners you can develop ionic demo app.

    In app/app.module.ts 

    You should add below code for splash-screen and status

    import {SplashScreen} from "@ionic-native/splash-screen"; //update in ionic 3

    import {StatusBar} from "@ionic-native/status-bar"; //update in ionic 3

     

    providers: [

        StatusBar,

        SplashScreen,

        Storage,

        SharedService,

        {provide: ErrorHandler, useClass: IonicErrorHandler}

      ]

    and in app/app.component.ts file you have to add below mentioned code

    import {SplashScreen} from "@ionic-native/splash-screen";

    import {StatusBar} from "@ionic-native/status-bar";

     

    this.platform.ready().then(() => {

     

          StatusBar.styleDefault();

          Splashscreen.hide();

     

        });

    1. BrowserModule and HttpModulemethod call for angular js integration  

      in app/app.module.ts

    import { BrowserModule } from '@angular/platform-browser'; //update in ionic 3

    import { HttpModule } from '@angular/http'; //update in ionic 3

     

    imports: [

    BrowserModule, //update in ionic 3

    HttpModule, //update in ionic 3

    IonicModule.forRoot(MyApp),

    IonicStorageModule.forRoot()

    ],

     Blog highlight

    Creating Ionic v3 is really easy from ionic studio.If you want changes from Ionic 2 to Ionic 3 then you have to implement code in package.json to support Angular 4, TypeScript 2.2, and Ionic 3. Then changes from ionic UI StatusBar, Ionic SplashScreen to dependency and change in BrowserModule and HttpModule. We have mentioned demo code.
     

    Tags

    build ionic 3 app with angularjs 4 ionic3 mobile app build ionic3 app development company
    ionic development for mobile application  Ionic framework for iOS, Android  Ionic developers
    best agency for ionic app Ionic Framework Ionic-AngularJS Development

    At Axis Technolabs Ionic mobile app development agency, we have modern standards for native ionic mobile development by leading in the power and flexibility for

    mobile web. Our Ionic developers team create, build, test, clean, and delivery real-world solutions into app products for clients’ ionic app specific needs.