Использование ui-router в ionic framework в AngularJS

Я работаю над приложением, использующим ionic framework. Это, в свою очередь, использует ui-router. В настоящее время у меня есть довольно простое двухстраничное приложение. Тем не менее, он будет расширяться, чтобы быть намного больше. В настоящее время я получаю сообщение об ошибке при переходе от первого представления ко второму. Ошибка говорит:

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)

Я использую 1.0.0 beta 3 Ionic Framework. Мой файл app.js выглядит так:

"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) {
}

Мой index.html выглядит так:

<!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 выглядит так:

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

login.html выглядит так:

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

Вид переходит просто отлично. Однако ошибка, которую я показал выше, беспокоит меня. Боюсь, что потом он укусит меня за задницу. Кто-нибудь знает, что может быть причиной этого? Кто-нибудь знает, как я могу это исправить?

Благодарю вас!


ionic-framework javascript angularjs angular-ui-router
person user3284007    schedule 03.05.2014    source источник
comment
удаление вашего кода в codepen может быть полезным   -  person Aaron Saunders    schedule 04.05.2014
comment
Многофайловая структура этого вопроса делает невозможным (я полагаю) создание кода.   -  person user3284007    schedule 06.05.2014
comment
Не совсем, посмотрите мой jsfiddle: jsfiddle.net/axedre/ef36wee7/1 и почувствуйте бесплатно изменить его на ваше усмотрение ...   -  person Andrea Aloi    schedule 28.01.2015

Ответы (2)


arrow_upward
16
arrow_downward

Если вы используете пакетный файл ionic.js, вам не нужно включать ui-router, он уже включен. Вам также не нужно включать ng-router.

Вот кодовая ручка

person mhartington    schedule 06.05.2014
comment
Если этот вопрос был полезен, пожалуйста, отметьте его как правильный :) - person mhartington; 07.05.2014
comment
К сожалению, такой подход мне не подходит. В вашем подходе весь код находится в виде шаблонов внутри одного файла .html. Мой подход имеет несколько файлов .html. - person user3284007; 08.05.2014
comment
Если это так, добавьте URL-адрес шаблона в поставщике состояний с именем папки, в которой они находятся. Я обновил codepen с комментарием по этому поводу. Кроме того, не включайте тег скрипта во внешние html-файлы. - person mhartington; 08.05.2014

arrow_upward
3
arrow_downward

ngRoute относится к обычному использованию углового маршрутизатора по умолчанию.

Пока вы указываете это как свою зависимость, вы не можете использовать метод UI-маршрутизатора, то есть stateProviders и состояния.

В вашем случае вам нужно удалить ngRoute из ваших зависимостей или [ ]

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

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

а затем устранить неполадки, поскольку это нулевое значение, что-то еще не работает.

person Thinkerer    schedule 02.08.2014