2016-07-31 81 views
0

我想製作菜單並在div部分中顯示我的所有.html文件。 但是,當我點擊鏈接,沒有任何顯示 - 沒有反應。Angular JS路由不會在div上顯示我的html文件

這裏我的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" ng-app="PrincipaleApp"> 

    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <link rel="stylesheet" type="text/css" href="format.css" media="all" /> 

    <title>TitreV3</title> 
    </head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script> 
    <script src="app.js"></script> 
    <script src="controllers.js"></script> 


<body> 

<p class="titre">Titre V3</p> 


<table class="structure"> 
<tr> 
<td class="structuremenu"> 


<div class="menu" ng-init="names=['One','Two','Three','Four','Five']"> 
<table> 
    <tr ng-repeat="x in names"> 
<td> 
{{ x }} 
</td> 
<td><a href="#/{{ x }}_OK">OK</a></td> 
<td><a href="#/{{ x }}_NotOK">KO</a></td> 
    </tr> 
</table> 
</div> 

</td> 
    <td class="structurecontenu"> 
<div ng-view></div>  
</td> 
    </tr> 
</table> 


    </body> 
</html> 

這裏我app.js:

var PrincipaleApp = angular.module('PrincipaleApp', ['ngRoute', 'PrincipaleAppControllers']); 

PrincipaleApp.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
    when('/One_OK', { 
     templateUrl : 'One_OK.html', 
     controller: 'PrincipaleCtrl' 
    }). 
    when('/One_NotOK', { 
     templateUrl : 'One_NotOK.html', 
    }). 
    otherwise({ 
     redirectTo : '/' 
    }); 
}]); 


var lignes = angular.module('PrincipaleApp', []); 

這裏我controllers.js

var PrincipaleAppControllers = angular.module('PrincipaleAppControllers', []); 

PrincipaleAppControllers.controller('PrincipaleCtrl', ['$scope', function ($scope) { 
    $scope.name = 'world'; 
}]); 

這裏One_OK.html

<div ng-controller="PrincipaleCtrl"> 
    <label>Nom :</label> 
    <input type="text" ng-model="name"> 
    <br /> 
    <h2>Hello {{ name }}!</h2> 
</div> 

對我來說,ngroute可以在我的app.js

也許div我的ng-view在表中無法正常工作?

感謝您的幫助:)

回答

0

從代碼中刪除以下行

var lignes = angular.module('PrincipaleApp', []); 

Plunker碼 - https://plnkr.co/edit/FQ0jOQErIhBgTyVQg7mn?p=preview

同一模塊的名字 - PrincipaleApp創建兩次

+0

太好了!其作品 !感謝您抽出一點時間:) – Acid

+0

如果我的文章幫助您的問題,請將其標記爲已回答:) –

+0

關閉課程,但我可以在那裏做什麼?編輯:嗯,我認爲這沒關係? – Acid