Of Stack

Reasons and Solutions of AngularJS Failure in Loading Pages with ng inlude Instructions

  • 2021-07-12 05:19:21
  • OfStack

This article illustrates the reasons and solutions for the failure of AngularJS to load pages using ng-inlude instructions. Share it for your reference, as follows:

The ng-include instructions provided in AngularJS are very similar to those in JSP < jsp:include > It is used to merge multiple sub-pages into the same parent page, so as to avoid the parent page being too large, poor readability and difficult maintenance.

The parent page parent. html code is as follows: 


<html>
 <head>
  <script src="angular-1.2.2/angular.js"></script>
  <script>
   function rootController($scope,$rootScope,$injector)
   {
    $rootScope.name = "aty";
    $rootScope.age = 25;
   }
  </script>
 </head>
 <body ng-app ng-controller="rootController">
    <h1>Hello, {{name}}!</h1>
    <h1>Hello, {{age}}!</h1>
  <div id="included" ng-include="'child.html'">
      <input type="button" value="2"/>
    </div>
 </body>
</html>

The included sub-page child. html code is as follows: 


<div>
    <h1>included, {{name}}!</h1>
    <h1>included, {{age}}!</h1>
</div>

I ran parent. html with IE11 and Chrome39 and found that the child. html page could not be included in parent. html. The error message under IE is as follows:

Error: Access denied.
at Anonymous function (file:///D:/learn/angular-1.2.2/angular.js:7852:7)
at sendReq (file:///D:/learn/angular-1.2.2/angular.js:7720:9)
at serverRequest (file:///D:/learn/angular-1.2.2/angular.js:7454:9)

The error message under chrome is as follows:

XMLHttpRequest cannot load file:///D:/learn/include.html.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/learn/include.html'.

The hint under IE is somewhat obscure, but the chrome hint is obvious: it cannot be accessed across domains. From the above error prompt, you can see that when using ng-include instruction, AJAX will be used to request XMLHttpRequest. However, we opened parent. html directly in a browser and did not access it through the web container, so there was a cross-domain access problem, and loading child. html failed. The solution is simple: Deploy the code under an web container such as tomcat and access it through http.

Usually, when practicing JavaScript or JS framework, version 1 uses lightweight tools, instead of IDE like Eclipse, I generally use Notepad + + to write js code. Notepad + + makes it easy to call native-installed browsers. Instructions like ng-include must be supported by the web container. You can use the front-end development artifact webstorm. When the tool runs html, it will automatically start the built-in web container, so that ng-include instructions will not report errors.

For more readers interested in AngularJS related content, please check the topics of this site: "Introduction and Advanced Tutorial of AngularJS" and "Summary of ES90MVC Architecture"

I hope this article is helpful to everyone's AngularJS programming.

Related articles: