I am working on a personal site and have the following sort of code where I am trying to have ui routing so that I can go to details page and come back to the list page seamlessly.
app.js:
(function(){
var app = angular.module('store', [
'ngCookies',
'ui.router'
]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/list")
$stateProvider
.state('list', {//State demonstrating Nested views
url: "/list",
templateUrl: "productList.html"
})
.state('details', {//State demonstrating Nested views
url: "/details",
templateUrl: "details.html"
})
}]);
app.controller('StoreController', ['$http', '$scope', '$cookies', '$urlRouterProvider', '$window', function($http, $scope, $cookies, $window, $urlRouterProvider){
//bunch of functionality/code here
})();
index.html:
<html ng-app="store">
<head>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"></link>
<link href="css/products.css" type="text/css" rel="stylesheet"></link>
<script src="include/angular.js" type="text/javascript"></script>
<script src="include/angular-cookies.js" type="text/javascript"></script>
<script src="include/angular-ui-router.js" type="text/javascript"></script>
<script src="include/app.js" type="text/javascript"></script>
<title>
Online Store
</title>
<style>
.floating-box {
display: inline-block;
width: 300px;
height: 450px;
margin: 10px;
border: 3px solid #73AD21;
vertical-align: top;
}
.after-box {
border: 3px solid red;
}
</style>
</head>
<body ng-controller="StoreController as store">
<header>
<h1 class="text-center">Online Store</h1>
<ul class="nav nav-pills">
<li><a ui-sref="details">Details</a></li><!--State Transition on click-->
<li><a ui-sref="list">List</a></li><!--State Transition on click-->
</ul>
<p></p>
</header>
<div class="row">
<div class="span12">
<div class="well" ui-view></div><!--Content of the above defined business & portfolio states will be injected here -->
</div>
</div>
<div class="floating-box" ng-repeat="product in store.products">
//show products
</div>
</body>
I am getting the following error message:
Error: [$injector:unpr] Unknown provider: $urlRouterProviderProvider <- $urlRouterProvider <- StoreController
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=%24urlRouterProviderProvider%20%3C-%20%24urlRouterProvider%20%3C-%20StoreController
at angular.js:68
at angular.js:4418
at Object.getService [as get] (angular.js:4571)
at angular.js:4423
at getService (angular.js:4571)
at injectionArgs (angular.js:4595)
at Object.invoke (angular.js:4617)
at $controllerInit (angular.js:10027)
at nodeLinkFn (angular.js:8965)
at compositeLinkFn (angular.js:8333)(anonymous function) @ angular.js:13424(anonymous function) @ angular.js:10137Scope.$apply @ angular.js:17130bootstrapApply @ angular.js:1713invoke @ angular.js:4625doBootstrap @ angular.js:1711bootstrap @ angular.js:1731angularInit @ angular.js:1616(anonymous function) @ angular.js:30709trigger @ angular.js:3127defaultHandlerWrapper @ angular.js:3417eventHandler @ angular.js:3405
extensions::uncaught_exception_handler:8 Error in event handler for (unknown): SyntaxError: Unexpected token u
at chrome-extension://hobijieodegdbpakkfiopclcljnomfnj/ylc.js:120:23handler @ extensions::uncaught_exception_handler:8(anonymous function) @ extensions::uncaught_exception_handler:100EventImpl.dispatch_ @ extensions::event_bindings:376EventImpl.dispatch @ extensions::event_bindings:393target.(anonymous function) @ extensions::SafeBuiltins:19publicClass.(anonymous function) @ extensions::utils:94dispatchOnMessage @ extensions::messaging:310
Any idea what I am doing wrong here ?
