What is AngularJS
AngularJS is a JavaScript framework. And we can add this to HTML page using <script> tag. By using AngularJS we can extend HTML attributes and bind data to HTML to display dynamic data in our applications. Basically AngularJS is a library written in JavaScript. Because here we are using AngularJS in Ionic framework there is no need to add explicitly this library, the reason is when we have created our First Hello World Application, the AngularJS library added to our application automatically. And you can find this library in your project folder.
For those who want to learn AngularJS only without Ionic framework they need to add AngularJS library you can find here How to use AngularJS.
In my previous post we display static Hello World in header section of our application. Now come to the main point of this article, how to display dynamic data in Ionic apps. To display dynamic data in Ionic apps we need AngularJS Controller and bind that controller's data to our app.
How to add Controller
1- To add controller in Ionic Apps go to your project folder and open app.js file under www/js/app.js
2- Notice that app.js is the file where we will write the functionality of our applications in AngularJS. In this file you will see following code.
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
The working of above code is like the main function of any application. Below this function we add our controller.
// HelloWorld Controller
myApp.controller('HelloWorldCtrl',["$scope",function($scope) {
// here we create a variable that holds "Hello World" and use this in our ionic app
}]);
Now in our controller we are going to create a variable using $scope. Here the question raise what is $scope.
The scope is the binding part between the view and controller, here view means HTML and controller mean AngularJs Controller. In AngularJS scope is an object with the available properties and methods.
// HelloWorld Controller
myApp.controller('HelloWorldCtrl',["$scope",function($scope) {
// here we create a variable that holds "Hello World" and use this in our ionic app
$scope.data = "Hello World from Controller"
}]);
<body ng-app="starter" ng-controller="HelloWorldCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">{{data}}</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
0 Comments