Angular UI-Router View Not Displaying Anything

Question

I can't get UI-Router to work, which is really annoying because I'm building a site off of another site I built where it was working fine. Currently, ui-view is not displaying anything, and ui-sref links are not clickable or redirecting. I'm not getting any errors either. My code is below. Any help would be much appreciated!

JS: app.js

var app = angular
    .module("RssTransfers", ["ui.router"])
    .config(MainRouter);

    function MainRouter($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('transfers', {
                url: '/',
                templateUrl: 'transfers.html',
            })

            .state('about', {
                url: '/about',
                templateUrl: 'about.html'
            })

            .state('upload', {
                url: '/upload',
                templateUrl: 'upload.html'
            })
    };

HTML: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>RSS Transfers</title>

  <link rel="stylesheet" type="text/css" href="./css/materialize.css" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
  <script src="./js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
  <script src="./js/ng-file-upload.min.js"></script>
  <script src="./js/app.js"></script>
  <script src="./js/transferController.js"></script>
  <script src="./js/uploadController.js"></script>
  <script src="./js/materialize.js"></script>
</head>
<body ng-app="RssTransfers">

    <div ng-include="'navbar.html'"></div>

    <div class="wrapper" ui-view></div>


</body>
</html>

dummy text to display: transfers.html

<div ng-controller="TransferController as transfer">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, est, cum. Dicta, eius obcaecati quia culpa ipsam quibusdam tempore adipisci molestias optio, nam corporis, veritatis voluptatem incidunt cumque a sequi?</p>
</div>

As requested, here's the code for the controller:

TransferController.js

angular.module('RssTransfers')
    .controller('TransferController', TransfersController);

TransfersController.$inject = ['$http'];

function TransfersController($http){
    var self = this;
    self.all = [];
    self.addTransfer = addTransfer;
    self.newTransfer = {};
    self.getTransfer = getTransfer;

    getTransfers();
    function getTransfers(){
        $http
            .get('http://localhost:3000/transfers/')
            .then(function(response){
                self.all = response.data.transfers;
        });
    }

  function addCriminal() {
      $http
          .post('http://localhost:3000/transfer', self.newTransfer)
          .then(function(response){
              getTransfers();
    });
    self.newTransfer = {};
  }

}

Did you try to add a breakpoint in your MainRouter function ? — CaptainMat
– CaptainMat, Commented Dec 9, 2015 at 13:47
I did throw in a breakpoint within app.js, but it never hit the debugger. I imagine my error has something to do with instantiating the module, but I just can't see it — Joshua Swiss
– Joshua Swiss, Commented Dec 9, 2015 at 13:53

Joshua Swiss · Accepted Answer · 2015-12-09 15:36:18Z

1

Solved, although I'm not sure why. I deleted my frontend files and started from scratch, and it works fine. I suspect there may be an issue with ui-router and ng-file-upload conflicting, but I'll tackle that issue when I get there.

answered Dec 9, 2015 at 15:36

Joshua Swiss

3051 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Katana24 · Accepted Answer · 2015-12-09 13:59:39Z

0

I've taken your code and created a plunkr here. Note - that it doesn't contain the controller just yet.

angular.module('RssTransfers',['ui.router']);

(function() {
  'use strict';

  angular
    .module('RssTransfers')
    .config(routing);

  routing.$inject = ['$stateProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider'];

  function routing( $stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider ){

    $urlMatcherFactoryProvider.strictMode(false);

    // For any unmatched url, redirect to /root
    $urlRouterProvider.otherwise("/transfers");

     $stateProvider
        .state('transfers', {
            url: '/transfers',
            templateUrl: 'transfers.html',
        })
        .state('about', {
            url: '/about',
            templateUrl: 'about.html'
        })
        .state('upload', {
            url: '/upload',
            templateUrl: 'upload.html'
        });
  }
})();

though I'm still unsure why yours doesn't work...

answered Dec 9, 2015 at 13:59

Katana24

8,97920 gold badges81 silver badges120 bronze badges

3 Comments

Joshua Swiss Over a year ago

Thanks, you beat me to it, as I was just in Plunker now. Yeah, I'm staring at it and nothing.

Katana24 Over a year ago

I'd suggest removing every file that isn't necessary for the ui-router to render as it may be one of those that are getting in the way - or it just means that your path to the templates is wrong

Joshua Swiss Over a year ago

Thanks, I'll give that a go. Templates are in the same directory, so that shouldn't be affecting it, but I'm happy to remove bit by bit to see where the issue is!

lucy · Accepted Answer · 2024-05-07 19:22:25Z

0

originally, i only had added the the provideRouters(routes)to the app.component.ts file, but after adding it to the main.ts file when bootstrap builds, the ui rendered fine

answered May 7, 2024 at 19:22

lucy

1

Collectives™ on Stack Overflow

Angular UI-Router View Not Displaying Anything

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related