Загрузить представление с помощью ng-view в index.html

Question

Загрузить представление с помощью ng-view в index.html

0

У меня три страницы. Я хочу загрузить их в ng-view. Когда пользователь нажимает на страницу, соответствующая страница должна загружаться. Я установил routerProvider но это не сработало.

//HTML

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="learningApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    ul li{ float: left; list-style: none; margin: 0 10px}
</style>
</head>

<body>
<nav>   
    <ul><li><a href="#home">home</a></li><li><a href="#about">about</a></li><li><a href="#service">service</a></li></ul>
</nav>  



    <div ng-view></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

</body>
</html>

//Код приложения.js

(function(){
  var app= angular.module('learningApp',['ngRoute'])

  app.config(['$routeProvider',function($routeProvider){
  $routeProvider.
               when('/home', {
                  templateUrl: 'home.html'
               }).
               when('/aboutus', {
                  templateUrl: 'aboutus.html'

               }).
               when('/service',{
                templateUrl:'service.html'
               }).
               otherwise({
                  redirectTo: '/home'
               });

  }])

})

Carlos 20 июль 2015, в 16:15

Источник

0

Необработанная ошибка: [$ инжектор: modulerr] errors.angularjs.org/1.4.3/$injector/…… ogleapis.com% 2Fajax% 2Flibs% 2Fangularjs% 2F1.4.3% 2Fangular.min.js% 3A19% 3A339)
Carlos 20 июль 2015, в 14:12
1

Я выясняю проблему. На самом деле я не вызывал свою анонимную функцию
Carlos 20 июль 2015, в 14:22
0

Add () в последней строке app.js. Это должно быть похоже на}) (); Это не написано как IIFE
Ajay Kumar 20 июль 2015, в 15:21

Показать ещё 1 комментарий

Теги:

javascript

angularjs

2 ответа

0

Если нет ошибок консоли, я думаю, вам нужно использовать тег, как, a

обратите внимание на дополнительные / после #

<a href="#/home">home</a>
<a href="#/about">about</a>

K.Toress 20 июль 2015, в 11:31

0

Подскажите, как добавить индексацию ссылки в URL
Carlos 20 июль 2015, в 14:28

Ещё вопросы

Необработанная ошибка: [$ инжектор: modulerr] errors.angularjs.org/1.4.3/$injector/…… ogleapis.com% 2Fajax% 2Flibs% 2Fangularjs% 2F1.4.3% 2Fangular.min.js% 3A19% 3A339)
Я выясняю проблему. На самом деле я не вызывал свою анонимную функцию
Add () в последней строке app.js. Это должно быть похоже на}) (); Это не написано как IIFE
Подскажите, как добавить индексацию ссылки в URL

Ajay Kumar · Accepted Answer · 2015-07-20T11-33-00.000Z

Все выглядит хорошо, но у вас проблемы с вашими якорь-href's.

Изменить:

<nav>   
    <ul><li><a href="#home">home</a></li><li><a href="#about">about</a></li><li><a href="#service">service</a></li></ul>
</nav>

Для того, чтобы:

<nav>   
    <ul><li><a href="#/home">home</a></li><li><a href="#/about">about</a></li><li><a href="#/service">service</a></li></ul>
</nav>

Я заметил, что моя консоль показывает ошибку. Необработанная ошибка: [$ инжектор: modulerr] errors.angularjs.org/1.4.3/$injector/……ogle‌ apis.com% 2Fajax% 2Flibs% 2Fangularjs% 2F1.4.3% 2Fangular.min.js% 3A19% 3A339