how to specify html files using templateUrl in angularJs routes?

Question

I am new to angularJs , just started with routes , i need some help to specify the html files inside templateUrl . Is it necessary that when specifying the html files inside templateUrl we are supposed to be inside localhost ? Can the html files present in the local directly work directly by specifying templateUrl :'first.html' ?

code : routing.js

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

        app.config(['$routeProvider',function($routeProvider){
        $routeProvider.
        when('/',{
            templateUrl: '/first.html',
        }).
        when('/about',{
            template: 'About us',
        }).
        when('/contact',{
            template: 'Contact us',
        }).
        otherwise({
            redirectTo : '/'
        });
    }]);

My html file first.html is present inside D:\angularJs\first.html , so do i need to specify the directory also ?

main.html

<body>
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>
<div ng-view></div>

<script src = "D://angularJs/angular.min.js"></script>
<script src= "D://angularJs/angular-route.min.js"></script>
<script src = "D://angularJs/routeController.js"></script>

Thank you

If your HTML file is in same as root directory, then specifying 'first.html' is fine. Else you need to specify the file path from the application root directory. — Karthik
– Karthik, Commented Nov 18, 2015 at 10:46

Yuri H. · Accepted Answer · 2015-11-18 10:54:59Z

1

Angular pulls out templates (ui-router at least) from server based on your routes.js/app.js file location. So you can use relative paths for a templateUrl property. Better off, place all your templates in folder like ./templates.

answered Nov 18, 2015 at 10:54

Yuri H.

512 bronze badges

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

1 Comment

narahari_arjun Over a year ago

i have created a folder called templates and placed my first.html file inside it and also changed it inside templateUrl to templates/first.html , but when i click on home link i dont see any data , i am just displaying <h2>AngularJS First Routing Example</h2>

Collectives™ on Stack Overflow

how to specify html files using templateUrl in angularJs routes?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related