Angular routing for newbie

Question

I've just started learning angular & creating the first app. Help me please with routing.

Folder Structure

spa/ index.html controllers/ controllers.js images/ javascript/ app.js resources/ angular-route.js angular.js views/ cars.html home.html login.html profile.html

The pages from "/views" are not displayed. Here's my code.

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('/');
});

Controller

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

})

Swimburger · Accepted Answer · 2015-10-01 10:51:21Z

2

Once you create app module in app.js like angular.module('app', ['ngRoute']) You shouldn't recreate the app module in controller.js again which will flush all the initial registered component like here you did .config block for router settings.

It should be

angular.module('app')

instead of

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

Additionally login anchor should be #/login instead of #Login because $routerProvider has condition on login. Also notice there should be a slash after the hash in the href.

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

edited Oct 1, 2015 at 10:51

Swimburger

7,2546 gold badges41 silver badges68 bronze badges

answered Oct 1, 2015 at 10:25

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

wrath1888 Over a year ago

Pankaj, i've changed code according to your answer. I see e.g. "index.html#login" in the end of my address bar. But how can I get the content of my views to index.html?

Swimburger Over a year ago

@АнтонШомин, notice the answer is updated, try #/login

wrath1888 Over a year ago

<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> Still do not get content of views

wrath1888 Over a year ago

And i have the most newbiest question. Should i have a server configured to do that? My application will read & write data from JSON located in the application folder

Swimburger Over a year ago

@wrath1888 I know it's been some time but I revisited this question and found some more issues. I recreated your setup and made sure everything works. The answer has been updated. Better late than never I guess.

|

Collectives™ on Stack Overflow

Angular routing for newbie

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related