我應該在哪裏放置用於AngularJS應用程序的組件/控制器的代碼？

它是否應該與應用程序模塊關聯？它應該是一個組件還是一個控制器？基本上我試圖實現的是跨所有頁面的通用佈局，我可以在其中放置或刪除其他組件。我應該在哪裏放置用於AngularJS應用程序的組件/控制器的代碼？

這裏是我的應用程序的結構大致是這樣的：

-/bower_components 
-/core 
-/login 
    --login.component.js 
    --login.module.js 
    --login.template.html 
-/register 
    --register.component.js 
    --register.module.js 
    --register.template.html 
-app.css 
-app.module.js 
-index.html

來源

2016-07-11 Dillon

我會創建一個文件夾'services'並且把東西放在那裏，你想從不同的控制器訪問 –

你想要共享代碼或者有共同的佈局（頁眉/頁腳）嗎？ – gyc

我想要有一個共同的佈局，但我也需要能夠控制這個佈局的DOM，所以我假設我需要使用指令？ @gyc – Dillon

這可能是有點主觀的回答，但我親手做的基於角應用組件是創建一個將封裝的所有組件其他組件。

我覺得分享登錄信息特別有用，無需在每個組件中調用服務。（並無需存儲rootScope內的用戶數據，瀏覽器存儲或餅乾

比如你做一個組成部分家長像這樣：

var master = { 
    bindings: {}, 
    controller: masterController, 
    templateUrl: 'components/master/master.template.html' 
}; 

function masterController(loginService) { 

    var vm = this; 
    this.loggedUser = {}; 

    loginService.getUser().then(function(data) { 
     vm.loggedUser = data; 
    }); 

    this.getUser = function() { 
     return this.loggedUser; 
    }; 
} 

angular 
    .module('app') 
    .component('master', master) 
    .controller('masterController', masterController);

主控部件將採取路由照顧

的index.html：

<master></master>

master.template.html：

<your common header> 
<data ui-view></data> 
<your common footer>

這樣，裏面<ui-view>注入每個組件將能夠「繼承」主控部件，像這樣：

var login = { 
    bindings: {}, 
    require: { 
     master: '^^master' 
    }, 
    controller: loginController, 
    templateUrl: 'components/login/login.template.html' 
};

，並在組件控制器

var vm=this; 
this.user = {}; 
this.$onInit = function() { 
    vm.user = vm.master.getUser(); 
};

你需要用一生循環掛鉤$onInit以確保所有控制器和綁定已註冊。

最後一個絕招組件之間的導航是有一個路線像這樣（假設你使用的UI路由器的穩定版本）：

.state('home', 
{ 
    url : '/home', 
    template : '<home></home>' 
})

這將有效路徑和負載內<ui-view>

您的組件ui-router的新版本包括組件路由。

來源

2016-07-11 12:52:02 gyc

我應該在哪裏放置用於AngularJS應用程序的組件/控制器的代碼？

回答

相關問題