CODEWITHSUNDEEP
angularjsionic-framework
Greg
Greg

Reputation: 1402

Angular view to Ionic view

What am I doing wrong? I've followed countless tutorials on Youtube/Google and yet it doesn't seem to be working.

I want to load games and when you click on one of them, it should give a detail view. This all worked fine in Angular only, but I wanted to try in Ionic for the animation.

Note: Following code is to display the list of games.

Index.html

  <body ng-app="myApp">
    <script id="list.html" type="text/ng-template">
      <ion-nav-view></ion-nav-view>
    </script>
  </body>

Controller

var ctrl = angular.module('Controllers', []);

ctrl.controller('MainController', ['$scope', '$http', '$location', 'games', function($scope, $http, $location, games){

  $scope.games = [];

  $scope.games = games.all();

}]);

You can assume I get data in code above.

App config

app.config(['$stateProvider',function($stateProvider) {
  $stateProvider
    .state('list', {
      url: "/",
      templateUrl: 'templates/list.html',
      controller: 'MainController'
    })
}])

List.html

<ion-view view-title="Games">
  <ion-refresher pulling-text="Refresh..." on-refresh="refresh()"></ion-refresher>

  <ion-content>
    <div class="game" ng-repeat="game in games.results" ng-click="checkDetail(game, $index)">
      <!--<img ng-src="{{ game.image.screen_url }}" alt="{{ game.aliases }}" />-->
      <h3>{{ game.name }}</h3>
    </div>
  </ion-content>
</ion-view>

Codepen

Here's a codepen I based it on http://codepen.io/darrenahunter/pen/oDKid

Upvotes: 0

Views: 578

Answers (1)

Alexandre
Alexandre

Reputation: 588

You have to declare a ui-view to inject template from state. Edit your index.html like that :

<body ng-app="myApp">
    <div ui-view>
    </div>
</body>

or

<body ng-app="myApp">
    <ion-nav-view name="content"></ion-nav-view>
</body>

and edit your state like that 

.state('statename', {
     url: "/",
     views: {
         'content': {
             templateUrl: 'yourTemplate.html',
             controller: "yourCtrl"
         }
     }
}

that way you force to inject your view in that ion-nav-view.

The same way you can create 

    <div ui-view="content"></div>

Upvotes: 2

Related Questions