Geek Answers Handbook

Ng-view will not display a template

I worked a bit with Angular and I tried to implement simple routing. I have basic HTML that contains a link to all the necessary scripts and the ng-view tag.

For some reason, when the page is loaded, the template does not appear in the ng-view location. Why is this not shown, and how to fix it?

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script> <script src="routCtrl.js"></script> </head> <body ng-app='ngRouteTest'> <div ng-view></div> </body>

and script file:

 var ngRouteTest = angular.module('ngRouteTest',['ngRoute']); ngRouteTest.config(function($routeProvider){ $routeProvider .when('/', {templateUrl : '/routView1.html'}) });
+5
source share
3 answers

First you need to run your code from the server, so use http-server to test it locally, which is very easy to prepare.

Then you will need to change the templateUrl path:

 {templateUrl : '/routView1.html'}

in

 {templateUrl : './routView1.html'}
0
source

You need to redirect to this page so that the routing knows which page will be displayed inside the ng-view directive.

There are several ways to do this.

  • Define another option to redirect to / .

     $routeProvider.otherwise({redirectTo: '/'})

  • Add a binding to the page, which will be redirected to / .

     <body ng-app='ngRouteTest'> <a href="#/">Home Page</a> <div ng-view></div> </body>

  • Having the default URL on the page in the <head> .

     <base href="/"/>
+2
source

After starting the local host and breaking the code, it worked fine.

The problem is with the protection associated with chrome when making local ajax calls.

So, one of these problems should do one of the following:

1.Disable web security in chrome. 2. Run the local host for testing.

0
source

More articles:


All Articles