I'm new to the Ionic Framework and I am on a mac. When I save my changes (cmd-S) to index.html, I instantly see my changes in the browser.
However, when I run the command 'ionic serve' or 'ionic run android', I am not seeing my changes, but instead its showing me things that I added a few hours ago. I would love to provide images but I need 10 rep to add images. I hope my code is enough to help me out.
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="tutorial.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/ionic.angular.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="js/app.js"></script>
<script src="cordova.js"></script>
<body ng-app="chApp" animation="slide-left-right-ios7">
<ion-nav-bar class="nav-title-slide-ios7 bar-light">
<ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/intro.html" type="text/ng-template">
<ion-view>
<ion-nav-buttons side="left">
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-if="!slideIndex">Skip Intro</button>
<button class="button button-positive button-clear no-animation" ng-click="previous()" ng-if="slideIndex > 0">Previous Slide</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-positive button-clear no-animation" ng-click="next()" ng-if="slideIndex != 4">Next</button>
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-if="slideIndex == 4">Begin</button>
</ion-nav-buttons>
<ion-slide-box on-slide-changed="slideChanged(index)">
<ion-slide>
<h2>Welcome to Classroom Hero! Swiping is the easiest way to navigate the app. Swipe now to begin the tutorial!</h2>
</ion-slide>
<ion-slide>
<h2>Reward Stamp Screen</h2>
</ion-slide>
<ion-slide>
<h2>Market Stamp Screen</h2>
</ion-slide>
<ion-slide>
<h2>Jar Stamp Screen</h2>
</ion-slide>
<ion-slide>
<h2>Registration Stamp Screen</h2>
</ion-slide>
</ion-slide-box>
</ion-view>
</script>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-only tabs-positive">
<ion-tab title="Reward" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ng-controller="MainCtrl">
<header class="bar bar-header bar-positive">
<h1 class="title">Reward</h1>
</header>
<ion-content has-header="true">
<h1>Deadlines</h1>
</ion-content>
</ion-tab>
<ion-tab title="MarketPlace" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">MarketPlace</h1>
</header>
<ion-content has-header="true">
<h1>Deadlines</h1>
</ion-content>
</ion-tab>
<ion-tab title="Classrom Jar" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Classroom Jar</h1>
</header>
<ion-content has-header="true">
<h1>Settings</h1>
</ion-content>
</ion-tab>
</ion-tabs>
</script>
and here is my javascript file
angular.module('chApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'templates/intro.html',
controller: 'IntroCtrl'
})
.state('tabs', {
url: '/tabs',
templateUrl: 'templates/tabs.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise("/");
})
.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate) {
// Called to navigate to the main app
$scope.startApp = function() {
$state.go('tabs');
};
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};
// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
};
})
.controller('MainCtrl', function($scope, $state) {
console.log('MainCtrl');
$scope.toIntro = function(){
$state.go('intro');
}
});