1

I've started with Angular routes and Express together. When i click a route link, url change but nothing happens, Here is my code.When i click on a href , it change my url with something like that "http://localhost:3000/#!#%2Fhome" and nothing happens. i have tried changing the href without the "/" and "#" but nothing changed. 

<html>
 <head>
   <base href="/" />
   <meta charset="utf-8">
   <title>Squared</title>
   <link rel="stylesheet" href="/css/skeleton.css">
   <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
   <div class="app-wrapper" ng-app = "myapp">
    <div class="row app">
     <div class="left">
         <div class="left-search-wrapper">
           <input type="text" name="search-bar" value="" placeholder="Search">
         </div>
        <div class="left-image-wrapper">
            <img src="images/profilepic.png" class="left-image">
        </div>
        <div class="left-menu-wrapper">
            <ul>
              <li><a href="#/home">Home</a></li>
              <li><a href="#/messages">Messages</a></li>
              <li><a href="#/friends">Friends</a></li>
              <li><a href="#/settings">Settings</a></li>
            </ul>
        </div>

    </div>
    <div class="columns eight right">
      <div ng-view></div>

      <script type="text/ng-template" id= "home.html">
        <h2>Home</h2>
      </script>
      <script type="text/ng-template" id= "messages.html">
        <h2>messages</h2>
      </script>
      <script type="text/ng-template" id= "friends.html">
        <h2>friends</h2>
      </script>
      <script type="text/ng-template" id= "settings.html">
        <h2>settings</h2>
      </script>
     </div>
    </div>
   </div>



 <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
 <script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
 </body>
</html>

this is my app.js

var app = angular.module("myapp", ["ngRoute"]);
app.config(["$routeProvider", function($routeProvider){
 $routeProvider
   .when("/home", { templateUrl: "home.html"})
   .when("/messages", { templateUrl: "messages.html"})
   .when("/friends", { templateUrl: "friends.html"})
   .when("/settings", { templateUrl: "settings.html"});
 }]);

this is my Express server.js

var express = require("express");
var app = express();
var path = require("path");


app.use(express.static(__dirname));

function routeHandler(app){
  app.get("/", function(req, res){
      res.sendFile(__dirname + "/index.html");
  });
}

routeHandler(app);
app.listen(3000);

this is my project directory organization:

  • Root Folder
    • index.html
    • app.js
    • server.js
    • node_modules
    • images
    • css
PazzoTotale
  • 411
  • 2
  • 5
  • 14
  • Possible duplicate of [angularjs 1.6.0 (latest now) routes not working](http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working) – georgeawg Dec 31 '16 at 17:17

3 Answers3

0

You should use "ng-href" rather than "href", since following the "href" before the binding resolves can result in a bad link

digit
  • 4,479
  • 3
  • 24
  • 43
  • app.get('/home', function(req, res){ console.log("here") res.render('home.html') } consoleand check whether the control is reaching there or not – sac Dahal Dec 31 '16 at 11:44
  • 1
    @sacDahal, the route itself is broken. He need to encode the url first in order to get there. Try using html5 mode or encode the url programmatically. There is already same question like this before. 1 of this http://stackoverflow.com/questions/16630912/angular-js-route-doesnt-match-component-with-2f-encoded – digit Dec 31 '16 at 12:03
0

Ok, now it works. I solved the problem by adding "$locationProvider.html5Mode(true);" now there is another problem: when i reload a url i receive a "Cannot get message"

PazzoTotale
  • 411
  • 2
  • 5
  • 14
-1

define a template Url and handle it in your server and render the page. 

  .when("/home", { templateUrl: "/server/home"})

the url should route and match in your server side. And in your server.js 

app.get('/home', function(req, res){
res.render('home.html')
})
sac Dahal
  • 1,191
  • 2
  • 13
  • 37