angular-ui-router funktioniert nicht

Ich habe index.html, die ich laden kann, aber angular-ui-router ist nicht Routing zu richtigen templateURl (app.html ist in derselben deirectoy wie von index.html) .I alle erforderlichen Skript hinzugefügt haben, aber es funktioniert nichtangular-ui-router funktioniert nicht

<!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>

Und mein app.js ist

'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(){ 


    });

Und Code-Controller ist in app.controller.js

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

Inhalt des 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>

Aber ui Routing funktioniert nicht richtig die templateUrl zu laden? Kann mir bitte jemand helfen, ich bin neu in eckigen js.

Quelle

2016-03-23 k.hit

Das ist nicht wie eine URL aussieht. – Lex

Ja, aber es sollte funktionieren, es ist ein HTML-Code, so sollte es das anzeigen. Selbst wenn ich eine URL dort ist es nicht funktioniert.Sagen, wenn ich Vorlage Url als 'app.html' hinzufügen, die an der gleichen Stelle ist wo index.html ist. –

Haben Sie Fehler? Vielleicht ein Tippfehler in 'mustReadAlgoCntrller'? – henrikmerlander

Wenn Sie gerade HTML zur Verwendung als Vorlage übergeben, müssen Sie template:, nicht templateUrl: verwenden. Here are the docs on templates.

Quelle

2016-03-23 21:43:56 Lex

Danke, ich werde versuchen, dass. Sorry, ich habe die Frage bearbeitet, um TemplateUrl zu verwenden. –

Ich habe es mit Vorlage versucht, aber das funktioniert nicht so gut. –

Sie benötigen einen Zustand sonst in der Zustandskonfiguration und die Verwendung der state in der $ urlRouterProvider.otherwise Funktion

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

$urlRouterProvider.otherwise('/otherwise');

Quelle

2016-03-24 00:05:51

Inject $ Zustand in der Steuerung zu definieren, die das Problem lösen würde. Um es klarer ist

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

Quelle

2016-03-24 00:11:18

Wie wird das Problem gelöst? Das OP verwendet innerhalb des 'mustReadAlgoCntrller'-Controllers nicht den '$ state'. – Lex

Sie haben Recht, meine Antwort zu aktualisieren –

Versuchen Sie es mit:

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

// statt:

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

Quelle

2016-03-24 00:33:37 Germando

Bei der Definition der View-Anweisung im Quellcode können Sie lesen beschränken: 'ECA'. In der Dokumentation ist eine Referenz für bei Verwendung von abstrakten Ansichten. – Germando

angular-ui-router funktioniert nicht

Antwort

Verwandte Themen