CODEWITHSUNDEEP
javascriptangularjsmeteor
jmknoll
jmknoll

Reputation: 1054

Using $stateProvider and ui.router in AngularJS

Working through this tutorial on AngularJS with MeteorJS, but have run into some issues with ui.router, $stateProvider, and $locationProvider.

My issues is that, as far as I can tell, everything should be wired up properly for routing, but my links don't actually work. Contents of my main files are below, but first more information about the problem:

The problem seems to be with the line //$locationProvider.html5mode(true); in app.js. Its currently commented out, which allows the page to load, but doesn't route the links properly. If I uncomment it, then the page returns the following error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module socially due to:
TypeError: undefined is not a function

I assume in reference to $locationProvider being undefined. This looks a lot like a dependency injection error, but I can't find any dependency injection errors. Any help much appreciated.

app.js

if (Meteor.isClient){
    angular.module("socially", ['angular-meteor', 'ui.router']);

    angular.module("socially").config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {

        $stateProvider
            .state('parties', {
                url: '/parties',
                templateUrl: 'parties-list.ng.html',
                controller: 'PartiesListCtrl'
            })
            .state('partyDetails', {
                url: '/parties/:partyId',
                templateUrl: 'party-details.ng.html',
                controller: 'PartyDetailsCtrl'
            });

        $urlRouterProvider.otherwise('/parties');

        //$locationProvider.html5mode(true);
    }]);

    angular.module("socially").controller("PartiesListCtrl", ['$scope', '$meteor', function($scope, $meteor){
        $scope.parties = $meteor.collection(Parties);
        $scope.remove = function(party){
            $scope.parties.remove(party);
        };
        $scope.removeAll = function(){
            $scope.parties.remove();
        };
    }]);

    angular.module("socially").controller('PartyDetailsCtrl', ['$scope', '$stateParams', function($scope, $stateParams){

        $scope.partyId = $stateParams.partyId;

    }]);

}

index.html

<head>
    <base href="/">
</head>
<body>
    <div ng-app="socially">
        <h1>
            <a href="/parties">Home</a>
        </h1>
        <div ui-view></div>
    </div>
</body>

parties-list.ng.html

<form>
    <label>Name</label>
    <input ng-model="newParty.name">
        <label>Description</label>
    <input ng-model="newParty.desc">
    <button ng-click="parties.push(newParty)">Add</button>
</form>

<ul>
    <li ng-repeat="party in parties">
        <a href="/parties/{{party._id}}">{{party.name}}</a>
        <p>{{party.desc}}</p>
        <p>{{party.name}}</p>
        <button ng-click="remove(party)">X</button>
    </li>
</ul>

party-details.ng.html

Here you will see the details of party number: {{ partyId }}

Upvotes: 0

Views: 1242

Answers (1)

below9k
below9k

Reputation: 156

I just started using meteor-angular recently as well. After testing - it looks like your issue was a simple lowercased 'm'. I can see how the '5' could make camel case confusing.

Corrected: $locationProvider.html5Mode(true);

Upvotes: 2

Related Questions