2017-01-21 19 views
0

私の簡単なルータは、私のapp.jsUiルータが動作していませんか?ここでは、動作するようには思えdoesntの

var module = angular.module('ngFirstApp',['ui.router']); 

module.config(function($stateProvider, $urlRouterProvider) { 
     $stateProvider.state("home",{ 
      url: "/home", 
      template: "This is home" 
     }); 
}); 

module.controller('ngController',function($scope){ 
     $scope.greeting = 'hello world'; 
}); 

で、私のHTMLは、この

<!DOCTYPE html> 
<html ng-app="ngFirstApp"> 
<head> 
    <meta charset="utf-8"> 
    <title>My first app in Angular js</title> 

    <link rel="stylesheet" href="js/libs/bootstrap-css-only/bootstrap.min.css"> 
    <link rel="stylesheet" href="js/libs/bootstrap-css-only/bootstrap-theme.min.css"> 
</head> 
<body ng-controller="ngController"> 
    <div> 
     <h1>{{ greeting }}</h1> 
     What the heck is goin on here!! 
     <div ui-view></div> 
    </div> 
    <!-- This is angularjs itself --> 
    <script type="text/javascript" src="js/libs/angular/angular.js"></script> 

    <!-- These came from cdnjs angular-ui-bootstrap --> 

    <script type="text/javascript" src="js/libs/angular-bootstrap/ui-bootstrap.min.js"></script> 
    <script src="js/libs/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 

    <!-- Ui router --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.0/angular-ui-router.min.js"></script> 
    <!-- These are custom files --> 
    <script type="text/javascript" src="app.js"></script> 

</body> 
</html> 

私はローカルホストに行くです:それは家に帰ることができないと言って、3000 /家?私のコードで何が間違っていますか。please noob angularjs

+0

を文句を言うでしょう、このローカルホストを試す:3000 /#/ホーム私は実際に '$ urlRouterProvider.otherwise( '/ホーム')を入れてみました –

+0

おかげ;'今では、 '#を追加しているようです!/ home'と大丈夫だと思われますが、html5modeについて知っています(true)これはこれを修正しますか?再びurヘルプのおかげで – Chopnut

答えて

0

私たちがangularjsを学習しているときに解決策が見つかりました。

あなたがルートを使用していて、あなたはあなたがurlRouterProvider.otherwise('/your-default-state');

を配置する必要がありますので、あなたが#!/state-hereを得るいけない状態

localhost:2311/words-not-set-in-your-state-declaration

などのために設定haventはURLで入力html5モードを次のように正確にオンにする必要があります。

$locationProvider.html5Mode({enabled:true,requireBase: false}); 

いいえTは$locationProvider.html5Mode(true);そうでない場合は、ブラウザのコンソールが:)

関連する問題