如何为我的三个面板设计使用角度状态和嵌套视图?

时间:2016-06-23 07:22:40

标签: javascript angularjs angular-ui-router viewstate

我正在学习角度js,我从简单的待办事项开始。但我对ui观点,状态和指令感到困惑。 我还需要所有三个州都有的数据。这就是我现在被困住的地方,我需要把它放在$ rootScope中,这不是一个好习惯。我还想为所有三个面板分配不同的控制器

以下是完整代码https://github.com/udayghulaxe/ticitic_todo

我想要的是这个 This is my app strucutre

我想要第一个面板中的项目列表,然后是第二个面板中的任务列表,然后是第三个面板中的任务详细信息 到目前为止我所做的就是这个。

$stateProvider
.state('dashboard', {
	url: '/dashboard',
	abstract: true,
	views: {
	'': { templateUrl: './partials/main.html'},
	'header_toolbar@dashboard': { templateUrl: './views/header_toolbar.html' },
	'sidenavleft@dashboard': { templateUrl: './views/sidenav.html' },
	'widgets@dashboard': { templateUrl: './views/widgets.html'},
	'todo_detail@dashboard': { templateUrl: './views/todo_detail.html' }
	}
})
.state('dashboard.listdetail', {
	url: '/lists/:list_id/',
	templateUrl: './partials/list.detail.html',
	controller:'ListController',
	resolve: {
		list_id: function($stateParams){
			return $stateParams.list_id;
		}
	},
	data: {
		authorizedRoles: [USER_ROLES.user],
		pageTitle: 'Lists'
	}
})
.state('dashboard.tododetail', {
	url: '/lists/:list_id/:todo_id',
	templateUrl: './partials/list.detail.html',
	controller:'ListController',
	resolve: {
		list_id: function($stateParams){
			console.log($stateParams);
			return $stateParams.list_id;
		}
		,
		todo_id: function($stateParams){
			console.log($stateParams);
			return $stateParams.todo_id;
		}
	}
});
<div id="appContainer" md-theme="{{ dynamicTheme }}" ng-init="load()" md-theme-watch>
  <!-- Header Toolbar -->
  <div ui-view="header_toolbar"></div>

  <div layout="row" layout-xs="column" layout-sm="column">
    <!-- Sidenav right view -->
    <div ui-view="sidenavleft" id="nav_container"></div>

    <!-- Main middle container  -->
    <div flex="100" flex-gt-sm="55"  layout="column" id="list_content">
        <md-content layout="column" flex class="md-padding">
            <div ui-view></div>
        </md-content>
    </div>

    <!-- Todo Detail View -->
    <div ui-view="todo_detail" id="todo_detail_view"></div>
  </div>
</div>

有人可以帮助我为我的应用程序编写正确的结构(ui状态)。

0 个答案:

没有答案