Question

我收到一个角度错误：错误：[$ injector：unpr]未知提供者：$ urlRouteProvider

我正在使用ui-router进行路由

我的Html代码：

<html ng-app="myApp">
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="angular.js" type="text/javascript"></script>
    <script src="Controller.js" type="text/javascript"></script>
    <script src="angular-route.js" type="text/javascript"></script>

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

</head>
<body ng-app="myapp">
    <div class="container">
        <header ng-include="'templates/nav.html'"></header>
        <div ui-view></div>
        <footer ng-include="'templates/footer.html'"></footer>
    </div>


</body>

我的模块：

angular.module("myApp", ['ui.router'])
    .config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) {
            $urlRouteProvider.otherwise('/index.html');

            $stateProvider.state("home", {
                url: '/',
                template: "home"
            });
        }]);

我在这里做错了吗？

Answer 1

您需要解决对其他模块的依赖关系，才能使模块正常工作。

所以重新安排你的代码

<html ng-app="myApp">
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="angular.js" type="text/javascript"></script>

    <script src="angular-route.js" type="text/javascript"></script>

    <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
    <script src="Controller.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    </head>
    <body ng-app="myapp">
       <div class="container">
           <header ng-include="'templates/nav.html'"></header>
           <div ui-view></div>
           <footer ng-include="'templates/footer.html'"></footer>
      </div>
 </body>

并将您的依赖关系名称从 $ urlRouteProvider 更改为 $ urlRouterProvider

angular.module("myApp", ['ui.router'])
   .config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {

}]);

Answer 2

首先将ui路由器脚本添加到索引html文件中。

 <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
 <script data-require="ui-router@0.3.1" data-semver="0.3.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>

然后这里也有人物遗失。

更改$urlRouteProvider.otherwise('/index.html');

.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider)

到$urlRouterProvider.otherwise('/index.html');

.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider)

post on stackoverflow

Answer 3

您需要在加载ui路由器参考

后调用controller.js

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="angular.js" type="text/javascript"></script> 
 <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
 <script src="Controller.js" type="text/javascript"></script>

也从

改变

angular.module("myApp", ['ui.router'])
    .config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) {

到

angular.module("myApp", ['ui.router'])
    .config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {

角度错误：错误：[$ injector：unpr]未知提供者：$ urlRouteProvider

3 个答案: