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
– Danny Fardy Jhonston Bermúdez

2015-11-13 14:11:06 +00:00
Commented Nov 13, 2015 at 14:11 — Danny Fardy Jhonston Bermúdez
– Danny Fardy Jhonston Bermúdez, Commented Nov 13, 2015 at 14:11

Tarun Dugar · Accepted Answer · 2015-11-13 14:03:49Z

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, 2015 at 14:03

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

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

6 Comments

Johhan Santana Over a year ago

I'm still getting the same error when I open up the index.html file in my browser.

Tarun Dugar Over a year ago

Did you include angular-route.js AFTER angular.js?

Johhan Santana Over a year ago

Yes, it's there, after angular.min.js

Tarun Dugar Over a year ago

Then it should work, probably an error elsewhere. You'll have to provide a plunkr.

Johhan Santana Over a year ago

Can I upload to github?

|

BowlerDo0d · Accepted Answer · 2015-11-13 15:12:19Z

1

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.

answered Nov 13, 2015 at 15:12

BowlerDo0d

721 silver badge5 bronze badges

Comments

user5250554 · Accepted Answer · 2015-11-13 14:25:33Z

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, 2015 at 14:25

user5250554

9 Comments

Johhan Santana Over a year ago

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

user5250554 Over a year ago

Yup, you said that, "without a webserver". Did you push the latest changes to github?

Johhan Santana Over a year ago

there's a commit with ui-router, but the last commit I reverted back to ngRouter

user5250554 Over a year ago

Alright cool! i'm gonna play around with for a few and let you know if I breakthrough with anything.

user5250554 Over a year ago

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?

|

Aqdas · Accepted Answer · 2015-11-13 14:06:09Z

0

Replace

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

with

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

answered Nov 13, 2015 at 14:06

Aqdas

1,0404 gold badges18 silver badges64 bronze badges

Collectives™ on Stack Overflow

AngularJS routing without webserver?

4 Answers 4

6 Comments

Comments

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related