由于以下原因无法实例化模块启动器:TypeError:$ stateProvider.state不是函数

时间:2017-10-04 06:14:39

标签: javascript angularjs

我是Angular的新手。我试图在服务器上运行该应用程序,我将此视为错误。

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
TypeError: $stateProvider.state is not a function

我的app.js是

angular.module('starter', ['ngRoute','ui.router', 'ngAnimate','controllers', 'services'])
.config(['$urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('college', {
    url: '/college',
    templateUrl: 'html/colleges.html',
    controller: 'collegeCtrl'
  })
  $urlRouterProvider.otherwise('/college');
 }]);

我的index.html页面如下所示

 <!DOCTYPE html>
 <html>
 <head>
 <!--Import Google Icon Font-->
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <!--Import materialize.css-->
 <link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" />
 <link type="text/css" rel="stylesheet" href="css/style.css" />
 <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
 <!--Import jQuery before materialize.js-->
 <script type="text/javascript" src="node_modules/angular/angular.js"></script>
 <script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
 <script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>

 <script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 <script type="text/javascript" src="materialize/js/materialize.min.js">
 </script>
 <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
 <!--controllers -->
 <script type="text/javascript" src="controllers/collegeCtrl.js"></script>
 <!--Services -->
 <script type="text/javascript" src="services/httprequestService.js">
 </script>
 <!--Let browser know website is optimized for mobile-->
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body ng-app="starter">
<div class="content">
<div ui-view ng-class="transition">
  default content
 </div>
</div>
</body>
 </html>

colleges.js

 angular.
 module('controllers',[]).
 controller('collegeCtrl', function ($scope,$state) {

 });

我真的不明白出了什么问题。我已经用Google搜索了解决方案的错误,但它没有用完。

2 个答案:

答案 0 :(得分:1)

你可以试试这个

<html lang="en" ng-app="starter">

答案 1 :(得分:0)

试试这个:

.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) { 
 ...
}

无论你注入的是什么,都应该是相同的顺序,否则它可能是依赖注入不匹配的那种问题