Угловая маршрутизация для новичков

Я только начал изучать угловой &, создавая первое приложение. Помогите мне, пожалуйста, с маршрутизацией.Угловая маршрутизация для новичков

Структура папок

сп/ index.html контроллеров/ controllers.js изображения/ JavaScript/ app.js ресурсов/ углового route.js angular.js просмотров/ cars.html home.html login.html profile.html

Страницы с "/ views" не отображаются. Вот мой код.

index.html

<!DOCTYPE html> 
<html lang="en" data-ng-app="app"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>5 Angular</title> 
    <script src="resources/angular.js"></script> 
    <script src="controllers/controller.js"></script> 
    <script src="javascript/app.js"></script> 
    <script src="resources/angular-route.js"></script> 
    </head> 
    <body ng-controller="mainCtrl"> 
    <nav> 
     <ul class="navbar"> 
     <li> 
      <a href = "#home">Home</a> 
     </li> 
     <li> 
      <a href = "#Login">Login</a> 
     </li> 
     <li> 
      <a href = "#profile">Profile</a> 
     </li> 
     <li> 
      <a href = "#cars">Cars</a> 
     </li> 
     </ul> 
    </nav> 
    <ng-view></ng-view> 
    </body> 
</html>

cars.html

<h1>Cars Page</h1>

home.html

<h1>Home Page</h1>

login.html

<h1>Login Page</h1>

profile.html

<h1>Profile Page</h1>

app.js

angular.module('app', ['ngRoute']) 
.config(function($routeProvider, $locationProvider){ 
$routeProvider 
.when('/', { 
templateUrl: 'views/home.html' 
}) 
.when('login', { 
templateUrl: 'views/login.html' 
}) 
.when('cars', { 
templateUrl: 'views/cars.html' 
}) 
.when('profile', { 
templateUrl: 'views/profile.html' 
}) 
otherwise('/'); 
});

Контроллер

angular.module('app', ['ngRoute']) 
.controller("mainCtrl",function($scope){ 

})

источник

2015-10-01 wrath1888

После создания модуля приложения в app.js как angular.module('app', ['ngRoute']) Вы не должны воссоздать модуль приложения в controller.js снова, который смоет все первоначальный зарегистрированный компонент, как здесь вы сделали .config блок для настройки маршрутизатора.

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

angular.module('app')

вместо

angular.module('app', ['ngRoute'])

Кроме того login якорь должен быть #/login вместо #Login потому $routerProvider имеет состояние на login. Также обратите внимание, что после хэша в href должна быть косая черта.

<a href = "#/login">Login</a>

источник

2015-10-01 10:25:30

Pankaj, я изменил код в соответствии с вашим ответом. Я вижу, например. "индекс.html # login "в конце моей адресной строки, но как я могу получить содержимое своих просмотров в index.html? – wrath1888

@ АнтонШомин, обратите внимание, что ответ обновлен, попробуйте #/login – sniels

Все еще не получают содержание просмотров – wrath1888

Угловая маршрутизация для новичков

ответ

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