угловой js routing problem

Я не могу заставить мой код работать. Я новичок в JS и пытаюсь реализовать некоторый пример, который я нашел онлайн по маршрутизации на angularJs. Я потратил много часов, пытаясь исправить это, но не смог.угловой js routing problem

Редакция: Вид по умолчанию (View2) открывается конфигурацией $ routeProvider. Однако, когда я перенаправляю это на view2.htm на view1.htm, открывается пустая страница. Пожалуйста, помогите!

HTML КОД

<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 код файла

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 }); 
} 
});

источник

2014-09-16 Sunil Mehta

Сэр попробуйте использовать

Смежные вопросы