Routing with angular js

Question

My server using angular for routing. My server sending to the browser a HTML file that contains js file with routing (using angular js).

my server code (send to browser check.html contains the routing file main.js) :

var express = require("express");
var app = express(); // express.createServer();
app.use(express.static(__dirname + '/public'));
app.get("/*", function(request, response) {
    response.sendFile(__dirname + '/public/check.html');
});

app.listen(8080);

check.html code:

<html data-ng-app="myApp">
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript" src="angular-route.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
    </body>
</html>

after the browser gets the check.html file he doesnt redirect it to main.js in order to use the routing. I tried to debug it but the browser is stuck without doing nothing. my app is local and the url im trying to connect to is:

http://localhost:8080/stations

and all the files are loaded correctly without any errors on the console.

main.js code:

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

myApp.config(function($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'HomeController',
                templateUrl: 'menu.html'
            })
        .when('/stations',
            {
                controller: 'StationsController',
                templateUrl: 'check2.html'
            })
        .when('/',
            {
                controller: 'HomeController',
                templateUrl: 'menu.html'
            })
        .otherwise({redirectTo: '/'});
});

myApp.controller('StationsController', function($scope){
    $scope.check = {name:"ELAD!!"};
});

check2.html code:

<html>
<head>
</head>
<body>
    <div>
        <p>{{check.name}}</p>
    </div>
</body>
</html>

what does the console tells you ? and check that your .js files contains really html content, and not the content of check.html — anotherdev
– anotherdev, Commented Jan 3, 2016 at 14:43
@GalSosin That's a frequent misconception to mix the server and client side when new to angular — Minato
– Minato, Commented Jan 3, 2016 at 15:29

Minato · Accepted Answer · 2016-01-03 14:46:20Z

Ok let's start fresh on angular..

Angular 101

You may know angular is essential for Single Page Application so what happens is you supply the first page that is check.html in your case but you should name it index.html it's a convention. khair.. what happens is when a route transition occurs in the your angular code that is something after # an it's purely client end or a soft redirection. so angular fires an AJAX request to retrieve the resource matching your templateUrl from router. then plugs it inside the <div ng-view></div> thus the redirection. notice the ng-view.

Well bellow is the proposed solution

the link should be http://localhost:8080/#stations as the angular matches handles the routes after #. Other routes like the link you provided are handed to the server.

your check.html should look like this.

<html data-ng-app="myApp">
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript" src="angular-route.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <div ng-view></div>
    </body>
</html>

and your check2.html should be in your public directory and have the code like

<div>
   <p>{{check.name}}</p>
</div>

Collectives™ on Stack Overflow

Routing with angular js

1 Answer 1

Angular 101

Well bellow is the proposed solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Angular 101

Well bellow is the proposed solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related