Question

的index.html

<html ng-app="studentApp">
<head>
  <meta charset="utf-8">
  <title>Angular.js Example</title>
  <script type="text/javascript" src="https://code.angularjs.org/1.4.0/angular.min.js"></script>

  <script src="https://code.angularjs.org/1.4.0/angular-route.min.js"></script>
  <script src=".././app/component/studentApp.module.js"></script>
  <script src=".././app/component/studentApp.route.js"></script>
  <script src=".././app/component/list/list.ctrl.js"></script>
  <script src=".././app/component/list/list.html"></script>
  <script src=".././app/component/list/list.factory.js"></script>

  <link rel="stylesheet" type="text/css" href="../app/assets/style.css">
</head>

<body>
<div class="header">
  <h1>Welcome to my AngularJS Web App</h1>
  <h2>Angular JS UI</h2>
</div>


<div ui-view> </div>

<div class="footer"style="bottom: 0px">
  <h2>This is my footer</h2>
  <h3>Copyright</h3>
</div>
</body>

</html>

studentApp.route.js

angular.module('studentApp').config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('list');

  $stateProvider

    .state('list', {
        url: '/list',
        templateUrl: '.././component/list/list.html',
        controller: 'studentCtrl'
      })
});

studentApp.module.js

//(function (){
    "use strict";
    angular.module('studentApp', [
        'ui.router'
        ])
//}());

list.ctrl.js

angular.module('studentApp').controller('studentCtrl', function($scope,$state ,$http) {

    alert("here");

});

Directory Structure

我尝试在 index.html 中加载 list.html ，但每次都失败。

我收到错误：

未捕获的SyntaxError：意外的令牌＆lt;

未捕获错误：[$ injector：modulerr]

Answer 1

在index.html中，您加载了angular-route.min.js，这是AngularJS的默认路由管理器。

您的代码想要使用angular-ui-router.min.js，这是一个受欢迎的routing library。

尝试替换

<script src="https://code.angularjs.org/1.4.0/angular-route.min.js"></script>

带

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>

Answer 2

您的应用设置存在一些问题。

每个子模块（控制器，服务等）都需要拥有自己的模块名称。所以你的子模块应该是这样的：

<强> list.ctrl.js

angular.module('studentApp.controller', [])
.controller('studentCtrl', function($scope,$state ,$http) {

    alert("here");

});

<强> studentApp.route.js

angular.module('studentApp.route', [])
.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('list');

  $stateProvider

.state('list', {
    url: '/list',
    templateUrl: '.././component/list/list.html',
    controller: 'studentCtrl'
  })
});

然后你需要将子模块注入主模块：

<强> studentApp.module.js

angular.module('studentApp', ['studentApp.route', 'studentApp.controller', 'ui.router'])

然后，正如其他答案所提到的，您需要更改库，因为您使用的是ui-router而不是Angular的默认路由器。

Answer 3

https://code.angularjs.org/1.4.0/angular-route.min.js是路由提供程序，它是angular js中的默认路由器。

既然你想要stateprovider，那么看看这个有助于使用stateprovider的github

https://github.com/angular-ui/ui-router

Answer 4

除了其他两个答案外，

请删除<script src=".././app/component/list/list.html"></script>

如果您需要在Index.html中包含list.html，请执行

<script type="text/ng-template" id="../../app/component/list/list/html">
content
<script/>

请确保此路径正确无误。 templateUrl: '.././component/list/list.html',不应该有两个..而不是1？

AngularJS无法加载视图

4 个答案: