Home > Developer > Web Develop
In AngularJS, you can include HTML files in HTML.
With AngularJS, you can use the ng-include directive to include HTML content:
Test.htm File Code:<ng-app= ""><ng-include= "' Test.htm ' "></div></body>
< H1 > Rookie Tutorials </H1><p> This is a contained HTML page that uses Ng-include instructions to achieve! </ P >
The ng-include directive can contain AngularJS code in addition to HTML files:
<!DOCTYPE HTML><HTML><MetaCharSet= "Utf-8"><Scriptsrc= "Http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></Script><Body><DivNg-app= "MYAPP"Ng-controller= "Sitesctrl"> <DivNg-include= "' sites.htm '"></Div></Div> <Script>varapp=Angular.module ('myApp', []); App.controller ('Sitesctrl', function($scope, $http) {$http. Get ("sites.php"). Then (function(response) {$scope. Names=response.data.records; });});</Script><P>The AngularJS code is included in the "sites.htm" file.</P></Body></HTML>Sites.htm File Code:
<Table><TRng-repeat= "x in Names"><TD>{{X.name}}</TD><TD>{{X.url}}</TD></TR></Table>Cross-domain Containment
By default, the Ng-include directive does not allow files that contain other domain names.
If you need to include a file with another domain name, you need to set the domain name Access Whitelist:
<!DOCTYPE HTML><HTML><MetaCharSet= "Utf-8"><Scriptsrc= "Http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></Script><BodyNg-app= "MYAPP"> <DivNg-include= "' http://c.runoob.com/runoobtest/angular_include.php '"></Div> <Script>varapp=Angular.module ('myApp', []) app. Config (function($sceDelegateProvider) {$sceDelegateProvider. resourceurlwhitelist (['http://c.runoob.com/runoobtest/**' ]);});</Script><P>You need to set the server side to allow cross-domain access, and the Setup method can refer to<aTarget= "_blank"href= "/w3cnote/php-ajax-cross-border.html">PHP Ajax the best solution for cross-domain problems</a>. </Body></HTML>
In addition, you need to set the server side to allow cross-domain access, the setting method can be consulted: PHP Ajax cross-domain problem best solution.
<? php//allows all domains to access the header (' access-control-allow-origin:* '), Echo ' <b style= ' color:red ' > I am a cross-domain content </b> '; ?>Angularjs Study Chapter (20)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
