Question

我试图在Ionic中获得一个非常基本的页面渲染，但似乎除了出现白页之外什么都没有。

的index.html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="vendor/ionic.min.css">
        <title>IoT Launch</title>
        <script type="text/javascript" src="vendor/vendor.js"></script>
        <script type="text/javascript" src="js/bundle.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
    </head>
    <body ng-app="iot-launch">
        <ion-nav-view></ion-nav-view>
    </body>
</html>

请注意，我正在使用Browserify从第三方生成vendor.js和bundle.js，并使用js / apps.js中的入口点生成我自己的JavaScript。

JS / app.js：

'use strict';

angular.module('iot-launch', ['ionic', require('./views/deviceList')])

.config(['$urlRouterProvider', function($urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
}])

.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

    $rootScope.$on('$stateChangeError', console.log.bind(console));
    $rootScope.$on('$stateChangeStart', console.log.bind(console));
    $rootScope.$on('$stateNotFound', console.log.bind(console));
    $rootScope.$on('$stateChangeSuccess', console.log.bind(console));
}]);

JS /视图/ deviceList.js：

module.exports = angular.module('iot-launch.views.deviceList', [
    'ionic'
])

.config(['$stateProvider', function($stateProvider) {
    console.log('In deviceList config');
    $stateProvider
        .state('iot-launch.deviceList', {
            url: '/',
            template: '<ion-view title="hello"><ion-content>Hello</ion-content></ion-view>'
        });
}])

.name;

当我用模板的内容替换<ion-nav-view></ion-nav-view>时，它会在页面上呈现（即出现Hello）。出现在控制台中的唯一语句是deviceList配置中的语句，因此$ stateProvider代码似乎被调用。

我认为$urlRouterProvider.otherwise('/')，iot-launch.deviceList状态的网址为/，并且在主html文件中使用<ion-nav-view></ion-nav-view>会导致iot-launch.deviceList中的模板1}}出现<ion-nav-view></ion-nav-view>出现的地方。

Answer 1

我刚刚注意到我没有定义override状态，显然iot-launch状态非常必要。从状态名称中删除iot-launch.deviceList或定义.deviceList状态似乎可以解决问题。缺乏错误信息非常严重。

离子内容未呈现

1 个答案: