How to use Angular ng-include

Question

I just started with angularjs on a Express Framework and I am trying to load html pages as includes. Now I've setup my routing in angular and works fine, but when I try to use ng-include in my html pages, it kinda loops and gives the following error:

Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.6.3/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…Be()%3Breturn%20d(a)%7D%22%2C%22newVal%22%3A%22nav-mobile.html%22%7D%5D%5D
at angular.js:38
at m.$digest (angular.js:18048)
at angular.js:18211
at e (angular.js:6274)
at angular.js:6554

Now I am trying to make an inlcude of the nav-bar-mobile.html to inject it into the page, but I do not get this working. Someone have an idea?

My routing looks like this:

 var app = angular.module("myApp", ["ngRoute", "ngAnimate"]); /* ROUTING */ app.config(function($routeProvider,$locationProvider) { $routeProvider .when('/', { templateUrl: 'partials/home.html', controller: 'homeController' }) .when('/wie', { templateUrl: 'partials/wie.html', controller: 'aboutController' }) .when('/portfolio', { templateUrl: 'partials/portfolio.html', controller: 'portfolioController' }) .when('/channel', { templateUrl: 'partials/channel.html', controller: 'channelController' }) .when('/contact', { templateUrl: 'partials/contact.html', controller: 'contactController' }); $locationProvider.html5Mode(true); }); /* CONTROLLERS */ app.controller('homeController', function($scope) { $scope.pageClass = 'home'; }); app.controller('aboutController', function($scope) { $scope.pageClass = 'wie'; }); app.controller('portfolioController', function($scope) { $scope.pageClass = 'portfolio'; }); app.controller('channelController', function($scope) { $scope.pageClass = 'channel'; }); app.controller('contactController', function($scope) { $scope.pageClass = 'contact'; });

And my index.html page looks like this:

 <!DOCTYPE html> <html ng-app="myApp" ng-init="CompanyName='MyApp'"> <head> <title>My App</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS --> <!-- load bootstrap & font awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel='stylesheet' href='/stylesheets/style.css'> <link rel='stylesheet' href='/stylesheets/mobile.css'> <link rel='stylesheet' href='/stylesheets/font-awesome.css'> <!-- JS --> <!-- load angular, ngRoute, ngAnimate --> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js'></script> <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js'></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.js"></script> <script src='/javascripts/app.js'></script> <base href="/"> </head> <body> <div class="container"> <div class="logo"> <div class="wrap"> <a href="/"><img src="/images/my-logo.png" alt="my-logo" /></a> </div> </div> <div ng-include="'nav-bar-mobile.html'"></div> <div class="box panels tinted"> <div class="page {{ pageClass }}" ng-view></div> </div> <div class="nav-bar desktop"> <div class="inner"> <ul> <li><a href="/">Home</a></li> <li><a href="/wie">Wie zijn wij?</a></li> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/channel">My Channel</a></li> <li><a href="/contact">Contact</a></li> </ul> </div> </div> </div> </body> </html>

Answer 1

如果不在同一文件夹中，则需要提供HTML页面的完整路径。

How to use Angular ng-include

Question

1 answers

solution1
0 2017-03-31 13:54:53

How to use Angular ng-include

Question

1 answers

solution1 0 2017-03-31 13:54:53

solution1
0 2017-03-31 13:54:53