CODEWITHSUNDEEP
javascripthtmlangularjssingle-page-application
Jonesopolis
Jonesopolis

Reputation: 25370

Single Page Application View Location

I think I have a gross misunderstanding as to how routing in AngularJS works, and SPA's altogether.

I had thought with my simple routing :

$routeProvider
   .when('/home', {
        templateUrl: 'app/views/home.html',
        controller: 'homeController'
   })
   .when('/login', {
        templateUrl: 'app/views/login.html',
        controller: 'loginController',
   })

I had thought that when I went to /login, angular made an ajax call to grab the html page it needed. However, I don't see any calls going through fiddler, and that doesn't really make sense.

But I can't seem to locate where the pages are in my Chrome Developer Tools, nor find the correct word combination to get a suitable answer through google. Can someone clear this up for me?

if it helps, here's the body of my layout page:

<body ng-cloak>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    ...nav stuff
</nav>

<br/><br/>

<div class="container body-content" ng-view></div>

<!-- 3rd party scripts -->
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-local-storage.min.js"></script>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<!-- app main -->
<script src="app/app.js"></script>
<!-- controllers -->
<script src="app/controllers/homeControllers.js"></script>
<script src="app/controllers/loginController.js"></script>
<!-- services -->
<script src="app/services/modelErrorService.js"></script>
<script src="app/services/authInterceptorService.js"></script>
<script src="app/services/authService.js"></script>
</body>

EDIT

Sorry I may have been unclear. The code works fine. My question is, when angular routes you to a new page, where is it loading that html template from? Is it all delivered to the client at the get-go, or is it calling back to the server? If it is on the client, where is it stored?

Upvotes: 0

Views: 114

Answers (2)

gkalpak
gkalpak

Reputation: 48211

If templateUrl is specified, Angular will look into the $templateCache for the template and load it from there if found. If not found, it will try to fetch it from the server, store it in $templateCache for future access and load it into view.

Templates can be put into Angular's $templateCache

  1. when fetched from the server for the first time
  2. by placing them in the HTML, in a <script type="text/ng-template"></script> element
  3. by programmatically putting them into the $templateCahce (for whatever reason: performance, offline access etc)

Upvotes: 3

Sven
Sven

Reputation: 6338

Your code looks just fine.

Have you injected the ngRoute module into your application like so:

angular.module('your-app-name', ['ngRoute']);

Upvotes: 0

Related Questions