Angular.js基本路由

Question

我一直在关注本教程：

https://thinkster.io/angular-rails#angular-routing

我还没有进行任何Rails集成，这个问题是针对角度的。

当我不使用路由器从MainCtrl打个招呼世界时，一切正常。 使用路由器时，无法获取嵌入式角度模板以显示在html页面中。 错误在哪里？

app.js：

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

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: '/home.html',
      controller: 'MainCtrl'
    });

  $urlRouterProvider.otherwise('home');
}])

angular.module('flapperNews', [])
.controller('MainCtrl', [
'$scope',
function($scope){
  $scope.test = 'Hello world';
}]);

index.html：

<html>

  <head>
    <title>My Angular App</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="flapperNews">

    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <ui-view></ui-view> <!-- this is supposed to display the template below but it shows nothing -->
      </div>
    </div>

    <script type="text/ng-template" id="/home.html">
      <div class="page-header">
        <h1>Flapper News</h1>
      </div>
    </script>
  </body>

</html>

Answer 1

您的控制器正在重新创建模块，而不是引用它。 像这样更改它：

angular.module('flapperNews')
.controller('MainCtrl', [
'$scope',
function($scope){
  $scope.test = 'Hello world';
}]);

Answer 2

您要两次定义“ flapperNews”模块。 删除第二个angular.module（'flapperNews'，[]）。

Angular.js基本路由

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-09-12 20:23:01

解决方案2
0 2016-09-12 20:23:20

Angular.js基本路由

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-09-12 20:23:01

解决方案2 0 2016-09-12 20:23:20

解决方案1
3 已采纳 2016-09-12 20:23:01

解决方案2
0 2016-09-12 20:23:20