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 = {};
}
}
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...