AngularJS routing without webserver?

Question

I'm trying to create a simple website using angular as front-end.

Is there a way to create partial views and routing without having a webserver?

I've been trying to do so, but I keep getting this error: Uncaught Error: [$injector:modulerr]

Here's my code: index.html

<!DOCTYPE html>
<html lang="en" ng-app="cerrajero">
<head>
    <meta charset="UTF-8">
    <title>Cerrajero</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>


</head>
<body ng-controller="MainCtrl">

    <div ng-view></div>


    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>


    <script src="js/app.js"></script>

    <script type="text/ng-template" id="partials/contact.html" src="partials/contact.html"></script>
    <script type="text/ng-template" id="partials/services.html" src="partials/services.html"></script>
    <script type="text/ng-template" id="partials/home.html" src="partials/home.html"></script>

</body>
</html>

and the app.js:

var app = angular.module('cerrajero', []);

    app.config([function ($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.
            when('/services', {
                template: 'partials/services.html'
            }).
            when('/contact', {
                template: 'partials/contact.html'
            }).
            when('/home', {
                template: 'partials/home.html'
            }).
            otherwise({
                redirectTo: '/home',
                template: 'partials/home.html'
            });
    }]);

function MainCtrl ($scope) {

};

What am I doing wrong?

edit

I've added the ngRoute but I still get the same error when I open the index.html file in the browser.

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

    app.config([function ($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.
            when('/services', {
                template: 'partials/services.html'
            }).
            when('/contact', {
                template: 'partials/contact.html'
            }).
            when('/home', {
                template: 'partials/home.html'
            }).
            otherwise({
                redirectTo: '/home',
                template: 'partials/home.html'
            });
    }]);

function MainCtrl ($scope) {

};

edit 2

Here's the files on github:

https://github.com/jsantana90/cerrajero

and here's the website when it loads:

http://jsantana90.github.io/cerrajero/

edit 3

I've manage to get rid of the error by having the following code:

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

app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(false);
    $routeProvider.
        when('/services', {
            template: 'partials/services.html'
        }).
        when('/contact', {
            template: 'partials/contact.html'
        }).
        when('/home', {
            template: 'partials/home.html'
        }).
        otherwise({
            redirectTo: '/home',
            template: 'partials/home.html'
        });
}]);

app.controller('MainCtrl', function ($scope) {

});

I added this app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {

But now my page is blank. It doesn't redirects or anything.

Have I placed everything how it's suppose to go?

edit 4

I forgot to change ui-view to ng-view. Now it works but it's showing in the view: partials/home.html instead of the actual view.

edit 5

Ok so, after having this final code:

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

app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
    $routeProvider.
        when('/services', {
            templateUrl: './partials/services.html'
        }).
        when('/contact', {
            templateUrl: './partials/contact.html'
        }).
        when('/home', {
            templateUrl: './partials/home.html'
        }).
        otherwise({
            redirectTo: '/home'
        });
}]);

app.controller('MainCtrl', function ($scope) {

});

I get this error:

XMLHttpRequest cannot load file:///partials/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Now I'm guessing this is because I don't have a webserver running. How do I get it to work without a webserver?

solution

When I uploaded the files to github it seems to work there, but not locally.

AngularJS routing without webserver? – Danny Fardy Jhonston Bermúdez Nov 13 '15 at 14:11 — Danny Fardy Jhonston Bermúdez, Nov 13 '15 at 14:11

score 4 · Answer 1 · answered Nov 13 '15 at 14:03

4

Looks like you are using ngRoute and forgot to include it!

First load angular-route.js after loading angular.js. The inject ngRoute as a module:

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

answered Nov 13 '15 at 14:03

Tarun Dugar

8,921
8
42
79

I'm still getting the same error when I open up the `index.html` file in my browser. – Johhan Santana Nov 13 '15 at 14:08
Did you include angular-route.js AFTER angular.js? – Tarun Dugar Nov 13 '15 at 14:09
Yes, it's there, after `angular.min.js` – Johhan Santana Nov 13 '15 at 14:09
Then it should work, probably an error elsewhere. You'll have to provide a plunkr. – Tarun Dugar Nov 13 '15 at 14:10
Can I upload to github? – Johhan Santana Nov 13 '15 at 14:13
Ok, I added the links in the question – Johhan Santana Nov 13 '15 at 14:26

score 1 · Answer 2 · answered Nov 13 '15 at 14:25

1

You should use ui-router instead of ng-route. It will allow you to nest views. Most current Angular projects use ui-router. ui-router scotch.io

Also, for your controller try app.controller('MainCtrl', function($scope){...});

answered Nov 13 '15 at 14:25

I've tried it, seems to work but it gives me this error: `XMLHttpRequest cannot load Cross origin requests are only supported for protocol schemes` I'm trying to create a website without a webserver, I'm using angular js just so I don't have to repeat the navigation or footer in every html file – Johhan Santana Nov 13 '15 at 14:47
Yup, you said that, "without a webserver". Did you push the latest changes to github? – Nov 13 '15 at 14:54
there's a commit with ui-router, but the last commit I reverted back to ngRouter – Johhan Santana Nov 13 '15 at 15:01
Alright cool! i'm gonna play around with for a few and let you know if I breakthrough with anything. – Nov 13 '15 at 15:03
I've think I did it, but now it shows in the view `partial/home.html' instead of the actual partial. I've uploaded the latest changes you can view the website: http://jsantana90.github.io/cerrajero/ – Johhan Santana Nov 13 '15 at 15:03
Maybe it was just setting HTML 5 mode to false. – Nov 13 '15 at 15:10
I've done some changes now I get Xmlhttprequest errors – Johhan Santana Nov 13 '15 at 15:21
1

So I'm pretty sure you're getting the Xmlhttprequest errors because you're running the file locally. Is that also occurring from your github pages site? – Nov 13 '15 at 15:54
Omg, didn't know lol, it's actually working right now, thank you! – Johhan Santana Nov 13 '15 at 16:02

score 1 · Accepted Answer · answered Nov 13 '15 at 15:12

Try removing the array syntax brackets from inside your config function. I believe there are two different ways of invoking these functions, either with a standalone function or with an array for any minification processes.

You should either one of the following:

app.config(function ($locationProvider, $routeProvider) {
    // your code here
});

Or define the variable names with the array syntax for use in minifiers

app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
    // your code here
}]);

When you pass in an array to the config function, I believe Angular is expecting the first parameters to be a string value.

score 0 · Answer 4 · answered Nov 13 '15 at 14:06

0

Replace

var app = angular.module('cerrajero', []);

with

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

answered Nov 13 '15 at 14:06

Aqdas

868
4
16
57

AngularJS routing without webserver?

4 Answers4

Linked