Angular/Ionic Views - where to put controller?

Question

I have an Ionic app that has two views:

Home
Activity

The 'Home' view shows static info with a login screen that takes users to the 'Activity' page where they can see updated info from a $http request to my REST. I can make the call work on a single page, but I dont know where to put the controller when its being used on a view other than the main view and Im unsure how to handle the duplicate specification of the ng-app; its being called in both the 'home' view and the 'activity' view.

Here is my 'Home'

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

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

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>

    <!-- Only required for Tab projects w/ pages in multiple tabs 
    <script src="lib/ionicuirouter/ionicUIRouter.js"></script>
    -->

  </head>
  <body ng-app="app" animation="slide-left-right-ios7">
  <div>
    <div>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
    </div>
</div>
  </body>

</html>

and here is my 'Activity' view:

<ion-view title="Activity">
    <ion-content overflow-scroll="true" padding="true" class="has-header">
   <div ng-app="app" ng-controller="users"> 
<div style="width:100%; text-align:center;">
<table class="pure-table">
  <thead>
  <tr><td>Device ID</td><td>First Name</td><td>Last Name</td><td>Activity</td></tr>
</thead>
<tbody>
  <tr ng-repeat="x in names">

    <td>{{ x.Regid }}</td><td>{{ x.Fname }}</td><td>{{ x.Lname }}</td><td>{{ x.activity }}</td>
  </tr>
  <tbody>
</tbody></tbody></table></div>

<button class="button button-full button-light" id="refresh">
 Refresh
</button>

</div>
<div class="bar bar-footer bar-stable">
  <div class="title"></div>
</div>

<script>
var app = angular.module('app', []);
app.controller('users', function($scope, $http, $interval) {
    $http.get("call to REST.php")
    .then(function (response) {$scope.names = response.data.records;});
    $interval(MyCtrl, 3000);
});
function callAtInterval(){
  //console.log("Interval Occured");
  //window.location.reload();
  //$state.reload();
}
function MyCtrl($scope )
{
    $scope.updateFromModel = 'Initial Value';
    setTimeout( function()
    {
        console.log( 'automatically update view?' );
        $scope.updateFromModel = "It's been updated";
        $scope.$apply();
    }, 1000 );
}
$('#refresh').click(function() {
    location.reload();
});
</script>

</ion-content>
</ion-view>

and here are my routes:

angular.module('app.routes', [])

.config(function($stateProvider, $urlRouterProvider) {

      .state('login', {
    url: '/home',
    templateUrl: 'templates/login.html',
    controller: 'loginCtrl'
  })

  .state('activity', {
    url: '/activity',
    templateUrl: 'templates/activity.html',
    controller: 'activityCtrl'
  })

$urlRouterProvider.otherwise('/home')

});

Zeeshan Hassan Memon · Accepted Answer · 2016-02-22 16:31:05Z

1

You can add controllers in controller.js file same like following code:

app.controller('MyController1', function($scope) {
    //write controller specific code here...
});

app.controller('MyController2', function($scope) {
    //write controller specific code here...
});
... so on

Or you can define in <script> tag too right after define your app module:

var app = angular.module('app', []);
app.controller('MyController1', function($scope) {
    //write controller specific code here...
});

app.controller('MyController2', function($scope) {
    //write controller specific code here...
});
... so on

answered Feb 22, 2016 at 16:31

Zeeshan Hassan Memon

8,3654 gold badges47 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DataGuy · Accepted Answer · 2016-02-22 16:14:54Z

0

I just figured it out. The controller goes in the controller.js under the controller thats already been established for the activity route.

answered Feb 22, 2016 at 16:14

DataGuy

1,7255 gold badges24 silver badges42 bronze badges

Comments

SvOzMaS · Accepted Answer · 2016-02-22 16:18:05Z

0

You have to create a controller for each view/session in a isolated js file (controllers.js) and then declare as a angular module of your app. Check out the official Ionic Framework Tutorial recommendations

https://ccoenraets.github.io/ionic-tutorial/create-angular-controller.html

    angular.module('starter.controllers', [])

 .controller('loginCtrl', function ($scope) {
    $scope.LoginForm = {};

    $scope.Login = function() {
        alert($scope.LoginForm.User);
        alert($scope.LoginForm.Password);
        location.href = "#tab/qr-reader";
    };      
})

more controllers ...

answered Feb 22, 2016 at 16:18

SvOzMaS

12 bronze badges

Collectives™ on Stack Overflow

Angular/Ionic Views - where to put controller?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related