Angular.js基本的な私は、チュートリアルを追っている

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

私はまだレールの統合を行っていないが、問題は、具体的な角度にあります。

ルータを使用せずにMainCtrlからhello worldを実行すると、すべて動作します。ルータを使用すると、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>

出典

2016-09-12 HoosierCoder

お使いのコントローラがモジュールを再作成の代わりに、それを参照しています。次のように変更してください。

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

出典

2016-09-12 20:23:01 Malk

私はあなたが提案したようにコントローラを変更しました。まだが表示されません。これをあなたのマシンで動作させることができますか？ – HoosierCoder

https://plnkr.co/edit/JqiT2SMNfcntFaz0wQsD?p=preview – Malk

hmmm ..どのマシンでもローカルで実行することはできません。プランナーでは、モジュールを再作成しないようにangular.module（ 'flapperNews'）だけを変更しましたか？他の変更はありませんか？ – HoosierCoder

「flapperNews」モジュールを2回定義しています。 2番目のangular.module（ 'flapperNews'、[]）を削除します。

出典

2016-09-12 20:23:20 alexvance

テンプレートを表示するためにがまだ削除されていません。 – HoosierCoder

plunkrでビルドすると、@HoosierCoderをデバッグするのに役立ちます – alexvance

ありがとうございました！ https://plnkr.co/edit/cIzVEc?p=streamer – HoosierCoder

Angular.js基本的な私は、チュートリアルを追っている

答えて

関連する問題