update w/ ion- directives

Author: Adam Bradley

www/index.html

@@ -11,15 +11,10 @@
     <!-- your app's css -->
     <link href="css/app.css" rel="stylesheet">
 
-    <!-- angularjs scripts -->
-    <script src="lib/js/ionic.js"></script>
-    <script src="lib/js/angular/angular.js"></script>
-    <script src="lib/js/angular/angular-animate.js"></script>
-    <script src="lib/js/angular/angular-sanitize.js"></script>
-    <script src="lib/js/angular-ui/angular-ui-router.js"></script>
-    <script src="lib/js/ionic-angular.js"></script>
-
-    <!-- cordova script -->
+    <!-- ionic/angularjs scripts -->
+    <script src="lib/js/ionic.bundle.js"></script>
+
+    <!-- cordova script (this will be a 404 during development) -->
     <script src="cordova.js"></script>
 
     <!-- your app's script -->
@@ -35,20 +30,20 @@
 
     <!-- 
       The nav bar that will be updated as we navigate between views
-      Additional attributes set its look, nav-bar animation and icons
+      Additional attributes set its look, ion-nav-bar animation and icons
       Icons provided by Ionicons: http://ionicons.com/ 
     -->
-    <nav-bar type="bar-positive" 
+    <ion-nav-bar type="bar-positive" 
              animation="nav-title-slide-ios7" 
              back-button-type="button-icon" 
-             back-button-icon="ion-ios7-arrow-back"></nav-bar>
+             back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
 
     <!-- 
-      The views will be rendered in the <nav-view> directive below
+      The views will be rendered in the <ion-nav-view> directive below
       Templates are in the /templates folder (but you could also
       have templates inline in this html file if you'd like).
     -->
-    <nav-view></nav-view>
+    <ion-nav-view></ion-nav-view>
 
   </body>
-</html>
+</html>

www/templates/about.html

@@ -1,8 +1,8 @@
 <!--
   This template loads for the 'tab.about' state (app.js)
 -->
-<view title="'About Ionic'">
-  <content has-header="true" has-tabs="true" padding="true">
+<ion-view title="'About Ionic'">
+  <ion-content has-header="true" has-tabs="true" padding="true">
     <img src="img/ionic.png" class="ionic-logo">
     <p>
       This is a sample seed project for the Ionic Framework. Please cut it up and make it your own.
@@ -29,5 +29,5 @@
     <p>
       MIT Licensed. Happy coding.
     </p>
-  </content>
-</view>
+  </ion-content>
+</ion-view>

www/templates/adopt.html

@@ -1,8 +1,8 @@
 <!--
   This template loads for the 'tab.adopt' state (app.js)
 -->
-<view title="'Adopt A Pet'">
-  <content has-header="true" has-tabs="true">
+<ion-view title="'Adopt A Pet'">
+  <ion-content has-header="true" has-tabs="true">
     <div class="list list-inset">
       <label class="item item-input">
         <span class="input-label">Your name</span>
@@ -12,8 +12,8 @@
         <span class="input-label">Your email</span>
         <input type="email">
       </label>
-      <toggle>Subscribe To Newsletter</toggle>
+      <ion-toggle>Subscribe To Newsletter</ion-toggle>
       <button class="button button-positive button-block">Adopt</button>
     </div>
-  </content>
-</view>
+  </ion-content>
+</ion-view>

www/templates/pet-detail.html

@@ -4,9 +4,9 @@
   The PetCtrl pulls data from the Pets service (service.js)
   The Pets service returns an array of pet data
 -->
-<view title="pet.title">
-  <content has-header="true" padding="true">
+<ion-view title="pet.title">
+  <ion-content has-header="true" padding="true">
     <p>{{ pet.description }}</p>
     <p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> All Pets</a></p>
-  </content>
-</view>
+  </ion-content>
+</ion-view>

www/templates/pet-index.html

@@ -1,15 +1,19 @@
 <!-- 
-  This template gets placed in the Pet tab's <nav-view> directive.
+  This template gets placed in the Pet tab's <ion-nav-view> directive.
   It was wired up in the app config (app.js) 
   The 'pets' data comes from its $scope within PetIndexCtrl (controller.js)
 -->
-<view title="'Pet Information'">
-  <content has-header="true" has-tabs="true">
-    <list>
-      <item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
+<ion-view title="'Pet Information'">
+  <ion-content has-header="true" has-tabs="true">
+
+    <ion-list>
+
+      <ion-item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
         <h3>{{pet.title}}</h3>
         <p>{{pet.description}}</p>
-      </item>
-    </list>
-  </content>
-</view>
+      </ion-item>
+      
+    </ion-list>
+
+  </ion-content>
+</ion-view>

www/templates/tabs.html

@@ -1,28 +1,28 @@
 
 <!-- 
   Create tabs with an icon and label, using the tabs-positive style. 
-  Each tab's child <nav-view> directive will have its own 
+  Each tab's child <ion-nav-view> directive will have its own 
   navigation history that also transitions its views in and out.
 -->
-<tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">
+<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">
 
 
   <!-- Pets Tab -->
-  <tab title="Pets" icon="icon ion-home" href="#/tab/pets">
-    <nav-view name="pets-tab"></nav-view>
-  </tab>
+  <ion-tab title="Pets" icon="icon ion-home" href="#/tab/pets">
+    <ion-nav-view name="pets-tab"></ion-nav-view>
+  </ion-tab>
 
 
   <!-- Adopt Tab -->
-  <tab title="Adopt" icon="icon ion-heart" href="#/tab/adopt">
-    <nav-view name="adopt-tab"></nav-view>
-  </tab>
+  <ion-tab title="Adopt" icon="icon ion-heart" href="#/tab/adopt">
+    <ion-nav-view name="adopt-tab"></ion-nav-view>
+  </ion-tab>
 
 
   <!-- About Tab -->
-  <tab title="About" icon="icon ion-search" href="#/tab/about">
-    <nav-view name="about-tab"></nav-view>
-  </tab>
+  <ion-tab title="About" icon="icon ion-search" href="#/tab/about">
+    <ion-nav-view name="about-tab"></ion-nav-view>
+  </ion-tab>
 
 
-</tabs>
+</ion-tabs>