Angular.js UI-Router Vorlagen werden nicht geladen

Question

Ich mache eine einfache Angular Website. Für das Routing verwende ich Angular-UI-Router. Wenn ich auf Home klicke, werden die Vorlagen nicht geladen, während wenn ich auf Kontakt klicke, lädt die Vorlage perfekt. Kann mir bitte jemand helfen, wo ich ein mistake.Here ist der Link für Plunker

> https://plnkr.co/edit/8LlDl08JVbQKiD5eWEah?p=preview 

Answer 1

hat Sie für den Kontakt verwenden zu Hause und über immer gleiche Modul ‚homeModel‘

angular.module('homeModel', []) 

den Kontakt ist die letzte ein und überschreibt es

<script src="home.component.js"></script> 
    <script src="about.component.js"></script> 
    <script src="contact.component.js"></script> 

so einzigartigen Modul für jede Komponente

verwenden zum Beispiel

angular.module('myVin', ['ui.router', 'homeModel', 'contactModel', 'aboutModel']) 

auch Backslash entfernen zu bekommen about.html

templateUrl: '/about.html', 

Answer 2

Sie sollten templateUrl Eigenschaft wie im folgenden Code verwenden sicherstellen, dass Sie auch in Ihrem Skript hinzufügen.

Ihre Kontaktseite arbeiten, weil es als Komponente

// Code goes here 

(function() { 
    'use strict'; 

    angular.module('myVin', ['ui.router', 'homeModel']) 
     .config(function($stateProvider, $urlRouterProvider) { 
      $urlRouterProvider.otherwise('/'); 
      $stateProvider 
       .state('home', { 
        url: '/', 
        templateUrl: 'home.html' 
       }) 
       .state('about', { 
        url: '/about', 
        templateUrl: 'about.html' 
       }) 
       .state('contact', { 
        url: '/contact', 
        template: '<contact></contact>' 
       }); 
     }); 
})(); 

Updated PLUNK

Answer 3

In den script.js definiert ist, den Sie verwenden 'template' und schrieb '<home></home>', aber Sie haben zu Hause .html. und Sie möchten home.html als Vorlage verwenden. Sie templateUrl: 'home.html' statt template:'<home></home>'

Auch für Ihren Code ändern template: <about></about> & template: <contact></contact>

(function() { 
    'use strict'; 

    angular.module('myVin', ['ui.router', 'homeModel']) 
     .config(function($stateProvider, $urlRouterProvider) { 
      $urlRouterProvider.otherwise('/'); 
      $stateProvider 
       .state('home', { 
        url: '/', 
        template: '<home></home>' 
       }) 
       .state('about', { 
        url: '/about', 
        template: '<about></about>' 
       }) 
       .state('contact', { 
        url: '/contact', 
        template: '<contact></contact>' 
       }); 
     }); 
})(); 

sehen im Snapshot verwenden sollten, gehen Sie bitte Änderung im roten Feld in Ihrem Code:

Verwenden Sie diesen Code im Skript.js und laufen wieder Ihren Code erfolgreich ausgeführt wird:

(function() { 
    'use strict'; 

    angular.module('myVin', ['ui.router', 'homeModel']) 
     .config(function($stateProvider, $urlRouterProvider) { 
      $urlRouterProvider.otherwise('/'); 
      $stateProvider 
       .state('home', { 
        url: '/', 
        templateUrl: 'home.html' 
       }) 
       .state('about', { 
        url: '/about', 
        templateUrl: 'about.html' 
       }) 
       .state('contact', { 
        url: '/contact', 
        templateUrl: 'contact.html' 
       }); 
     }); 
})(); 

den Snapshot finden Sie nach dem Ändern des Codes:

@Arjun: Ihr Code ist auch richtig, fügen Sie einige html in deiner Schablone (wie ich getan habe, schrieb ich template: '<h1>Shubham Verma</h1>')

(function() { 'use strict';

angular.module('myVin', ['ui.router', 'homeModel']) 
     .config(function($stateProvider, $urlRouterProvider) { 
      $urlRouterProvider.otherwise('/'); 
      $stateProvider 
       .state('home', { 
        url: '/', 
        template: '<h1>Shubham Verma</h1>' 
       }) 
       .state('about', { 
        url: '/about', 
        templateUrl: 'about.html' 
       }) 
       .state('contact', { 
        url: '/contact', 
        templateUrl: 'contact.html' 
       }); 
     }); 
})(); 

Bitte beachten Sie die Snapshot:

Answer 4

You are overwriting your module. 

angular.module('moduleName',[]) 

is use to define a module for using that module further you should use like below 

angular.module('moduleName') 

Replace your files like given below 

replace content of about.component.js with given below code 

(function() { 
    'use strict'; 

    angular.module('homeModel') 
     .component('about', { 
      templateUrl: 'about.html', 
      controller: function() { 
       var ctrl = this; 

       ctrl.mesgs = ['Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.', 
       'Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus', 
       'Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.']; 
      } 
     }); 
})(); 



And replace code of component.contact.js with given below code 


(function() { 
    'use strict'; 

    angular.module('homeModel') 
     .component('contact', { 
      templateUrl: 'contact.html', 
      controller: function() { 
       var ctrl = this; 

       ctrl.msgs = ['Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.', 
       'Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus', 
       'Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.']; 
      } 
     }); 
})(); 

It will work fine 

Answer 5

Für die Suche nach Angular 2 bis schließlich wandern, hatte ich ein ähnliches Problem. Als Zwischenschritt bei der Migration zu Angular 2 habe ich versucht, mit der Version des ui-routers, der Komponenten unterstützt, auf Angular 1.6.1 zu aktualisieren. Ich habe Ihren Plunk kopiert, die externe Bibliothek für die Version 1 des UI-Routers hinzugefügt und dann die Änderungen vorgenommen, wie in der "Anleitung: Route zur Komponente", https://ui-router.github.io/guide/ng1/route-to-component, beschrieben. Dies beinhaltete einige Syntaxänderungen an Ihren Komponenten und einen Aufruf der Komponente anstelle der URL und Vorlage für jeden Status. Siehe diesen Link für die Arbeits zupfen, https://plnkr.co/edit/QsiFehbRkr7AYAYV4yiM?p=preview

script.js 
(function() { 
'use strict'; 

angular.module('myVin', ['ui.router', 'homeModel', 'aboutModel', 'contactModel' ]) 
    .config(function($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/'); 
     $stateProvider 
      .state('home', { 
       component: 'home.component', 
      }) 
      .state('about', { 
       component: 'about.component', 
      }) 
      .state('contact', { 
       component: 'contact.component', 
      }); 
    }); 
})(); 

about.component.js 
    (function() { 
    'use strict'; 

angular.module('homeModel', []) 
    .component('about', { 
     templateUrl: '/about.html', 
     controller: function() { 
      var ctrl = this; 

      ctrl.mesgs = ['Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.', 
      'Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus', 
      'Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.']; 
     } 
    }); 
})();