0

I'm trying to use routing in angularJS and I've been able to set most of it using w3schools as a tutorial. The problem is that w3schools doesn't provide example files for their external htm files. here's what I have JavaScript:

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

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "librarian.html"
    });
});

app.controller('myCtrl', function($scope)
{

});

main HTML:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="./library.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <p id = "loginScreen" >
            username: <input id = "userName" name = "userName" ng-model="name"><br>
            password: <input id= "password" name = "password" ng-model="password"><br>
            <input type = "button" value = "login" id = "loginButton" ng-click="login()">
            <a href="#librarian">librarian</a>
    </p>
<script type = "text/ng-template" id = "librarian.htm">
    <div>hello</div>
</script>
<div ng-view></div>
</body>

</html>

What do I need to do in librarian.html to get the page to switch to it (currently the URL changes, but all of the elements on the page remain the same)?

2 Answers 2

1

in Angular 1.6 changed from #/myUrl to #!/myUrl

You should change your ref to

<a href="#!/librarian">librarian</a>
Sign up to request clarification or add additional context in comments.

9 Comments

That didn't work. I'm actually using 1.4 as well since I just copied and pasted the import links from the w3schools website
Where your page librarian.html of you . Try create it and remove <script type = "text/ng-template" id = "librarian.htm"> <div>hello</div> </script>
removing that line of code didn't help (I had added it in after looking at the tutorialspoint example for this problem). My librarian.html is in the same directory as my main html file
@Alex5775 you should change in router .when("/librarian" instead /
I did that and the page still didn't change, although I can't believe I missed that obvious error
|
0

Make this Change

 <a href="#!/librarian">librarian</a>

and Change this

.when("/librarian", {
        templateUrl : "librarian.html"
    });

and create a file in your project folder

librarian.html 

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.