angulaire js problème de routage

Je n'arrive pas à faire fonctionner mon code. Je suis un nouveau sur JS et en essayant de mettre en œuvre un exemple que j'ai trouvé en ligne sur le routage sur angularJs. J'ai passé de nombreuses heures à essayer de le réparer, mais je ne pouvais pas.angulaire js problème de routage

Problème: La vue par défaut (View2) est ouverte par la configuration de $ routeProvider. Cependant, quand je redirige ceci à view2.htm à view1.htm mais la page blanche s'ouvre. S'il vous plaît aider!

HTML CODE

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link href="JS/bootstrap/css/bootstrap-theme.css" rel="Stylesheet" /> 
    <link href="/JS/bootstrap/css/bootstrap-theme.min.css" rel="Stylesheet" /> 
    <link href="JS/bootstrap/css/bootstrap-theme.css.map" rel="Stylesheet" /> 
    <link href="JS/bootstrap/css/bootstrap.css" /> 
    <link href="JS/bootstrap/css/bootstrap.css.map" /> 
    <link href="JS/bootstrap/css/bootstrap.min.css" /> 
    <link href="JS/bootstrap/fonts/glyphicons-halflings-regular.eot" /> 
    <link href="JS/bootstrap/fonts/glyphicons-halflings-regular.svg" /> 
    <link href="JS/bootstrap/fonts/glyphicons-halflings-regular.ttf" /> 
    <link href="JS/bootstrap/fonts/glyphicons-halflings-regular.woff" /> 
</head> 
<script src="JS/jquery-2.1.1.js" language="javascript" type="text/javascript"></script> 

<script src="JS/angular.js" language="javascript" type="text/javascript"></script> 
<script src="/JS/angular-route.js" language="javascript" type="text/javascript"></script> 

<script src="/JS/bootstrap/js/bootstrap.js" language="javascript" type="text/javascript">  
</script> 
<script src="/JS/bootstrap/js/bootstrap.min.js" language="javascript" type="text/javascript">  
</script> 
<body> 
    <title>::DEMO APP:: </title> 
    <div data-ng-app="demoApp1"> 
     <script src="DemoJS.js" language="text/javascript" type="text/javascript"></script> 
     <div class="container"> 
      <h3> 
       All the examples AngularJS Here:</h3> 
     </div> 
     <div class="container-fluid" data-ng-view=""> 
     </div> 
    </div> 
</body> 
</html>

View1.htm Markup

<div id="View1" > 
<h2> 
    Example 4 & 5 
</h2> 
<div class="container"> 
    Name &nbsp;&nbsp;<input type="text" data-ng-model="inputData.name" placeholder="Name" /> 
    <br /> 
    City&nbsp;&nbsp;<input type="text" data-ng-model="inputData.city" placeholder="City" /> 
    <br /> 
    <button class="btn btn-primary" data-ng-click="addCustomer()"> 
     Add Customer</button> 
    <br /> 
    Filter&nbsp;&nbsp;<input type="text" data-ng-model="nameText" placeholder="Filters" /> 
    <br /> 
    <ul> 
     <li data-ng-repeat="customer in customers |filter:nameText">{{customer.name|uppercase}} 
      - {{customer.city}} </li> 
    </ul> 
    <a ng-href="#/View2.htm">View2</a> 
</div> 
</div>

View2.htm Markup

<div id="View2"> 
<h2> 
    Example 1,2 and 3</h2> 
<div class="container"> 
    <h3> 
     Data Binding Fundamentals</h3> 
    <h4> 
     Using a Data Binding Template</h4> 
    Name: 
    <input type="text" data-ng-model="name" placeholder="Type something" />&nbsp;&nbsp; 
    {{ name }} 
</div> 
<h1> 
    Example 2</h1> 
<div data-ng-init="names=['Sunil','Deepak','Rajat','Somu']"> 
    <ul> 
     <li data-ng-repeat="name in names">{{name}}</li> 
    </ul> 
</div> 
<h1> 
    Example 3</h1> 
<div> 
    <h3> 
     Adding a Simple Controller</h3> 
    <ul> 
     <li data-ng-repeat="name in names">{{name}} </li> 
    </ul> 
</div> 
<a ng-href="#/View1.htm">View1</a> 
</div>

DemoJS.js code fichier

var demoApp1 = angular.module('demoApp1', ['ngRoute']) 

demoApp1.config(function ($routeProvider) { 
$routeProvider 
.when('/', 
    { 
     controller: 'SimpleController1', 
     templateUrl: '/View2.htm' 
    }) 
.when('View1', 
{ 
    controller: 'SimpleController', 
    templateUrl: '/View1.htm' 
}); 
}); 


demoApp1.controller('SimpleController1', function ($scope) { 
$scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva']; 
}); 


demoApp1.controller('SimpleController', function ($scope) { 

$scope.customers = [ 
        { name: 'Sunil', city: 'Delhi' }, 
        { name: 'Ritu', city: 'Shbad' } 
        ]; 

$scope.addCustomer = function() { 
    $scope.customers.push({ name: $scope.inputData.name, city: $scope.inputData.city }); 
} 
});

Source

2014-09-16 Sunil Mehta

Essayez d'utiliser

Questions connexes