Angular and Ionic

Hello Ionic! please bare with me as i am very new to this language. I’ve been pulling my hair off trying to get my angular code work in Ionic.

I’m getting error Error: [ng:areq] Argument ‘AppCtrl’ is not a function, got undefined. in console.

Do I also use AngularJS as the controller? and is AngularJS(Controller) is the one responsible in parsing json file in a REST API?

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// ‘starter’ is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of ‘requires’
angular.module(‘starter’, [‘ionic’])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});

});

function AppCtrl(){
alert(“test”);
}

index.html

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/glsmile.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/main.js"></script>

GL Smile Filter

{{1+1}}
          </div>
          <select>
              <option selected>Choose your region</option>
              <option>Mississsauga</option>
              <option>North York</option>
          </select>
            <br>
          <select>
              <option selected>School near by</option>
              <option>University Of Toronto</option>
              <option>Waterloo</option>
              <option>Sheridan College</option>
          </select>
            <input type="range" name="rangePrice" min="0" max="600" id="rangePrice"
                   oninput="showVal(this.value)" onchange="showVal(this.value)">
                <p div style="display:inline; float:left;">$0</p> <p div style="display:inline; float:right;">$600</p>
        <div style="clear: both"></div>
      <span id="amount">Amount:</span> <span id="valBox">$300</span>
      <button class="button button-small button-royal" id="buttonGo" style="float:right;">
          Go
      </button>
      </div>
      <i class="icon ion-star"></i>
  </ion-content>
</ion-pane>
<script>
function showVal(newVal){
    document.getElementById("valBox").innerHTML="$" + newVal;
}
</script>

For some reason, index.html looks incomplete there. I uploaded a new copy here
http://nopaste.linux-dev.org/?450551

Thank you very much in advance!

It looks like you aren’t creating a controller correctly. I would read a tutorial on Angular’s controllers.

my index.html doesn’t seem to be the right one. Can you look at this one? http://nopaste.linux-dev.org/?450551

I see the updated index.html, but you still don’t have a correct definition for AppCtrl.

To define a controller in Angular, you need to do something like

angular.module('starter').controller('AppCtrl', function($scope){
    window.alert('test');
});

And remove this part:

function AppCtrl(){
    alert("test");
}