2015-02-25 2 views
0

Привет, ребята, я только начал изучать Angular JS, и у меня возникла проблема с загрузкой содержимого со страниц. Я не получаю никакого контента. Это мой индекс и мой JS код:Как направить страницы на AngularJS

index.html

<html ng-app="app"> 
<head> 
    <title>My App</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
</head> 

<body> 

    <div class="container"> 
     <header> 
      <h1>Text 1</h1> 
      <h2>Text 2</h1> 
      <nav> 
       <a href="#/">Home</a> 
       <a href="#/exterior">Exterior</a> 
       <a href="#/interior">Interior</a> 
       <a href="#/gallery">Gallery</a> 
       <a href="#/form">Form</a> 
       <a href="#/live-preview">Live</a> 
      </nav> 
     </header> 

     <div ng-view> 
      <!-- Content here --> 
     </div> 

     <footer> 
      2015 
     </footer> 
    </div> 

    <script type="text/javascript" src="js/app.js"></script> 
    <script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular.js"></script> 
    <script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-route.js"></script> 
</body> 

app.js

var app = angular.module('app', ['ngRoute']); 

app.config(['$routeProvider', function($routes) { 

    $route.when('/',{ 
    templateUrl : '/views/index.html' 
    }); 

    $route.when('/exterior',{ 
    templateUrl : '/views/exterior.html' 
    }); 

    $route.when('/interior',{ 
    templateUrl : '/views/interior.html' 
    }); 

    $route.when('/gallery',{ 
    templateUrl : '/views/gallery.html' 
    }); 

    $route.when('/form',{ 
    templateUrl : '/views/form.html' 
    }); 

    $route.when('/live-preview',{ 
    templateUrl : '/views/live-preview.html' 
    }); 

    $routes.otherwise({ 
    redirectTo : '/' 
    }); 

}]); 

Мои все страницы уже созданы в виде файлов и контента, как это

внешний вид.html

<div> 
    <h2>Exterior</h2> 
    <p>My content here</p> 
</div> 
+0

Просто интересно, вместо $ маршрутов положить $ routeProvider. – dowomenfart

+0

Просто интересно, почему же вы не объединили методы? – dowomenfart

+0

Я получаю это в консоли [Ошибка] Ошибка: [$ injector: modulerr] Не удалось создать приложение модуля из-за: [$ injector: nomod] Модуль «приложение» недоступен! Вы либо ошибочно написали имя модуля, либо забыли загрузить его. Если регистрация модуля гарантирует, что вы укажете зависимости в качестве второго аргумента. –

ответ

0

Проблема заключается в этих строках ниже

<script type="text/javascript" src="js/app.js"></script> 
    <script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular.js"></script> 
    <script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-route.js"></script> 

Вы включая app.js до того angular.js и угловой -route.js.

Включите эту опцию в нижней части и проверьте еще раз

<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular.js"></script> 
<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-route.js"></script> 
<script type="text/javascript" src="js/app.js"></script> 

Существует еще одна ошибка в скрипте: Вы вызываете $ маршрут вместо $ маршрутов.

Позвольте мне знать, если это полезно

+0

сейчас я получаю эту ошибку Ошибка: [$ compile: tpload] Не удалось загрузить шаблон: /views/external.html –

+0

проверить, существует ли этот шаблон – Yameen

+0

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

0

ли работа, если вы строите вам .config вот так:

app.config(function($routeProvider) { 

    $routeProvider 
    .when('/', { 
    templateUrl : '/views/index.html' 
    }) 
    .when('/exterior', { 
    templateUrl : '/views/exterior.html' 
    }) 
    .when('/interior', { 
    templateUrl : '/views/interior.html' 
    }) 
    .when('/gallery', { 
    templateUrl : '/views/gallery.html' 
    }) 
    .when('/form', { 
    templateUrl : '/views/form.html' 
    }) 
    .when('/live-preview', { 
    templateUrl : '/views/live-preview.html' 
    }) 
    .otherwise({ 
    redirectTo : '/' 
    }); 

}); 
+0

нет, его же, ничего не изменилось –

+0

@logicltd Как насчет сейчас? Я изменил некоторые вещи –

+0

Алан, который будет бросать ошибки. Выньте полуколоны для цепных методов. – dowomenfart

0

angular.module ('MODULENAME', [ 'ngRoute']);

проверить зависимость и добавить исходный файл угловой route.js в index.html

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