Javascript Ionic/AngularJs导航和路由不工作_Javascript_Angularjs_Ionic Framework

Javascript Ionic/AngularJs导航和路由不工作

javascript angularjs ionic-framework

Javascript Ionic/AngularJs导航和路由不工作,javascript,angularjs,ionic-framework,Javascript,Angularjs,Ionic Framework,我是AngularJs和Ionic的新手，我正在尝试创建简单的应用程序，但它只是显示空白屏幕，控制台日志上没有错误 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=dev

我是AngularJs和Ionic的新手，我正在尝试创建简单的应用程序，但它只是显示空白屏幕，控制台日志上没有错误

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="js/controller.js"></script>
</head>

<body ng-app="bloggerDemo">
    <ion-pane>
        <ion-nav-bar class="bar-positive"></ion-nav-bar>
        <ion-nav-view></ion-nav-view>
    </ion-pane>
</body>

</html>

latestPosts.html

<ion-view title="Latest Posts">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right" sref="latestPosts.singlePost({post: $index})">
                <span>{{latestPost.title}}</span>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>


{{latestPost.title}}

singlePost.html

<ion-view title="Single Post">
    <ion-content padding='true'>
        <h1>{{post.title}}</h1>
        <section>{{post.description}}</section>
    </ion-content>
</ion-view>


{{post.title}
{{post.description}}

app.js

var app = angular.module('bloggerDemo', ['ionic'])

app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/latestPosts')

    $stateProvider.state('latestPosts', {
        abstract: true,
        url: '/latestPosts',
        template: '<ion-nav-view></ion-nav-view>'
    })

    $stateProvider.state('latestPosts.index', {
        url: '/latestPosts',
        templateUrl: 'templates/latestPosts.html',
        controller: 'PostsCtrl'
    })

    $stateProvider.state('latestPosts.singlePost', {
        url: '/:singlePost',
        templateUrl: 'templates/singlePost.html',
        controller: 'SinglePostCtrl',
        resolve: {
            singlePost: function ($stateParams, PostService) {
                return PostService.getPost($stateParams.post)
            }
        }
    })
})

app.controller('PostsCtrl', function ($scope, PostService) {
    $scope.latestPosts = PostService.latestPosts
})

app.controller('PostCtrl', function ($scope, singlePost) {
    $scope.singlePost = singlePost
})

app.factory('PostService', function () {
    var posts = [
        {
            title: 'lkad alkjdflak dfkljad f alkdsjf al',
            description: 'adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj flkadlkfkhaghoiahd fkasdjkasdjfkl ajf sdjfalksdj falj falkf '
        },
        {
            title: 'lkad alkjdflak dfkljad f alkdsjf al',
            description: 'adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj flkadlkfkhaghoiahd fkasdjkasdjfkl ajf sdjfalksdj falj falkf '
        }
    ];

    return {
        latestPosts: posts,
        getPost(function (post) {
            return latestPosts[post]
        })
    }
})

var-app=angular.module（'bloggerDemo'，['ionic']）
app.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（“/latestPosts”）
$stateProvider.state（'latestPosts'{
摘要：没错，
url:“/latestPosts”，
模板：“”
})
$stateProvider.state（'latestPosts.index'{
url:“/latestPosts”，
templateUrl:'templates/latestPosts.html'，
控制器：“PostsCtrl”
})
$stateProvider.state（'latestPosts.singlePost'{
url:“/：singlePost”，
templateUrl:'templates/singlePost.html'，
控制器：“SinglePostCtrl”，
决心：{
singlePost：函数（$stateparms，PostService）{
return PostService.getPost（$stateParams.post）
}
}
})
})
应用控制器（'PostsCtrl'，功能（$scope，PostService）{
$scope.latestPosts=PostService.latestPosts
})
应用控制器（'postcrl'，函数（$scope，singlePost）{
$scope.singlePost=singlePost
})
应用程序工厂（‘售后服务’、功能（）{
var员额=[
{
标题：“lkad alkjdflak dfkljad f alkdsjf al”，
描述：“adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj FLKADLKFKKKKKKKKKKHAGHOIAHD FKASDJKASDJKASDJFKJ falkf”
},
{
标题：“lkad alkjdflak dfkljad f alkdsjf al”，
描述：“adflkajd fjad faldfj aldkjf lkdfj lakdj flaksd flkds flksdj FLKADLKFKKKKKKKKKKHAGHOIAHD FKASDJKASDJKASDJFKJ falkf”
}
];
返回{
最新帖子：帖子，
getPost（函数（post）{
返回最新邮件[邮件]
})
}
})

尝试更改此选项：

<ion-list>
    <ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right" sref="latestPosts.singlePost({post: $index})">
        <span>{{latestPost.title}}</span>
    </ion-item> 
</ion-list>


{{latestPost.title}}

为此：

<ion-list>
    <ion-item ng-repeat="latestPost in latestPosts" class="item item-icon-right">
        <a ui-sref="latestPosts.singlePost({post: latestPost.post_id })">
{{latestPost.title}} 
        </a>  
    </ion-item>
</ion-list>


{{latestPost.title}}

希望这对您有所帮助…

在我阅读了您的代码后，我想我发现您的

app.js中存在问题
更改此项：
$stateProvider.state('latestPosts', {
        abstract: true,
        url: '/latestPosts',
        template: '<ion-nav-view></ion-nav-view>'
    })

需要注意的是，抽象状态总是指向
存在的位置
告诉我它是否有效，快乐编码 可能templateUrl没有指向正确的路径和/或正确的文件（html）？
$stateProvider.state('latestPosts', {
        abstract: true,
        url: '/latestPosts',
        template: "/templates.index.html" 
    })