Angular.js routing not working

Question

Angular is working as I can see the {{ text }} but I can't seem to get the ng-view to display.

My code is:

index.html:

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-app='app'>
    <div class="main_container" ng-controller="MainController">
    <span ng-cloak>{{text}}</span>
    <div ng-view></div>
    </div>

    <!-- modules -->
    <script src='app.js'></script>
    <!-- controllers -->
    <script src='MainController.js'></script>
    <script src='home.js'></script>     
  </body>
</html>

home.js:

app.controller('home', function($scope) {
    $scope.words = 'It works!';
});

MainController:

app.controller('MainController',function($scope){
    $scope.text = 'Hello World!';
});

home.html:

<div ng-controller="home">
    <h3>{{ words }}</h3>
</div>

app.js:

var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
    $routeProvider.
        when('/index',{
            templateUrl: 'home.html',
            controller: 'home'
        }).
        otherwise({
            redirectTo: '/index' 
        });
     //$locationProvider.html5Mode(true);
});

edit: It seems to work in plunker but when I open the file in chrome I get the following error:

"XMLHttpRequest cannot load {{file location}}. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."

you don't need to hardcode your controller in home.html, it is already loaded with the view. Any errors in the console? — Michelangelo
– Michelangelo, Commented May 13, 2015 at 16:15
Your home controller should be named HomeController so you are consistent. — Luca
– Luca, Commented May 13, 2015 at 16:53

hartz89 · Accepted Answer · 2015-05-13 16:54:57Z

1

You don't need the ng-controller attribute on your root element in home.html because you are already defining the controller for that template when you set up your $routeProvider. Beyond that your code looks good. If you really want to get ahead of the game, though, I would recommend using UI Router if you plan to do any advanced routing in your application. It is much more robust and easier to work with than Angular's ngRoute, widely used, and well-documented.

answered May 13, 2015 at 16:54

hartz89

6691 gold badge6 silver badges19 bronze badges

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

Comments

Alhuck · Accepted Answer · 2015-05-13 16:51:33Z

0

Your Code is working fine !! there may be problem on which file to load first so please take care of the order of the files added in your HTML

Here is the working plunker with your code. here ng-view loads with no problem

http://embed.plnkr.co/oNADizOltrGitbWTWNXf/preview

Hope this helps!!!

answered May 13, 2015 at 16:51

Alhuck

1,0298 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular.js routing not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related