Angular.js UI路由器模板未加載

Question

我正在製作一個簡單的Angular網站。對於路由我正在使用Angular-ui-router。當我點擊首頁，關於模板不加載，而當我點擊聯繫模板加載完美。是否有人可以幫助我，我做了一個mistake.Here是

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

Answer 1

您正在使用的聯絡家和大約總是相同的模塊「homeModel」

angular.module('homeModel', []) 

IST最後接觸的鏈接plunker一個並將其覆蓋

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

所以用獨特的模塊，每個組件

也請務必將其添加在腳本例如

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

也刪除反斜槓得到about.html

templateUrl: '/about.html', 

Answer 2

您應該使用templateUrl屬性如下代碼。

您的聯繫頁面中工作，因爲它被定義爲組件

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

在的script.js，您使用'template'，寫'<home></home>'，但你必須回家html的。並且您想使用home.html作爲模板。 您應該使用templateUrl: 'home.html'代替template:'<home></home>'

而且改變你的代碼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>' 
       }); 
     }); 
})(); 

在快照中看到的，請不要改變紅色框在代碼：

在腳本中使用此代碼。JS並再次運行您的代碼將成功運行：

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

看到的快照更改代碼後：

@Arjun： 您的代碼也是正確的，添加一些在你的模板中的HTML（像，我已經做了，我寫了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' 
       }); 
     }); 
})(); 

請參閱快照：

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

對於那些希望最終遷移到角2，我有一個類似的問題。作爲遷移到Angular 2的中介步驟，我一直在嘗試升級到Angular 1.6.1以及支持組件的ui路由器的版本。我複製了你的plunk，爲ui-router的版本1添加了外部庫，然後按照「指南：路由到組件」中所述進行更改，https://ui-router.github.io/guide/ng1/route-to-component。這包括對組件的語法更改以及對組件的調用，而不是每個狀態的url和模板。請參閱此鏈接工作普拉克，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.']; 
     } 
    }); 
})();