适当的实施方式＆amp;使用ui-router - AngularJs

Question

我使用MEAN Stack构建应用程序，其中每个功能都是一个组件。我的意思是我已经在后端构建了每个主要功能的特定模块，以便将来易于扩展和调试。

我的前端结构是这样的：

注意事项：

1. 侧栏将包含一个菜单，可用于浏览应用程序。
2. 标题是搜索栏。
3. 主要内容部分是我的实际应用程序所在的位置。主要内容部分基本上是ui-view部分。

当用户点击侧边栏菜单上的链接时，它将更新主要内容的视图。侧边栏和标题将始终存在。主要内容将根据用户所处的状态而变化，即（仪表板，配置文件，设置等）

我的代码：

var knowledgeBaseCtrl = angular.module('knowledgeBaseCtrl', ['ngAnimate','ui.router'])

knowledgeBaseCtrl.config(function($stateProvider, $urlRouterProvider,$locationProvider) {

 $stateProvider

 // HOME STATES AND NESTED VIEWS ========================================

 // nested list with custom controller
.state('profile', {
    url: '/profile'
})

// nested list with custom controller
.state('knowledgebase', {
    templateUrl: './knowledgeBase.ejs'
})

// use the HTML5 History API
$locationProvider.html5Mode(true);
});

配置文件状态是默认状态，这是用户登录时的状态。这就是我放置UI-VIEW的状态。在配置文件状态中调用所有脚本，依赖项和css文件。

我的问题：

如何正确实现ui-router，以便只有主内容div更改，侧边栏和标题始终可见。需要将每个视图推送到ui-view（主要内容）中的每个视图都需要加载自己的脚本和css文件。我不知道放在哪里。什么是实施这种结构的正确方法。

我可能没有很好地解释这一点。如果您有任何疑问，请告诉我。

提前致谢。