Structure of an Ionic App

If you have never used Ionic, or Angular for that matter, the structure of an Ionic app may be completely new to you. Coming from JQuery world, there was a bit of a learning curve for me personally, but once you wrap your mind around the concepts, it quickly becomes a very powerful toolset.

One thing to keep in mind that may help is to remember that at it’s heart, Angular was built with MVC style frameworks in mind, meaning if you have ever built with MVC on the server-side, the concepts should already be familiar.

In this article, I will give an overview of the basic structure of an Ionic Hybrid app and how each piece is used to build amazing apps.

Overview

An Ionic App can be broken down into 5 major pieces: Views (Made from templates), Controllers, Data (Services and Factories, App Configuration, and Directives. The Views, Controllers, and Data are the most recognizable pieces from a MVC perspective (They are exactly what you think they are), and you can probably guess what App Configuration is.

Views

Views in an Ionic App are often referred to as templates because Angular controllers refer to them as such. Because of this, views are often stored in a /templates folder where each view is in a separate .html file. A view is where the markup for state, or page, of your app lives. In Ionic, these files tend to look something like this:

<ion-view title="About">
  <ion-content>
	My super cool content here!
  </ion-content>
</ion-view>

The title attribute is used for other Ionic directives such as the ion-nav-bar.

These views can use data binding, similar to frameworks like handlebars.

<ion-view title="About">
  <ion-content>
	My super cool content here! My name is {{name}}
  </ion-content>
</ion-view>

{{name}} would be a variable that has been defined to the $scope in the controller.

$scope.name = "Andrew";

So the template, once data bound, would say “My super cool content here! My name is Andrew”;

These views can also use ionic directives, angular logic (like if statements), loops, and more.

Read More: Creating Views with Ionic

Controllers

The controllers are the brains behind the app, where the flow of logic and data is controlled. When you go to a “page” in Angular, you are really calling a controller. The controller will use a view as a template for the markup it will show to the user (hense, templates) and make calls to the data layer classes (factories/services) to get the actual data to bind to the template. The controller assigns this data to a $scope variable, which is then binded to the view. The $scope is an object that contains data defined by the controller used to build the view.

For example, I go to page site.com/#mySuperPage which will call the mySuperPage controller (mySuperPageCtrl). The controller is configured to use the superpage.html template which looks like this:

<ion-view title="About">
  <ion-content>
	My super cool content here! My name is {{user.name}}.
  </ion-content>
</ion-view>

My controller needs to talk to the awesomeService class to get the user variable and assign it to the $scope.

.controller('MainCtrl', function($scope, $stateParams, awesomeService) {
	$scope.user = awesomeService.getUser();
})

We are assuming getUser will return an object with a “name” property.

var user = {
	name: "Andrew";
}

When the page is called, the controller will take the user variable that has been assigned to the $scope, and data bind it to the template. In this case, the template is calling the “name” property of the “user” $scope variable. This would result in:

<ion-view title="About">
  <ion-content>
	My super cool content here! My name is Andrew.
  </ion-content>
</ion-view>

Read More: Controllers in Ionic/Angular

Data (Factories/Services)

The Data layer of an Ionic app is the provider of data, usually from a external backend or web service. The controller requests the data from the Data layer to use in binding to the view. These Data layer classes are known as Services or Factories. The difference? Read here. At the end of the day, they more or less serve the same purpose. For the sake of simplicity, we’ll just refer to them both as a “data class”.

A data class generally will make some kind of http call and return a promise which when resolved contains the data received. Angular uses the $http module which will look very familiar to anyone coming from a JQuery background:

$http.get("some url here");

If you want to process the data before returning it back to the controller, you can do so when the promise is resolved and then return data that will get passed back in a promise.

$http.get("some url here").then(function(response){
	//Do stuff here
	return response;
});

So, a data class may look something like this:

.factory('awesomeService', function($http) {
	return {
		GetUser: function() {
			  return $http.get("some url here").then(function(response) {
					//Process Stuff Here
					return response;
			  });
		},
	}
})

Which when used in the controller would look something like this:

.controller('MainCtrl', function($scope, $stateParams, awesomeService) {
	awesomeService.getUser().then(function(response){
		$scope.user = response;
	});
})

Read More: Ionic: Using Factories and Web Services for Dynamic Data

App Configuration

The App Configuration states configures the app… thanks, captain obvious. More specifically, the routes, or states, of the app are specified, hooking up a controller to a template (view). A default route is also specified. An example .config from the ionic-starter-tabs project:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    .state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'DashCtrl'
        }
      }
    })
	
	// if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

In simple terms, the $stateProvider sets up each page or view of your app and links it with a controller.

Directives

From the Angular Docs for Directives: “directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.”

To put this even more simply, Directives can either just be a attribute/class that triggers custom behavior on an element, or in some cases, they act a lot like custom elements. For example, in Ionic, all of the ion-* tags are custom directives that come with the Ionic framework.

<ion-list>

In the Ionic source, there is a directive that is coded against any element with the name ion-list.

IonicModule.directive('ionList', [ '$timeout',
function($timeout) {
  return {
    restrict: 'E',
    require: ['ionList', '^?$ionicScroll'],
    controller: '$ionicList',
    compile: function($element, $attr) {
	//... etc ...
	}
  }
 }
]);

There is alot there, but there are two key parts to pay attention to.

restrict: 'E',

The restrict parameter tells the directive if it is looking for an attribute, element, or class.

‘A’ – only matches attribute name
‘E’ – only matches element name
‘C’ – only matches class name
‘AEC’ – matches either attribute or element or class name

In the case of the ion-list, we are looking for the element that matches.

You’ll notice that the directive is called ionList instead of ion-list. The directive is smart enough that it considersion-tab and ionTab to be the same thing.

Conclusion

In an Ionic App, a controller gets data from one or many services/factories and then data binds it to a view/template. The app config glues the controller to the view/template. Directives are elements with customized behavior.

转自:http://mcgivery.com/structure-of-an-ionic-app/