javascript - Using $stateProvider and ui.router in AngularJS -
working through tutorial on angularjs meteorjs, have run issues ui.router, $stateprovider, , $locationprovider.
my issues that, far can tell, should wired routing, links don't work. contents of main files below, first more information problem:
the problem seems line //$locationprovider.html5mode(true); in app.js. commented out, allows page load, doesn't route links properly. if uncomment it, page returns following error:
uncaught error: [$injector:modulerr] failed instantiate module socially due to: typeerror: undefined not function i assume in reference $locationprovider being undefined. looks lot dependency injection error, can't find dependency injection errors. 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 see details of party number: {{ partyid }}
i started using meteor-angular well. after testing - looks issue simple lowercased 'm'. can see how '5' make camel case confusing.
corrected: $locationprovider.html5mode(true);
Comments
Post a Comment