Angular JS - Not adding content in ng-view

Question

I am new to Angular and I am having issues with Routing. When I go to localhost/index.html#/chatroom, it doesn't load Chatroom.html. Please consider the following files. Any help would be appreciated.

Following is my core.js file:

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

function mainController($scope) {

 console.log("yay");

}

function routing($routeProvider) {
    $routeProvider.when('/chatroom', {
        templateUrl : 'templates/ChatRoom.html',
        controller  : 'mainController'
    });
}
messagingApp.config(routing);
messagingApp.controller('mainController',mainController);

Following is my index.html file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

    <script src="js/User.js"></script>
    <script src="js/core.js"></script>

    <title>Real Time Chat</title>
</head>

<body ng-app="messagingApp">
<p>ss</p>

<div ng-view>

</div>

Following is my ChatRoom.html:

<div class="row">
    <p>ssss</p>
    <ul class="users">
        <li ng-repeat="user in users">{{ user.UserName }}</li>
    </ul>
</div>

Directory structure:

-js
  core.js

-templates
 ChatRoom.html

-index.html

Going to localhost/index.html#chatroom should load that file as per my understanding but it doesn't.

getting any errors in console?

Sa E Chowdary
– Sa E Chowdary

2016-12-17 13:18:46 +00:00
Commented Dec 17, 2016 at 13:18 — Sa E Chowdary
– Sa E Chowdary, Commented Dec 17, 2016 at 13:18
@SaEChowdary None

fur866
– fur866

2016-12-17 13:31:26 +00:00
Commented Dec 17, 2016 at 13:31 — fur866
– fur866, Commented Dec 17, 2016 at 13:31

digit · Accepted Answer · 2016-12-17 13:21:05Z

-1

You shouldn't used localhost/index.html#chatroom. Please changed it to localhost/#/chatroom

answered Dec 17, 2016 at 13:21

digit

4,5653 gold badges29 silver badges46 bronze badges

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

9 Comments

fur866 Over a year ago

no it shows "ss" from the <p></p> tag before the ng-view div

digit Over a year ago

Look like it could not found the routing instead. Please change you code to this .. messagingApp.config(function ($routeProvider) { // Routing code here });

fur866 Over a year ago

Still nothing. One thing to note is that when I press on "localhost:8080/#/chatroom" it changes it to "localhost:8080/#!#%2Fchatroom" but that was happening before the last change as well

digit Over a year ago

What? invalid char is added in front routing path. Try using html5 mode that can cut all hashtag. Set this code in under $routingProvider. $locationProvider.html5Mode({enabled: true, requireBase: false, rewriteLinks: true})

digit Over a year ago

and change the url to localhost:8080/chatroom

|

Himanshu Shekhar · Accepted Answer · 2016-12-17 13:22:04Z

-1

Add your script tags after ng-view div

answered Dec 17, 2016 at 13:22

Himanshu Shekhar

1,2601 gold badge17 silver badges42 bronze badges

2 Comments

fur866 Over a year ago

which script tags? all of them?

Himanshu Shekhar Over a year ago

@fur866 Yes all script tag below ng-view

Collectives™ on Stack Overflow

Angular JS - Not adding content in ng-view

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related