2016-08-18 4 views
0

私はES6とAngularJSの両方でかなり新しく、状態プロバイダ(またはそれに関連するもの)に問題があります。私は私が見つけたGitHubのレポに提示プロジェクト構造以下のアプリを構築しようとしています:

https://github.com/AngularClass/NG6-starter

私は$stateProvider状態に私のコンポーネントを割り当てるしようとしていたときに問題が発生します。

この

が動作していないコードです:

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 
import homepageComponent from './homepage.component'; 

const moduleName = 'app.components.homepage'; 

let homepageModule = angular.module(moduleName, [ 
    uiRouter 
]) 
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    'ngInject'; 

    $stateProvider 
    .state('homepage', { 
     url: '/', 
     component: 'homepage' 
    }); 

    $urlRouterProvider.otherwise('/'); 
}]) 
.component('homepage', homepageComponent) 
.name; 

export default homepageModule; 

私はアプリケーションと間違って何か他のものがあると想定できますが、私は基本的な割り当てと、この「コンポーネントの事を」交換するとき、それはうまく働いています。

実際に動作するコード:私は<homepage></homepage>タグを挿入すると

import template from './homepage.html'; 
import controller from './homepage.controller'; 
import './homepage.scss'; 

let homepageComponent = { 
    restrict: 'E', 
    bindings: {}, 
    template, 
    controller 
}; 

export default homepageComponent; 

、それだけで働いています:

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 
import template from './homepage.html'; 
import controller from './homepage.controller'; 

const moduleName = 'app.components.homepage'; 

let homepageModule = angular.module(moduleName, [ 
    uiRouter 
]) 
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    'ngInject'; 

    $stateProvider 
    .state('homepage', { 
     url: '/', 
     restrict: 'E', 
     bindings: {}, 
     template: template, 
     controller: controller, 
     controllerAs: '$ctrl' 
    }); 

    $urlRouterProvider.otherwise('/'); 
}]) 
.name; 

export default homepageModule; 

そしてここではhomepage.component.jsコードです。誰も私にこれらの2つの方法の違いが何であるか教えてもらえますか、何が間違っていますか?

BTW。誰もがこの.nameがファイルの最後にあることを知っていますか(レポ内)?

答えて

1

このようなコンポーネントを追加することはできません。状態はテンプレートにリンクされています。 この機能は、次のバージョン(1.0.0)

CFに追加されます。.nameプロパティを使用してhttps://github.com/angular-ui/ui-router/issues/2547

文字列を複製避けることができます。あなたはあなたのコンポーネントを呼び出すことができますhomepage.name

+1

はい、しかし、彼らは '' angle-ui-router ': "^ 1.0.0-beta.1"、 'を使います。あなたは彼らのpackage.jsonをチェックインすることができます – DMCISSOKHO

+0

私はこのために私のライブから約3時間を無駄にしました。ありがとうございました:) –

+0

あなたは歓迎です^^研究時間は決して無駄な時間ではありません – DMCISSOKHO

関連する問題