Wie zu verwenden Angular ng-inlcude

Ich habe gerade mit angularjs auf einem Express-Framework gestartet und ich versuche, HTML-Seiten wie enthalten laden. Jetzt habe ich Setup meine Routing in Winkel- und funktioniert gut, aber wenn ich versuche, ng-umfassen in meine HTML-Seiten zu verwenden, ist es irgendwie Loops und gibt den folgenden Fehler:Wie zu verwenden Angular ng-inlcude

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

Jetzt versuche ich, ein zu machen Einschließlich der nav-bar-mobile.html, um es in die Seite zu injizieren, aber das funktioniert nicht. Jemand hat eine Idee?

Mein Routing sieht wie folgt aus:

<!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>

Quelle

2017-03-31 Larsmanson

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'; 
 
});

Und meine index.html-Seite sieht wie folgt aus Sie müssen den vollständigen Pfad der HTML-Seite angeben, wenn sie sich nicht im selben Ordner befindet.

Quelle

2017-03-31 13:54:53 Ahefaz

omg, habe ich den Pfad aus dem HTML-Ordner anstelle der Wurzel der App zur Verfügung gestellt. Danke, das hat den Trick gemacht – Larsmanson

Wie zu verwenden Angular ng-inlcude

Antwort

Verwandte Themen