Angular JS - Ionic

jmallen3 · 12 Ιουλίου 2015

Καλημέρα!

Υπάρχει κάποιος με γνώσεις σε Angular js ή/και εμπειρία στη δημιουργία εφαρμογών με το ionic να βοηθήσει λίγο στα links εντός της εφαρμογής στέλνοντας το χρήστη από τη μια σελίδα σε μια άλλη?

kagelos · 12 Ιουλίου 2015

Εγώ έχω εμπειρία με AngularJS και Phonegap. Ionic δεν εχω δει ποτέ, αλλά ρώτα, ποτέ δεν ξέρεις.

jmallen3 · 12 Ιουλίου 2015

Έχω 3 αρχεία, το 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 <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.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 && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })
	
	$stateProvider.state('page', {
  url: '/templates/page',
  views: {
    home: {
      templateUrl: 'templates/page.html',
	   controller: 'PageCtrl'
    }
  }
})

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

controllers.js

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

.controller('DashCtrl', function($scope) {})

.controller('ChatsCtrl', function($scope, Chats) {
  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //
  //$scope.$on('$ionicView.enter', function(e) {
  //});
  
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

και

tab-chats.html

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
        <img ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
	 <a class="button icon icon-right ion-chevron-right" href="#/templates/page">Scientific Facts</a>
  </ion-content>
</ion-view>

Όταν στο τελευταίο αρχείο πατήσω πάνω στο κουμπί με όνομα Scientific Facts εμφανίζει μια λευκή σελίδα και όχι το περιεχόμενο της σελίδας page!

aghahowa · 13 Ιουλίου 2015

Σου βγαζει καποιο error η κονσόλα; Το template 'templates/page.html' υπάρχει στον dom;

τι διαφορές εχει ο κώδικάς σου με αυτό το codepen?

jmallen3 · 13 Ιουλίου 2015

Σου βγαζει καποιο error η κονσόλα; Το template 'templates/page.html' υπάρχει στον dom;

τι διαφορές εχει ο κώδικάς σου με αυτό το codepen?

Δεν το έχω μέσα σε κονσόλα ανοιγμένο το project, αλλά αλλάζω τα αρχεία και τα βλέπω κατευθείαν μέσω της εντολής ionic serve στο git.

Τι εννοείς αν υπάρχει το template στον dom?

aghahowa · 13 Ιουλίου 2015

την κονσολα του browser εννοω (ctrl + shift + J)

ο παρακάτω κώδικας υπαρχει στην html σου;

 <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Home">
        <ion-content class="padding">
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
          </p>
        </ion-content>
      </ion-view>
    </script>

αν ανοιγεις κατευθειαν το tab-chats.html στον browser φυσικα και δεν θα παιξει. δες το παραπάνω codepen.

Σύνδεση

Angular JS - Ionic

Προτεινόμενες αναρτήσεις

jmallen3

kagelos

jmallen3

aghahowa

jmallen3

aghahowa

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση