Question

我正在开发一个允许您搜索不同产品的网站，例如笔记本电脑。这是我的索引div：

<div  class="content" id="main">

    <div id="search-wrap">
        <div id="logo"><a href="#"><h1>seach</h1></a></div>

        <form id="search">
            <input type="text" placeholder="Search " autofocus ng-model="query"/>
        </form>

        <div style="border: solid 1px blue" ng-show="query">
            <ul ng-repeat="x in [] | range:10">
                {{ query }}
            </ul>
        </div>
    </div>

我还没有实现角度js，但我正在考虑如何做到这一点。我不知道如何处理这个，因为它是一个复杂的网站。一旦用户搜索某些内容，他们就会从产品中获得结果。我是否必须创建不同的ng-view？

我只是在网上看到的东西：

页面获得一个ng-view。假设您有一个单页应用程序，这意味着您将获得一个视图。明智地使用它。考虑一下视图中的内容。这是您的主要内容窗口还是更多的导航？此部分的实际内容（HTML）是否具有高度动态性？如果您的页面上有多个不同的内容区域，这些是在应用程序开发早期做出的重要决定。

对不起，如果我的问题没有意义，只是不知道该问什么。任何提示都会有帮助。感谢

Answer 1

您最好尝试使用ng-view，然后您会更加了解它的工作原理。

页面中可以有一个ng-view，它与网址紧密集成。当您在浏览器中更改网址时，您将在ng-view区域中加载不同的视图。这些是使用$routeProvider配置的。

ng-view就像中央内容主题\区域。其他视图包括主视图和左导航，顶部导航页脚的子视图使用ng-include指令加载，该指令具有从服务器或本地编译和加载任何html块的功能。

对于复杂的路由需求，请查看支持嵌套视图的ui-router。

Answer 2

对于复杂的视图，您可以尝试这样的

$stateProvider
        .state('login', {
            url: '/login',
            controller: 'LoginController',
            templateUrl: 'login.tpl.html',
            access: 0
        })
    .state('multiple view', {
            url: '/main',
            access: 1,
            views: {
                '@': {
                    templateUrl: 'view1.tpl.html',
                    controller: 'view1Controller'
                },
                'page@dashboard': {
                    templateUrl: 'page.tpl.html',
                    controller: 'pageController'
                }

            }
        })

More Info

使用ng-view获取高动态内容？

2 个答案: