AngularJS - Not working when adding ng-view

Question

Here is my index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
    <script src="app.js"></script>
    <title>TESTS</title>
</head>
<body ng-app="testApp">
<a href="#link">Testing angularjs routing</a>
<div ng-view>{{message}}</div>
<div ng-controller="TestController">{{message}}</div>
</body>
</html>

And here is app.js:

var testApp = angular.module('testApp', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl:'index.html',
                controller: 'TestController'
            }).when('/link', {
                templateUrl:'link.html',
                controller:'LinkController'
            });
    });
testApp.controller('TestController', function ($scope) {
    $scope.message = "INDEX";
});
testApp.controller('LinkController', function ($scope) {
   $scope.message = "LINK";
});

I'm trying to make routing work, but my link not clickabble at all, despite the fact that it looks like a normal link. Second message showing "INDEX", so I think problem in ng-view, because if I delete line with ng-view link become clickable again! I don't have a clue whats wrong!

can you add a plunker? I copied your code I am getting clickable link — Mritunjay
– Mritunjay, Commented Jul 8, 2014 at 11:51

Jens · Accepted Answer · 2014-07-08 11:57:36Z

There is quite a few things wrong with your code.

Actually, it's not that your link don't work, it's that your crashing the browser by introducing an infinite loop. This is because you point your view to 'index.html' when the route is '/'.

So when you start, your loading index.html, which then loads index.html in it's ng-view, which then loads index.html in it's view, which then loads index.html... and so goes the wheel...

You also have some content in your ng-view, this will be replaced by the actual view you load.

Finally you using your TestController both on a view and in your index.html, which isn't illegal, but I doubt it would make much sense in any application... I could be wrong though.

So overall, it's sort of a mess. Here is a working example: http://plnkr.co/edit/MrdAKu86S3RoreQhO14H?p=preview

var testApp = angular.module('testApp', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl:'home.html',
                controller: 'TestController'
            }).when('/link', {
                templateUrl:'link.html',
                controller:'LinkController'
            });
    });
testApp.controller('TestController', function ($scope) {
    $scope.message = "INDEX";
});
testApp.controller('LinkController', function ($scope) {
   $scope.message = "LINK";
});

and

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
    <script src="script.js"></script>
    <title>TESTS</title>
</head>
<body ng-app="testApp">

<a href="#/">Home</a>
<a href="#/link">Testing angularjs routing</a>

<div ng-view></div>
</body>
</html>

Collectives™ on Stack Overflow

AngularJS - Not working when adding ng-view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related