在角度路由中配置列表和网格视图

Question

因此，我正在开发一个网站，该网站目前使用网格格式[3x3]的卡填充页面。我被要求提供将视图更改为列表的选项。所以现在我有两个视图文件，list-view.html和grid-view.html。

该网站使用Angular路由加载页面，我很难配置正确的视图文件的路径。以下是我正在使用的代码的片段/屏幕截图：

<div align="center">
    <button class="btnView"><i class="fa fa-bars"></i>  List</a></button> 
    <button class="btnView"><i class="fa fa-th-large"></i> Grid</button>
</div>

上面的代码在“index.html”中创建了按钮

var app = angular.module('leavesNext', ['ui.router', 'ui.bootstrap', 'ui.tab.scroll','ngSanitize','ngCookies','720kb.socialshare'])

app.config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

$stateProvider
.state('home', {
    url: '/?tag',
    templateUrl: 'views/card-view.html',
    controller: 'homeController'
})

.state('search', {
    url: '/?search',
    templateUrl: 'views/card-view.html',
    controller: 'homeController'
})

这个片段是加载主页的“script.js”。有关如何在单击按钮时加载相应文件的任何想法？

Answer 1

来自Docs：

激活一个州

激活状态有三种主要方式：

• 打电话给$state.go()。高级便利方法。 Learn More
• 单击包含ui-sref指令的链接。 Learn More
• 导航到与州关联的网址。 Learn More

有关更多信息，请参阅UI-Router Wiki - Activating a State