在Angularjs中实现UI路由器的问题

时间：2021-12-04 11:39:35

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.

我正在一个个人网站上工作，并在我尝试使用ui路由时使用以下类型的代码，以便我可以转到详细信息页面并无缝地返回列表页面。

app.js:

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:

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 ?

知道我在这里做错了吗？

1 个解决方案

#1

6  

You do not inject a provider in a controller. Remove $urlRouterProvider from your dependencies being inject in controller. It will work

您不在控制器中注入提供程序。从正在注入控制器的依赖项中删除$ urlRouterProvider。它会工作

#1

6  

You do not inject a provider in a controller. Remove $urlRouterProvider from your dependencies being inject in controller. It will work

您不在控制器中注入提供程序。从正在注入控制器的依赖项中删除$ urlRouterProvider。它会工作

标签：

相关文章