Navigation And Routing not Working

ionic-v1
1

I am new to AngularJs and Ionic, I am trying to follow this example to create simple app but it is just showing blank screen and there is no error on console log.

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>

singlePost.html

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

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]
        })
    }
})
2

Where are you finding this example? There is a great list of resources that you could follow, or you can start a new project and add components to it from the docs & other resources.

3

Sorry I forget to mention link, I am following THIS TUTORIAL

4

this line is wrong.

You are redirecting by default to the abstract base-state of the app.
You are not allowed to show abstract states directly.
try changing this line to:
$urlRouterProvider.otherwise(‘/latestPosts/latestPosts’) → but then your state urls make no sense.

Better change the url of the forst state to ‘/’.

5

I have solved this issue, there was lots of typos and errors in my existing code, it took me whole day to figure it out…

Thanks!