Ionic 4 Tutorial with AngularJS and Cordova
![Ionic 4 Tutorial with AngularJS and Cordova](/images/2018-02-1-ionic-angularjs.png)
Did you enjoy using Angular.js for building Ionic 1.x apps? But was forced to migrate to TypeScript/Angular 2+ to use the latest Ionic versions (2+) which don't support AngularJS anymore or do you still use the Ionic 1.x version because you don't want to use TypeScript? If YES then fortunately for you you can now use JavaScript and AngularJS with the latest and future versions of Ionic (4+) because Ionic is going framework agnostic starting with version 4.
Since the Ionic CLI doesn't yet support generating framework agnostic apps we'll manually execute different tasks that the Ionic CLI do for us behind the curtain (mainly things related to integrating Cordova)
So for now you'll need to generate a new Cordova project
Prerequisites
It goes without saying that you need to have Node, NPM and Cordova installed also the SDKs for the platforms you need to target (i.e Android or iOS) and also a MAC for building iOS apps.
Installing Cordova
If you don't have Cordova installed you can simply run the following command
npm install cordova -g
Depending on your npm configuration you might need to add sudo to install packages globally.
Generating a New Cordova Project
Now let's get started by generating a new Cordova project by running the following command:
cordova create ionic4-cordova-angularjs
Installing AngularJS and Ionic 4 Core Components
Navigate inside your Cordova project then install AngularJS and Ionic 4 core package (which contains Compiled Stencil Components/Web Components for Ionic 4) from npm
cd ionic4-cordova-angularjs
npm install angular
npm install @ionic/core
You can now use AngularJS and Ionic 4 components with your Cordova application but since they are installed in node_modules
you need to copy them inside www
either using a hook script or manually. For simplicity I will just copy them manually into www/js
folder.
Please note that you need the whole @ionic
folder for Ionic to work correctly.
You can then include them using a <script>
tag so open the www/index.html
then add the following code:
<script src="js/angular.min.js"></script>
<script src='js/@ionic/core/dist/ionic.js'></script>
Adding the Browser Platform
Next let's add the browser platform which allows you to build Cordova applications that run in the browser (and also PWAs)
So head back to your terminal, make sure your inside your Cordova application and then run the following command:
cordova platform add browser
You can then run your app using
cordova run
You app will be started using your default browser and served from http://localhost:8000/
.
Adding Routing using UI-Router
Before adding any pages let's first setup routing whithin our Cordova application using the UI-Router
UI-Router is the defacto standard for routing in AngularJS. Influenced by the core angular router $route and the Ember Router, UI-Router has become the standard choice for routing non-trivial apps in AngularJS (1.x).
So head back to your terminal then run the following command to install the router from npm:
npm install --save @uirouter/angularjs
Again copy the angular-ui-router.js
from the @uirouter
in the node_modules
folder to the www/js
folder then add a <script>
to include it in the www/index.html
file
<script src="js/angular-ui-router.js"></script>
Creating an AngularJS App and Add States
Next you need to create an AngularJS application so create an app.js
in www
then add the following code:
var myApp = angular.module('app', ['ui.router']);
myApp.config(function($stateProvider,$urlRouterProvider) {
var homeState = {
name: 'home',
url: '/home',
component: 'home'
}
var aboutState = {
name: 'about',
url: '/about',
component: 'about'
}
$stateProvider.state(homeState)
$stateProvider.state(aboutState);
$urlRouterProvider.otherwise('/home');
});
Creating your Ionic Pages
Let's create our first Ionic page. Create a folder called pages. Inside it create a home
folder with a file home.html
and home.js
files
mkdir pages
cd pages
mkdir home
touch home.html
touch home.js
Open home.html
then add the following content
<ion-page class="show-page">
<ion-header>
<ion-toolbar>
<ion-title>Ionic 4 + AngularJS Application </ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="content" padding>
<p>This is the home page</p>
<a ui-sref="home" ui-sref-active="active">Home</a>
<a ui-sref="about" ui-sref-active="active">About</a>
</ion-content>
</ion-page>
Next open home.js
and add the following code
angular.module('app').component('home', {
templateUrl: './pages/home/home.html',
controller: function() {
console.log("home component");
}
})
Now let's create the about page. Create the about folder then inside it add about.html
and about.js
Open about.html
then add the following code
<ion-app>
<ion-page class="show-page">
<ion-header>
<ion-toolbar>
<ion-title>Ionic 4 + AngularJS Application </ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="content" padding>
<p>This is the about page</p>
<a ui-sref="home" ui-sref-active="active">Home</a>
<a ui-sref="about" ui-sref-active="active">About</a>
</ion-content>
</ion-page>
</ion-app>
Next open about.js
and add the following code:
angular.module('app').component('about', {
templateUrl: './pages/about/about.html',
controller: function() {
console.log("about component");
}
})
You'll need to include these components in index.html
<script src="./app.js"></script>
<script src="./pages/home/home.js"></script>
<script src="./pages/about/about.js"></script>
Next change the <body>
to add these changes
<body ng-app="app">
<ion-app>
<ui-view></ui-view>
</ion-app>
<script type="text/javascript" src="cordova.js"></script>
</body>
If you get scaling problems like in the following screen shot
You simply need to add the following tags copied from an Ionic app in the <head>
of your index.html
file
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
Now if your run your app using cordova run
you should see the following page
You can navigate between the home and about pages using the links
Adding a Target Cordova Platform
You can add a target platform using
cd ionic4-cordova-angularjs
cordova platform add ios --save
cordova platform add android --save
This will ad Android and iOS platforms
Running your App in Real Devices
You can also run your app using a real device so first attach a device then run the following commands
cordova run android --device
Or for iOS
cordova run ios --device
Conclusion
In this tutorial we have seen how to use Ionic 4 components with AngularJS.
-
Date: