角错误：错误：[$注射器：unpr]未知提供商：$ urlRouteProvider

我得到一个角度错误：错误：[$注射器：unpr]未知提供商：$ urlRouteProvider

我使用的UI路由器进行路由

我的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" 
      }); 
     }]);

我在这里做什么错了？

来源

2017-03-21 punith gowda

这是'$ urlRouterProvider'，被R :) – Phugo

首先添加UI路由器脚本索引HTML文件。

<script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
<script data-require="[email protected]" 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)

Demo

来源

2017-03-21 06:37:23

感谢伴侣！工作。 –

@punith gowda没有概率兄弟一定要标记是正确的答案，如果这有帮助 –

你需要调用后加载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) {

来源

2017-03-21 06:26:26 Sajeetharan

尝试。还是行不通。 –

您需要解决您的其他依赖模块，供您的模块使用。

因此重新安排你的代码

<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) { 

}]);

来源

2017-03-21 06:32:09

非常感谢。 –

你可以感谢我upvote，快乐编码:) –

角错误：错误：[$注射器：unpr]未知提供商：$ urlRouteProvider

回答

相关问题