AngularJS ui.routerはテンプレートをロードしません

私はまだAngularJSを学んでおり、UI Routerに問題があります。テンプレートはロードされません。AngularJS ui.routerはテンプレートをロードしません

ここに私のコードです：

<body class="top-navigation" ng-app="mixcontainer"> 

     <div id="wrapper"> 
     Navbar here 
     </div> 
     <div class="row m-b-lg m-t-lg" ng-controller='MainCtrl'> 
     <div ui-view></div> 
     </div> 
    </div> 
    </div> 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> 
<script type="text/javascript" src="app.js"></script> 



</body>

と私の角度app.js：

var app = angular.module('mixcontainer',['ui.router']) 

app.config(function($stateProvider){ 
    var test = { 
     name: 'test', 
     url: '/test', 
     template: '<h3>Hello world</h3>', 
     controller: 'MainCtrl' 
    } 

    $stateProvider.state(test); 
}) 

app.controller('MainCtrl',['$scope','$state','$rootScope', function($scope,$state,$routeScope){ 

}])

私はそれがテンプレートであるかどうかのUIビューを得られませんどのような角度に関係なく、複数回を試していないし、またはtemplateUrl。私はまた、ブラウザやサーバーのコンソールに何のエラーもありません。私は一週間それをしてきたし、それは私をナッツを運転しています。

出典

2017-03-05 RayedB

ご意見やご提案はありますか？ – lin

私の問題は、url localhost：8080/testに直接アクセスしようとしていたことにあります。あなたのコードを試して、それを直接手に入れようとしたが、それはまだ動作しませんでした。しかし、私はnavbarにui-srefリンクを追加しましたが、今はうまくいくようです。ルートを直接「テスト」できないということですか？ – RayedB

これは、フィドルの例のようにうまく動作します、あなたのアプリケーションで何が間違っていますか？ URLを直接呼び出すことができるはずです。 – lin

正しい方法で$stateProvider('nameOfState', configurationObject)を使用してui-routesを作成してみてください。 $stateなどを使用してルートを切り替えます。あなたのコントローラーのロジック内に。ここにはworking fiddle exampleがあります。

var app = angular.module('mixcontainer',['ui.router']) 

app.config(function($stateProvider){ 

    $stateProvider.state("test", { 
     url: "/test", 
     template: "<h3>Hello world</h3>", 
     controller: "MainCtrl" 
    }); 
});

出典

2017-03-05 10:03:43 lin

AngularJS ui.routerはテンプレートをロードしません

答えて

関連する問題