CODEWITHSUNDEEP
angularjsangular-ui-routerionic-framework
MattDionis
MattDionis

Reputation: 3616

Angular-UI router not working in Ionic app

I'm working on an app using the Ionic Framework and am having trouble attempting to use the Angular-ui router. The first block of code below functions perfectly. However, as soon as I remove ng-controller="LoginController as login" and move this into controller and controllerAs attributes in my route none of the Angular code within my view works anymore. I thought I understood routing, but this issue is tripping me up.

app/login/login.html:

<ion-view view-title="Login">
  <ion-content ng-controller="LoginController as login">

    Email: <input type="text" ng-model="login.email">
    Password: <input type="text" ng-model="login.password">

    <br><br>

    <button ng-click="login.createUser()">Create User</button>

    <br><br>

    <button ng-click="login.removeUser()">Remove User</button>

    <p ng-if="login.message">Message: <strong>{{ login.message }}</strong></p>
    <p ng-if="login.error">Error: <strong>{{ login.error }}</strong></p>
  </ion-content>
</ion-view>

Code that seems to "break" my view, app.config.js:

angular
  .module('app')
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'app/layout/menu.html'
    })

    .state('login', {
      url: '/login',
      templateUrl: 'app/login/login.html',
      controller: 'LoginController',
      controllerAs: 'login'
    })
...

Upvotes: 1

Views: 958

Answers (1)

Aaron Saunders
Aaron Saunders

Reputation: 33345

try

.state('login', {
  url: '/login',
  templateUrl: 'app/login/login.html',
  controller: 'LoginController as login'
})

Upvotes: 5

Related Questions