Угловой домашний маршрут на ионном не работает

Это мое первое приложение на ионном и угловом тоже, домашний маршрут не работает , вид не загружен, но показаны другие виды. Я не уверен, о маршруте, потому что это http://localhost:8101/#/ innstead из http://localhost:8101/Угловой домашний маршрут на ионном не работает

// 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' 
var starter = angular.module('starter', ['ionic']); 

starter.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

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

$stateProvider 
    .state('app', { 
    url: '/', 
    templateUrl : 'pages/home.html', 
    controller : 'mainController' 
    }) 
    .state('acerca',{ 
    url: '/acerca', 
    templateUrl : 'pages/acerca.html', 
    controller : 'aboutController' 
    }) 
    .state('contacto',{ 
    url: '/contacto', 
    templateUrl : 'pages/contacto.html', 
    controller : 'contactController' 
    }); 

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

starter.controller('mainController',function($scope){ 
    $scope.message = 'Hola,mundo'; 
}); 

starter.controller('aboutController',function($scope){ 
    $scope.message = 'Acerca de'; 
}); 

starter.controller('contactController',function($scope){ 
    $scope.message = 'Contacto'; 
});

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script> 
    </head> 
    <body ng-app="starter"> 
    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Ionic Blank Starter</h1> 
     </ion-header-bar> 
     <ion-content> 
     <ion-nav-view></ion-nav-view> 
     </ion-content> 
    </ion-pane> 
    </body> 
</html>

и вид

<ion-view> 
    <ion-content> 
     <h1>Home</h1> 
     <p>{{ message }}</p> 
     <a href = "#/home">Home</a> 
     <a href = "#/acerca">Acerca</a> 
     <a href = "#/contacto">Contacto</a> 
    <ion-content> 
</ion-view>

Теперь просматривать содержимое не показываются ,

источник

2016-04-28 AFS

Ионная версия обеспечивает механизм маршрутизации 'ui, router' из коробки. Зачем вам нужен« ngRouter »? –

Я не знал этого, его первый раз, когда я использую ионный, спасибо – AFS

Изменить код, чтобы использовать $stateProvider и $urlRouterProvider вместо $routeProvider из ngRouter, как показано ниже:

// 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' 
var starter = angular.module('starter', ['ionic']); 

starter.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

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

$stateProvider 
    .state('app', { 
    url: '/', 
    templateUrl : 'home.html', 
    controller : 'mainController' 
    }) 
    .state('acerca',{ 
    url: '/acerca', 
    templateUrl : 'pages/acerca.html', 
    controller : 'aboutController' 
    }) 
    .state('contacto',{ 
    url: '/contacto', 
    templateUrl : 'pages/contacto.html', 
    controller : 'contactController' 
    }); 

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

starter.controller('mainController',function($scope){ 
    $scope.message = 'Hola,mundo'; 
}); 

starter.controller('aboutController',function($scope){ 
    $scope.message = 'Acerca de'; 
}); 

starter.controller('contactController',function($scope){ 
    $scope.message = 'Contacto'; 
});

Кроме того, вероятный выпуск в существующем коде, что вы имели опечатку в вашем методе otherwise(), где вы использовали redirecTo вместо redirectTo

источник

2016-04-28 18:03:21

Не уверен, как ngRouter будет работать с ионным .. Хотя +1 для реализации ui.router и опечатки –

Он не сможет использовать состояния, навигационные директивы и т. д., но маршрутизация URL будет работать, поскольку это всего лишь механизм маршрутизации на угловом (ионном, построенном на вершине углового) приложении. Как вы думаете? Я не пробовал, но думаю, что он должен работать. Попробуем и дадим вам знать –

Я отредактировал исходное сообщение, теперь содержимое представления не отображается. – AFS

Угловой домашний маршрут на ионном не работает

ответ

Смежные вопросы