app.js

Question

我正在尝试使用ui.router而不是ngRoute，我无法弄清楚问题是什么。

在我的控制台中我得到了这个：

angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=capValueRecruitApp&…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%3A19%3A381)

app.js

var capValueRecruitApp = angular.module('capValueRecruitApp', ['ui.router']);

capValueRecruitApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'views/home.html'
    })
    .state('about', {
      url: '/about',
      templateUrl: 'views/about.html'
    });
  $urlRouterProvider.otherwise('/home');
});

的index.html

<body ng-app="capValueRecruitApp" class="theme-style-1">
<!--WRAPPER START-->
<div id="wrapper">
  <!--HEADER START-->
  <header id="header" class="header-2 header-3">
    <div class="container">
      <!--NAVIGATION START-->
      <div class="navigation-col">
        <nav class="navbar navbar-inverse">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav" id="nav">
              <li><a href="#/home" data-path="/home">Home</a></li>
              .... Some code
              <li><a href="#/about" data-path="/about">Contact</a></li>
   ...Some code
  <div id="main"><div ui-view></div></div>
  ...Some code
<!--JQUERY MIN JS-->
<script src="../scripts/js/jquery-1.11.3.min.js"></script>
<!--BOOTSTRAP JS-->
<script src="../scripts/js/bootstrap.min.js"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
</body>

在我的观看文件夹中，我有about.html和home.html。

当我搜索它时，我在stackoverflow中发现了类似的问题：

您正在尝试使用$ stateProvider和$ urlRouterProvider 来自“ui.router”，并没有注入依赖 “ui.router”。

Answer 1

你在哪里加载app.js？在<head></head>？

确保您的装货单是：

Angular.js
UI-Router.js
AppScripts.js

如果您在依赖项之前加载app.js，则会因模块不可用而出错。

e.g。

<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<!-- THIS IS IMPORTANT! -->
<script src="app.js"></script>

使用ui.router而不是ngRoute

app.js

的index.html

1 个答案: