CODEWITHSUNDEEP
javascriptangularjs
Johhan Santana
Johhan Santana

Reputation: 2425

AngularJS routing without webserver?

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) {

};

enter image description here

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.

Upvotes: 1

Views: 2795

Answers (4)

BowlerDo0d
BowlerDo0d

Reputation: 72

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.

Upvotes: 1

user5250554
user5250554

Reputation:

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){...});

Upvotes: 1

Aqdas
Aqdas

Reputation: 940

Replace

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

with

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

Upvotes: 0

Tarun Dugar
Tarun Dugar

Reputation: 8971

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']);

Upvotes: 4

Related Questions