CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsnode.js
Gal Sosin
Gal Sosin

Reputation: 734

Routing with angular js

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>

Upvotes: 4

Views: 116

Answers (1)

Minato
Minato

Reputation: 4533

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>

Upvotes: 3

Related Questions