angle-ui-routerが動作しない

私はロードできるが、angle-ui-routerは適切なtemplateURlにルーティングしていないindex.htmlを持っています（app.htmlはindex.htmlと同じdeirectoyにあります）。必要なすべてのスクリプトを追加しているが、それはangle-ui-routerが動作しない

<!DOCTYPE html> 
<html ng-app ="mustReadAlgo"> 
    <head> 
     <title>AngularJS Basic Example</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <link rel="stylesheet" href="lib/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="lib/css/animate.min.css" /> 
     <script type='text/javascript' src="public/lib/moment.min.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../public/lib/lodash.min.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../public/lib/angular/angular.min.js" charset="UTF-8"></script> 


     <script type='text/javascript' src="../../public/lib/angular-sanitize/angular-sanitize.min.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../public/lib/angular-ui-router/release/angular-ui-router.min.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../app.js" charset="UTF-8"></script> 
     <script type='text/javascript' src="../../app/controllers/app.controller.js" charset="UTF-8"></script> 





    </head> 
    <body> 

     <div class="container" ui-view="" ></div> 


    </body> 
</html>

が動作していないと私app.jsは

'use-strict'; 

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

     $urlRouterProvider.otherwise('/'); 

     $stateProvider.state('home',{ 

      url :'/', 
      templateUrl : 'app.html',(is in same directory as of index.html) 
      controller :'mustReadAlgoCntrller' 


     }); 



    }).run(function(){ 


    });

をされ、コントローラコードがapp.controller.jsである

angular.module('mustReadAlgo').controller('mustReadAlgoCntrller',function($scope) 
{ 
    $scope.message='Hello World'; 
    console.log('inside controller'); 
});

app.html

<div class="row"> 
    <div class="col-xs-2"> 
    <button class="form-control btn btn-default"><span class="glyphicon glyphicon-thumbs-up"></span>Hello World</button> 
    </div> 
    <p>Hello</p> 
</div>

しかし、UIルーティングの

内容はtemplateUrlをロードするために正しく動作していませんか？誰かが私を助けてくれることができますか？私は角度の新しいjです。

出典

2016-03-23 k.hit

。 – Lex

よろしいですが、それはhtmlコードで動作するはずですので、それをdispalyする必要があります。私はそこにURLを使用していても、それは働いていません。テンプレートURLを 'app.html' index.htmlはです。 –

エラーが発生しますか？ 'mustReadAlgoCntrller'のタイプミスでしょうか？ – henrikmerlander

テンプレートとして使用するためにまっすぐなHTMLを渡す場合は、ではなくtemplate:を使用する必要があります。 Here are the docs on templates。

出典

2016-03-23 21:43:56 Lex

ありがとう、私はそれを試みます。私はtemplateUrlを使用する質問を編集した。 –

テンプレートを使って試しましたが、うまくいきません。 –

あなたが問題を解決するだろうと、状態構成と$ urlRouterProvider.otherwise機能コントローラで

$stateProvider 
    .state("otherwise", { url : '/'}) 

$urlRouterProvider.otherwise('/otherwise');

出典

2016-03-24 00:05:51

を注入$状態で使用するステート名にそうでない場合のための状態を定義する必要があります。は、それが

angular.module('mustReadAlgo', ['ui.router']).controller('mustReadAlgoCntrller',['$scope', '$state', function($scope, $state) 
{ 
    $scope.message='Hello World'; 
    console.log('inside controller'); 
}]);

出典

2016-03-24 00:11:18

これはどのようにして問題を解決しますか？ OPは 'mustReadAlgoCntrller'コントローラ内で' $ state'を使用していません。 – Lex

あなたは正しいです、私の答えを更新 –

を使用してみてくださいclearer-ようにするには：

<div class="container"> 
    <ui-view></ui-view> 
</div>

//の代わりに：URLのように見えない

<div class="container" ui-view="" ></div>

出典

2016-03-24 00:33:37 Germando

ソースコード内のビューディレクティブの定義で、あなたはrestrict： 'ECA'を読むことができます。このドキュメントでは、抽象ビューを使用するときのの参照があります。 – Germando

angle-ui-routerが動作しない

答えて

関連する問題