Ionic Framework | Page Four

Building out our app

Open index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Freshly Pressed</title>
  </head>
  <body>

  </body>
</html>

Next, add Ionic Libraries

<link rel="stylesheet" href="lib/ionic/css/ionic.min.css">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>

Here's how our index.html file should look:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Freshly Pressed</title>
    <link rel="stylesheet" href="lib/ionic/css/ionic.min.css">
    <script src="lib/ionic/js/ionic.bundle.min.js"></script>
  </head>
  <body>

  </body>
</html>

Now add app CSS & JavaScript

<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>

Add Ionic header directive between body tags

View Ionic documentation for header bar
<ion-header-bar align-title="center" class="bar-positive">
  <h1 class="title">Freshly Pressed</h1>
</ion-header-bar>

Add ionic content directive below header directive

View Ionic documentation for content
<ion-content>
  <h1>Content Here</h1>
</ion-content>

Next, initiate the Angular application.

Open app.js and add the following:

var App = angular.module("App", ["ionic"]);

App.controller("AppCtrl", ["$scope", AppCtrl]);

function AppCtrl($scope) {
};

Add ng-app directive to index.html

<html ng-app="App">

Add controller to body tag

<body ng-controller="AppCtrl">

Here's how our index.html file should look now:

<!DOCTYPE html>
<html lang="en" ng-app="App">
  <head>
    <meta charset="UTF-8">
    <title>Freshly Pressed</title>

    <link rel="stylesheet" href="lib/ionic/css/ionic.min.css">
    <script src="lib/ionic/js/ionic.bundle.min.js"></script>

    <link rel="stylesheet" href="css/style.css">
  </head>
  <body ng-controller="AppCtrl">

      <ion-header-bar align-title="center" class="bar-positive">
          <h1 class="title">Freshly Pressed</h1>
      </ion-header-bar>

      <ion-content>
        <h1>Content Here</h1>
      </ion-content>

      <script src="js/app.js"></script>

  </body>
</html>

prev
next