Last tutorial on How to build an ionic app part 1, we learnt how to quick start and get the components installed.In this part we will learn the architecture and map it with the code.
Please note we are talking about ionic base version here which is V1.
Lets map the architecture with the code base.
View
To understand lets build a three tab app, where first screen will be set of user input and this will be validated by a server and login information will be generated(View)
Lets have a look at main file called index.html which bootstraps the app.
<body ng-app="app" ng-controller="maincontroller" animation="slide-left-right-ios7">
<div>
So the main controller is the first controller that will be loaded when the app boots by the way app boots via the app.js , we will see later.
Another part of view is the templates and routes which define the url mappings with the templates.
Templates & Routes
routes.js contains states and controllers for each state and url mapping, in this case page2 has a state of home and uses template hom.html in templates directory and uses the main controller for data bindings on home.html
.state('home, {
url: '/page2',
views: {
'tab1': {
templateUrl: 'templates/home.html',
controller: ‘maincontroller’
}
}
})
there is nothing found router which will come into play if nothing matched.
Ionic uses angular ui router’s state concept
state is nothing but the current page you are on, this angular module contains routes and is automatically injected via the app.js as shown below.
screen shot is from app.js showing how to module routes is injected.
Lets checkout our templates which are normal templates and we will be modifying them to do screen changes mostly.
home.html , defined in routes.js and is mapped to http://localhost/page2
Lets see how we bind data from template to controller and how to persist data using ng-model.
Here we want to persist the url/username/password/port properties which are in input boxes to be available in the controller so we have used the ng-bind which is an angular directive and binds the elements to model.
Enough of view part, lets see the controller and see how our values are available and how they can be accessed.
Controller
We saw that we have used ng-bind to bind the input boxes to data and there is a special variable inside the controller called the $scope, which is available and can access and store variables inside the controller.
We can access and set these values inside this scope objects and the GUI will render those values dynamically.
Lets see an example, if i try to set the value of $scope.url = http://localhost, it will be available inside the controller, vice versa if from GUI some body tries to enter the url property , scope can access it
There is a concept of $rootScope, if you want that to be available in all the controllers, else $scope will contain data for that controller only, in an app we have multiple controllers and $rootScope helps sharing the data across controllers, in my case i wanted to persist the connection information across tabs and wanted it to be available across controllers.
In the above method of my controller, I tried to set a connection flag which will be available across the app and all the controllers so that other tabs can check this token (maximoConnection) and let the user fire controller methods.
Checkout the complete controller code, where the user on the main screen enters the server url, username,password,port and tries to connect to the Server by calling the getData() method on the button click event.
home.html uses the getData(setttings) objects is passed so that settings entered on the main page can be accessed inside the controller.
controller.js
Here if every thing is fine, the maximoConnection flat is set to connected, else it displays an ionic popup saying error and flag is set to NotConnected.
So till now we could create a page, bind values to it and access them in controller, in next section we will see how to use the ionic services and factories, we will also talk about the promises and defer calls from the methods which are help full in calling http services from different methods.
Keep Reading !
No comments:
Post a Comment