$ routeProvider、angularjsで注入、レジスタをクリックすると、単にURLの変更を誤り

を識別することができないとregister.htmlにtakedやコンテンツを表示されない

Screenshot

htmlファイル

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> 
<script src="Script/Scc.js"></script> 
</head> 
<body ng-app="sampleApp"> 
First Name<input type="text" ng-model="reg.firstName" /><br /> 
Last Name<input type="text" ng-model="reg.lastName" /> <br />   
<a href="#Register"> Register </a> 
</body>

Scc.js

var sampleApp = angular.module('sampleApp', ['ngRoute']); 
sampleApp.config(['$routeProvider', 
function ($routeProvider) { 
    $routeProvider. 
    when('/#Register', { 
     templateUrl: '/register.html', 
     controller: 'registerController' 
    }) 
    }]); 
sampleApp.controller('registerController', function ($scope,$route) { 
var reg = { 
    firstName: 'Mmm', 
    lastName: 'Nnn', 
}; 
$scope.reg = reg; 
});

register.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<h2>Registration</h2> 
First Name is{{ reg.firstName }}<br /> 
Last Name is {{reg.lastName}} 
</body> 
</html>

ないテキストボックスの内容を取得し、register.htmlでそれを表示することができ...

出典

2016-05-27 praveenkrishp

あなたが場所を示すために、あなたのhtmlでng-viewディレクティブを必要としますテンプレートを注入する必要があります。 <div ng-view></div>のようなものです。

あなたのregister.htmlは完全なHTMLドキュメントであってはならないので、注入する必要のあるデータのみを含む部分テンプレートにする必要があります。

そして、あなたがルートで#を必要としません：

when('/Register', { 
    templateUrl: '/register.html', 
    controller: 'registerController' 
});

は、テンプレートへのパスが正しいことを確認してください。

出典

2016-05-27 11:33:25

hii、あなたはng-viewとHTML docについてより具体的になりますか？ – praveenkrishp

@PraveenKrishnaP register.htmlには、 ''の中の現在の内容のみが含まれている必要があります。 https://docs.angularjs.org/api/ngRoute/directive/ngView –

あなたが言ったように変更を行った、TJ、結果[リンク]（https://i.imgsafe.org/834cce0df7.png）を参照してください。 Plz hav a look .. – praveenkrishp

$ routeProvider、angularjsで注入、レジスタをクリックすると、単にURLの変更を誤り

答えて

関連する問題