# Angular and Ionic

**URL:** <https://forum.ionicframework.com/t/angular-and-ionic/19050>\
**Category:** ionic-v1\
**Created:** [March 13, 2015, 4:22am UTC](https://forum.ionicframework.com/t/angular-and-ionic/19050 "2015-03-13T04:22:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![trickzjen23](https://avatars.discourse-cdn.com/v4/letter/t/8edcca/32.png) [@trickzjen23](https://forum.ionicframework.com/u/trickzjen23)\
**Post date:** [March 13, 2015, 4:22am UTC](https://forum.ionicframework.com/t/angular-and-ionic/19050/1 "2015-03-13T04:22:36Z")

</div>

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](http://nopaste.linux-dev.org/?450551)

Thank you very much in advance!

---

<div class="post-metadata">

**Author:** ![thebosz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/thebosz/32/77110_2.png) [@thebosz](https://forum.ionicframework.com/u/thebosz)\
**Post date:** [March 13, 2015, 4:28am UTC](https://forum.ionicframework.com/t/angular-and-ionic/19050/2 "2015-03-13T04:28:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![trickzjen23](https://avatars.discourse-cdn.com/v4/letter/t/8edcca/32.png) [@trickzjen23](https://forum.ionicframework.com/u/trickzjen23)\
**Post date:** [March 13, 2015, 4:49am UTC](https://forum.ionicframework.com/t/angular-and-ionic/19050/3 "2015-03-13T04:49:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![thebosz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/thebosz/32/77110_2.png) [@thebosz](https://forum.ionicframework.com/u/thebosz)\
**Post date:** [March 13, 2015, 3:13pm UTC](https://forum.ionicframework.com/t/angular-and-ionic/19050/4 "2015-03-13T15:13:58Z")

</div>

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");
}
```