Пример angular.js не работает в codepen и в локальной среде

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#red">Red</a>
<a href="#green">Green</a>
<a href="#blue">Blue</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
    .when("/blue", {
        templateUrl : "blue.htm"
    });
});
</script>

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>

Этот приведенный выше фрагмент скопирован с http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing, он работает там, но при копировании и вставке в codepen http://codepen.io/anon/pen/oYMrwy не работает. Я что-то упускаю?


javascript html css angularjs codepen
person Ron Woltz    schedule 11.12.2016    source источник
comment
у вас тоже есть шаблоны? (main.html и т. д.)   -  person Vladimir M    schedule 11.12.2016
comment
нет у меня нет шаблонов   -  person Ron Woltz    schedule 11.12.2016
comment
Я добавил blue.htm, но он все еще не работает...   -  person Ron Woltz    schedule 11.12.2016
comment
У маршрутизации Angular.js есть проблема   -  person Ron Woltz    schedule 11.12.2016
comment
см. ответ ниже. Это не маршрутизация. это компилятор шаблона, который выдавал вам консольную ошибку.   -  person Vladimir M    schedule 11.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Ну... попробуйте этот код. Я заменил все отсутствующие шаблоны встроенными шаблонами. Вам просто не хватает файлов.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#red">Red</a>
<a href="#green">Green</a>
<a href="#blue">Blue</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        template : "main"
    })
    .when("/red", {
        template : "red"
    })
    .when("/green", {
        template : "green"
    })
    .when("/blue", {
        template : "blue"
    });
});
</script>

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
person Vladimir M    schedule 11.12.2016
comment
Но я хочу использовать templateUrl. - person Ron Woltz; 11.12.2016
comment
тогда все файлы html на месте. вам нужно найти main.html, red.html, blue.html и green.html. Этот фрагмент просто показывает, что ваша маршрутизация в порядке. - person Vladimir M; 11.12.2016
comment
Что ж... вот вам пример плунжера с шаблонами. Это работает. plnkr.co/edit/r8Mmem0w3WCof3R9Pikk?p=preview Вы должны использовать консоль разработчиков для смотрите, чего не хватает. - person Vladimir M; 11.12.2016