AngularJSアプリでルーティングが機能していません

anglejsアプリケーションを作成していますが、ルーティング部分が機能していません。AngularJSアプリでルーティングが機能していません

app.js

/** 
* Created by gupta_000 on 7/19/2016. 
*/ 
'use strict'; 
var myApp = angular.module('myApp',[ 
'Controllers','ngRoute' 
]); 
myApp.config(['$routeProvider', 
function($routeProvider) { 
    $routeProvider. 
    when('/main', { 
     templateUrl: 'Login.html', 
     controller: 'LoginCtrl' 
    }). 
    when('/home/student', { 
     templateUrl: 'index.html', 
     controller: 'DictionaryController' 
    }). 
    otherwise({ 
     redirectTo: '/main' 
    }); 
}]);

私は場所以下ですべての私のカスタムファイルをアップロードしました。

http://plnkr.co/edit/mi2JS4y2FfMD9kIl58qk?p=catalogue

私は..事前に

感謝をangular.jsと角度-route.jsなどのようなすべての依存ファイルをすでに含まれています。

出典

2016-07-20 Harish Gupta

私はこれが生産現場ではないことを願っています。クライアント側で検証を行っているので、ミニプロジェクトだけでいいと思います。 **その悪い練習** –

こんにちはラマン、私は私の練習のためのサンプルプロジェクトを作っています。 –

ここにはworking plunker based on your code.あなたの設定に基づいてngRouteが置き換えるng-viewがありません。だから、index.htmlには、次のようになります。

<body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
    <ng-view></ng-view> 
    </body>

NG-ビューは、メインのレイアウトファイルに現在のルートのテンプレート（/メインまたは/ホーム/学生）が含まれますアンギュラディレクティブです。つまり、ルートに基づいてファイルを取得し、それをメインレイアウト（index.html）に挿入します。

設定では、ng-viewはLogin.htmlを指す 'main'に置き換えられます。 1がでログインしている場合、私は、それはあなたの例のように

var app = angular.module('plunker', ['ngRoute', 'Controllers']); 

app.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
    when('/main', { 
     templateUrl: 'Login.html', 
     controller: 'LoginCtrl' 
    }). 
    when('/home/student', { 
     templateUrl: 'dic.html', 
     controller: 'DictionaryController' 
    }). 
    otherwise({ 
     redirectTo: '/main' 
    }); 
    } 
]); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
});

をindex.htmlを指すように使用されるような無限ループを避けるために、新しいページ「dic.html」を指すように '/ /ホーム/学生変更します電子メールなどの「ハリッシュ」とパスワードとして「ハリッシュ」、successCallbackが呼び出され、dic.htmlでNG-ビューを置き換える「/ホーム/学生」に移行する。

$scope.validate = function() { 
     $http.get('credentials.json').then(function successCallback(response) { 
     // this callback will be called asynchronously 
     // when the response is available 
     console.log('Data: ' + JSON.stringify(response)); 
     $scope.users = response.data; 

     var count = 0; 
     for (var i = 0, len = $scope.users.length; i < len; i++) { 
      if ($scope.username === $scope.users[i].username && $scope.password === $scope.users[i].password) { 
      alert("login successful"); 
      count = count + 1; 
      if ($scope.users[i].role === "student") { 
       $location.path('/home/student'); 
       break; 
      } 
      } 
     } 

     if (count != 1) { 
      alert("Please provide valid login credentials"); 
      $location.path("/main") 
     } 

     }, function errorCallback(response) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     console.log("Error: " + JSON.stringify(response)); 
     alert(JSON.stringify(response)); 
     }); 

    };

たちがあれば教えてくださいそれは助ける。

出典

2016-07-20 03:52:09 Gregori

ありがとうグレゴリ、本当に助かった!! –

ng-appのindex.htmlにng-viewを追加する必要があります。今 <body ng-app="myApp"> <ng-view></ng-view> </body>

...のような

何かあなたのルートの設定によって定義されるように、角度のアプリがng-viewディレクティブの内部では、ビューテンプレートとコントローラを割り当てます。

また、すべての依存関係が含まれている汎用index.htmlを持っていて、テンプレートをレンダリングして、ルート設定に従ってコントローラーを割り当てます（&）。 index.htmlとlogin.htmlのように、依存関係をすべて含むファイルを別々に作成する必要はありません。

出典

2016-07-20 05:39:56

こんにちはVishwajeet、ありがとう、あなたの助言のために、それは本当に私のために役立つ！ –

コントローラに$ locationを挿入していません。

app.controller('MainCtrl', function($scope, $http, $location) { 
    $scope.name = 'World'; 
});

出典

2016-07-20 05:53:29

AngularJSアプリでルーティングが機能していません

答えて

関連する問題