Verwenden von UI-Router im ionischen Framework in AngularJS

Ich arbeite an einer App, die das ionische Framework verwendet. Dies wiederum verwendet den UI-Router. Derzeit habe ich eine ziemlich einfache zweiseitige App. Es wird sich jedoch erweitern, um viel größer zu sein. Zu diesem Zeitpunkt erhalte ich einen Fehler, wenn ich von meiner ersten Ansicht zu meiner zweiten Ansicht übergehe. Der Fehler sagt:Verwenden von UI-Router im ionischen Framework in AngularJS

TypeError: Cannot read property '1' of null 
    at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:14235:28 
    at updateView (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37839:30) 
    at eventHook (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37786:17) 
    at Scope.$broadcast (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19725:28) 
    at $state.transition.resolved.then.$state.transition (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:31686:22) 
    at wrappedCallback (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18429:81) 
    at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18515:26 
    at Scope.$eval (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19441:28) 
    at Scope.$digest (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19267:31) 
    at Scope.$apply (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19547:24)

Ich benutze 1.0.0 Beta 3 des Ionic Framework. Meine app.js Datei sieht wie folgt aus:

"use strict"; 

var myApp = angular.module('myApp', ['ionic', 'ngRoute']); 

myApp.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('intro', { url: '/', templateUrl: 'app/account/welcome.html', controller: 'WelcomeController' }) 
    .state('login', { url: '/account/login', templateUrl: 'app/account/login.html', controller: 'LoginController '}) 
    ; 

    $urlRouterProvider.otherwise("/"); 
}); 

function WelcomeController($scope) { 
} 

function LoginController($scope) { 
}

Meine index.html sieht wie folgt aus:

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    <meta charset="utf8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title>MyApp</title> 

    <link rel="stylesheet" href="/vendor/ionic/release/js/ionic.bundle.min.js" /> 
    <link rel="stylesheet" href="/css/app.css" /> 

    <script type="text/javascript" src="/vendor/ionic/release/js/ionic.bundle.js"></script> 
    <script type="text/javascript" src="/vendor/angular-route/angular-route.min.js"></script> 

    <script type="text/javascript" src="/app/app.js"></script> 
    <script type="text/javascript" src="/app/controllers.js"></script> 
</head> 
<body> 
    <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7"> 
     <ion-nav-back-button class="button-icon ion-arrow-left-c"> 
     </ion-nav-back-button> 

     <h1 class="title">MyApp</h1> 
    </ion-nav-bar> 

    <ion-nav-view animation="slide-left-right"> 
    </ion-nav-view> 
</body> 
</html>

welcome.html wie folgt aussieht:

<ion-view> 
    <br /><br /> 
    <h1>Welcome</h1> 
    <a class="button" href="/#/account/login">Login</a> 
</ion-view>

<ion-view> 
    <br /><br /> 
    <h1>Login</h1> 
</ion-view>

Die Ansicht Übergänge jus t gut. Der Fehler, den ich oben gezeigt habe, betrifft mich jedoch. Ich fürchte, es wird mich später in den Arsch beißen. Weiß jemand, was das verursachen würde? Weiß jemand wie ich das beheben kann?

Vielen Dank!

Quelle

2014-05-03 user3284007

das Löschen Ihres Codes in Codepen könnte hilfreich sein –

Die Multi-Dateistruktur dieser Frage macht es unmöglich (glaube ich), einen Codepen zu erstellen. – user3284007

Nicht wirklich, überprüfen Sie mein jsfiddle heraus: http://jsfiddle.net/axedre/ef36wee7/1/ und fühlen Sie sich frei, es zu Ihrer Durchsicht zu ändern ... –

Wenn Sie die ionic.js-Datei verwenden, müssen Sie den ui-router nicht mit einbeziehen, er ist bereits enthalten. Sie müssen auch keinen ng-Router hinzufügen.

Heres the codepen

Quelle

2014-05-06 12:39:29 mhartington

Wenn diese Frage hilfreich war, markieren Sie sie bitte als richtig :) – mhartington

Leider wird dieser Ansatz für mich nicht funktionieren. Ihr Ansatz enthält den gesamten Code als Vorlagen in einer einzelnen HTML-Datei. Mein Ansatz hat mehrere .html-Dateien. – user3284007

Wenn dies der Fall ist, dann fügen Sie die Vorlagen-URL in Ihrem Bundesstaaten-Anbieter mit dem Ordnernamen, in dem sie sich befinden, an. Ich aktualisierte den Code-Partner mit einem Kommentar dazu. Fügen Sie das Skript-Tag auch nicht den externen HTML-Dateien hinzu. – mhartington

ngRoute bezieht sich auf die normalen Standard-Router Winkel Anwendungen.

Während Sie dies als Ihre Abhängigkeit setzen, können Sie nicht die UI-Router-Methode, d. H. StateProvider und die Zustände verwenden.

In Ihrem Fall Sie ngRoute von Ihren Abhängigkeiten oder []

var myApp = angular.module('myApp', ['ionic', 'ngRoute']); zu

var myApp = angular.module('myApp', ['ionic']);

und dann beheben weiter, da seine einen Nullwert zu entfernen haben, ist etwas anderes kaputt.

Quelle

2014-08-02 06:10:55 Thinkerer

Verwenden von UI-Router im ionischen Framework in AngularJS

Antwort

Verwandte Themen