Страница не обновляется в Angular

Я создаю веб-сайт тестового проекта, используя угловые (обучение) и ng-view, не обновляется, когда я нажимаю на Test на странице index.html. Я искал последние 2 часа в Интернете и попробовал несколько решений, и ничего не получилось. Пожалуйста, помогите, что я делаю неправильно!Страница не обновляется в Angular

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <!-- Angular References --> 
    <script src="Scripts/angular.min.js"></script> 
    <script src="Scripts/jcs-auto-validate.min.js"></script> 
    <script src="Scripts/angular-route.min.js"></script> 
    <!-- Bootstrap Core CSS --> 
    <script src="Scripts/jquery-1.9.1.min.js"></script> 
    <script src="Scripts/bootstrap.min.js"></script> 
    <link href="Content/bootstrap.min.css" rel="stylesheet" /> 
    <link href="Content/font-awesome.min.css" rel="stylesheet" /> 
    <!-- CSLMS App Angular References --> 
    <script src="CSLMS_app/app.js"></script> 
    <script src="CSLMS_app/Recipe_Values/ConstantValues.js"></script> 
    <script src="CSLMS_app/Controllers/indexController.js"></script> 
    <!-- Style Sheets --> 
    <link href="Content/Site.css" rel="stylesheet" /> 
</head> 
<body ng-app="CSLMS_app"> 
    <div ng-controller="indexController"> 
     <!-- Top Navigation --> 
     <nav class="navbar navbar-dark bg-primary navbar-fixed-top" > 
      <div class="container-fluid"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">CS-LMS</a> 
       </div> <!-- /.navbar-header --> 
       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav"> 
         <li><a class="navbar-brand" href="#">Dashboard</a></li> 
         <li><a class="navbar-brand" href="#/Test">Test</a></li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown"> 
          <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{user.username}}<span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a href="javascript:;">Links</a></li> 
           <li><a href="javascript:;">Edit Profile</a></li> 
           <li role="separator" class="divider"></li> 
           <li><a href="javascript:;">Logout</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
     </nav> 

     <div ng-view></div> 

    </div> 
</body> 
</html>

test.html

<div ng-controller="TestController"> 
    <h1>test Pagerr</h1> 
    <br /> 
    {{message}} 

    <script src="../CSLMS_app/Controllers/testController.js"></script> 
</div>

app.js

'use strict'; 

//var app = angular.module('CSLMS_app', ['jcs-autoValidate', 'ngRoute']); 
var app= angular.module('CSLMS_app', ['jcs-autoValidate', 'ngRoute']); 


app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when("/Login", { 
     templateUrl: "Pages/Login.html", 
     controller: "loginController" 
    }) 
    .when("/Test", { 
     templateUrl: "Pages/Test.html", 
     controller: "testController" 
    }) 
    .otherwise({ redirectTo: '/Test' }) 
}]);

testController.js

'use strict'; 
app.controller('testController', ['$scope', '$route', function ($scope, $route) { 
    $scope.message = "Test "; 
}])

indexController.js

'use strict'; 
app.controller('indexController', ['$scope', function ($scope) { 
    $scope.somedata = "That"; 
}]);

источник

2017-01-25 mspelly

У вас есть ошибки в консоли? – Mistalis

Вы можете использовать $ location.replace ('/ test') –

Проверьте, есть ли у вас какие-либо ошибки в консоли, однако попытались ли вы удалить источник сценария из Test.html и поместить его на страницу index.html? – LookForAngular

Только предположение, но вы можете захотеть, чтобы переместить это:

<script src="../CSLMS_app/Controllers/testController.js"></script>

из test.html и в <head> на элемент index.html , Я подозреваю, что это одна проблема. Их может быть больше, но я бы это сделал.

источник

2017-01-25 14:34:04

Сделал это и без разницы – mspelly

Вы забыли загрузить свой скрипт для testController. Добавьте эту строку в свой index.html:

<script src="CSLMS_app/Controllers/testController.js"></script>

источник

2017-01-25 14:38:56 Mistalis

Hi Mistalis. Этот скрипт был загружен в мой файл Test.html, но удалил его и переместил в файл index.html. Все равно никаких различий и ошибок в консоли. Есть идеи!!! – mspelly

Будет ли это проблемой - я запускаю VS2015 и IIS Express. Я читал, что ng-route нужен веб-сервер -? – mspelly

Страница не обновляется в Angular

ответ

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