У меня возникли проблемы с запуском моего первого приложения AngularJS. Когда я запускаю приложение, все объекты в моем индексе отображаются правильно. Когда я нажимаю на свою гиперссылку, чтобы перейти к view-2, все объекты отображаются в HTML, как обычный текст {{object.property}} Что я делаю неправильно?Контроллер AngularJS работает только с первого взгляда

Это мой index.html:

<DOCTYPE html> 
<html ng-app="tutorialApp"> 
<head> 
<meta charset="UTF-8"> 
<title> Tutorial App</title> 
<script src="lib/angular.min.js"></script> 
<script src="lib/angular-route.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/controllers/MyController.js"></script> 
</head> 
<body> 

<div ng-view></div> 

</body> 
</html> 
</DOCTYPE>

это мой app.js:

var app = angular.module('tutorialApp', ["ngRoute", "MyControllerModule"]) 

    app.config(function ($routeProvider){ 

     $routeProvider 

      .when("/", { 
       controller: "MyController", 
       templateUrl: "views/one.html" 
      }) 


      .when("/two", { 
       controller: "ControllerTwo", 
       templateUrl: "views/two.html" 
      }) 

      .otherwise({ 
       redirectTo: "/" 
      }); 
    });

это мой MyController.js:

angular.module("MyControllerModule", []) 

.controller("MyController", ["$scope", function($scope){ 

$scope.myFirstObject = {}; 
$scope.myFirstObject.title = "Main Page"; 
$scope.myFirstObject.subTitle = "Sub Title"; 

$scope.myFirstObject.bindOutput = 13; 

$scope.myFirstObject.firstname = "Wheelchair"; 
$scope.myFirstObject.lastname = "Terminator"; 

$scope.timesTwo = function(){ 
    $scope.myFirstObject.bindOutput *= 2; 
} 

}]) 

.directive("myFirstDirective", function(){ 
    return { 
     restrict: "E", 
     template: "<div>Hello how are you?</div>" 
    } 
}) 

.controller("ControllerTwo", ["$scope", function($scope) { 
    $scope.testObject = {}; 
    $scope.testObject.doSomething = "TEST TEST TEST TEST TEST!"; 

} 
]);

Это мой/views/one.html:

<h1>{{myFirstObject.title}}</h1> 
<h2>{{myFirstObject.subTitle}}</h2> 

<p>Number: {{2 + 2}}</p> 
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p> 
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p> 

<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br> 

<br> 
<label>First Name:</label> 
<input ng-model="myFirstObject.firstname"> 
<br> 
<label>Last Name:</label> 
<input ng-model="myFirstObject.lastname"> 
<br> 
<a href="views/two.html">CLICK HERE FOR SECOND VIEW</a> 
<br> 
<br> 
<br> 
<my-first-directive></my-first-directive>

это мой /views/two.html

<h1>Second View</h1> 
<h2>this is the second view...</h2> 
<br> 
<br> 

<p>Call object string: {{testObject.doSomething}}</p>

источник

2017-02-21 eekje87

нажмите '' f12' и открытым console', у вас есть некоторые ошибки, и вставить эту ошибку в вопросе. – Sravan

он не показывает ничего в консоли, когда я поменяться с one.html на two.html (FireFox отладчик) – eekje87

откройте консоль и обновите страницу, вы получите, чтобы увидеть ошибки – Sravan

Изменение href к маршруту. Не html-страница.

<a href="views/two.html">CLICK HERE FOR SECOND VIEW</a>

Это должно быть

<a href="#/two">CLICK HERE FOR SECOND VIEW</a>

Как вы сделали в этом вопросе, который вызывает новую HTML-страницу для загрузки в браузер. Не шаблон углового приложения. Итак, все неизвестные вещи, такие как {{object.property}}, происходят.

источник

2017-02-21 11:47:53 SaiUnique

Я сделал именно то, что вы сказали, и когда я нажимаю на гиперссылку, теперь ничего не происходит на той же странице, но URL-адрес браузера изменяется на: http: // localhost: 8080/#!/#% 2Ftwo – eekje87

Попробуйте следующее: 'href =" #!/two "' – SaiUnique

ДА ЭТО РАБОТАЕТ! Ничего себе, спасибо миллион .. наконец, можно продолжить с моим учебником: D – eekje87

Использование,

<a href="#two">CLICK HERE FOR SECOND VIEW</a>

Наблюдайте, href="#two"

<h1>{{myFirstObject.title}}</h1> 
<h2>{{myFirstObject.subTitle}}</h2> 

<p>Number: {{2 + 2}}</p> 
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p> 
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p> 

<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br> 

<br> 
<label>First Name:</label> 
<input ng-model="myFirstObject.firstname"> 
<br> 
<label>Last Name:</label> 
<input ng-model="myFirstObject.lastname"> 
<br> 
<a href="#two">CLICK HERE FOR SECOND VIEW</a> 
<br> 
<br> 
<br> 
<my-first-directive></my-first-directive>

Check this reference

EDIT:

Вы, кажется, есть проблема с # URL,

Решение:

HTML5 Режим

Конфигурация:

$routeProvider 
    .when('/two', { 
    templateUrl: 'views/two.html', 
    }); 
$locationProvider 
    .html5Mode(true);

Вы должны установить базу в HTML-файле

<html> 
    <head> 
    <base href="/"> 
    </head> 
</html>

В этом режиме вы можете использовать ссылки без # в HTML файлах

<a href="/two">link</a>

пример:

http://test.com/base/two

источник

2017-02-21 12:09:27 Sravan

Пребывание на том же самом взгляде только URL-адрес браузера изменяется на: http: // localhost: 8080/#!/# Two – eekje87

@ eekje87, проверить измененный ответ, – Sravan

Контроллер AngularJS работает только с первого взгляда

ответ

HTML5 Режим

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