Question

我正在使用angular.js来创建SPA。我需要你的建议我必须使用哪种技术来展示信息/文章。

我的 index.html 如下所示：

<body>
    <header id="navigation">
        <nav id="main">
            <ul>
                <li id="login"><button class="btn">Login</button></li>
            </ul>
        </nav>
    </header>
    <main>

    </main>
    <footer>
        <p>Some text</p>
    </footer>
</body>

一开始，这个HTML（使用指令angucomplete-alt）应显示在主容器中：

自动完成搜索-template.html：

<div>Any content</div>
<div id="searching" ng-controller='search'>
    <div angucomplete-alt id="s1" selected-object="select" remote-url="search.php?q=" remote-url-data-field="results" title-field="title" description-field="description"></div>
</div>

当用户搜索文章时，使用以下控制器：

控制器：

app.controller('search', ['$scope', '$http',
    function s1($scope, $http) {

        $scope.select = function(selected) {
            if (selected) {
                /* Article has been chosen */
            }
        };

    }
]);

article-template.html看起来像这样，应该在用户在搜索中选择了一篇文章之后插入到主容器中（angucomplete-alt：

文章-template.html：

<article>
    <header>{{title}}</header>
    <div>{{content}}</div>
</article>

现在我不知道如何将这些部分放在一起，因此我需要你的帮助。

如何将这些模板放在一起？（a）我是否必须使用路由或是否有其他技术？如果我必须使用路由，那么我不知道如何从搜索结果到文章显示，因为它不是href-link ...（b）或者使用ng-include更好（ c）或另一种选择？
我在哪里（以及何时）获得文章信息？我想我必须使用http-post请求获取一个JSON数组，该数组将用于填充article-template.html的占位符。所以我想在$scope.select做一个请求。但是仍然存在将所有内容合并在一起的问题

更新路由：

app.config(function($routeProvider) {
    $routeProvider
    .when('/search', {
        templateUrl: 'autocomplete-search-template.html',
        controller: 'search'
    })
    .otherwise({
        redirectTo: '/search'
    });
});

这是为了在首页显示autocomplete-search-template.html。但我不知道如何路由angucomplete-alt搜索的结果。

Answer 1

使用Angular ui-router，您可以为搜索结果使用嵌套视图。

要在加载视图之前获取数据，可以使用resolve从服务器获取数据。然后，您可以将已解析的promise注入您的控制器，并在嵌套视图中使用返回的数据。

使用$state.go('search.article', {foundArticle: $scope.selectedPerson});，您可以将所选项目从angucomplete传递到嵌套视图。

要使参数传递工作，您需要将以下内容添加到嵌套视图中：

$stateProvider.state('search.article', {
    ...
    params:{foundArticle:null},
    controller: function ($scope, $stateParams) {
        $scope.article = $stateParams.foundArticle;
    }
}

有关用法的示例，请参阅下面的演示（代码不在此处工作 - ＆＃39;操作不安全＆＃39;问题。不知道如何解决。）并在{{3 }}

可以在以下几点改进代码：

使用服务获取数据。
如果您的文章很大，您可能需要在转换到文章时再做另一个解决方法，并在pageload加载所需的数据。该演示在开始时加载所有内容。

＆＃13;

angular.module('myApp', ['ui.router', 'angucomplete-alt'])
    .controller('search', function ($scope, $state, searchData) {
        
    //console.log(searchData.data); 
    $scope.people = searchData.data;
     
    // static dummy data below
    /*$scope.people = [
         {firstName: "Susan", surname: "Rowland", twitter: "@susanrowland", pic: "http://lorempixel.com/100/100/people/1/", content: 'text for Susan'},
      {firstName: "Alan", surname: "Partridge", twitter: "@alangpartridge", pic: "http://lorempixel.com/100/100/people/3/", content: 'text for Alan'},
      {firstName: "Annie", surname: "Rowland", twitter: "@anklesannie", pic: "http://lorempixel.com/100/100/people/6/", content: 'text for Annie'}
    ];*/
        
    $scope.select = function(selected) {
            if (selected) {
                console.log(selected, $state);
                /* Article has been chosen */
                $scope.selectedPerson = selected; // same as two-way binding
                $state.go('search.article', {foundArticle: $scope.selectedPerson});
            }
        };
})
.config(function ($stateProvider, $urlRouterProvider) {
    //
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/search");
    //
    // Now set up the states
    $stateProvider.state('search', {
        url: "/search",
        resolve: {
            searchData: function ($http) {
                return $http.jsonp('http://www.mocky.io/v2/554f135e539c140e02858ff7/?callback=JSON_CALLBACK');
            }
        },
        templateUrl: "partials/search.html",
        controller: 'search'
    })
        .state('search.article', {
        url: "/article",
        params:{foundArticle:null},
        templateUrl: "partials/search.article.html",
        controller: function ($scope, $stateParams) {
            $scope.article = $stateParams.foundArticle;
        }
    })
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<script src="https://raw.githubusercontent.com/ghiden/angucomplete-alt/master/dist/angucomplete-alt.min.js"></script>

<script type="text/ng-template" id="partials/search.html">
    <!-- partials/state1.html -->
    <h1>Search users (e.g. Rowland)</h1>
    <hr/>
    <!--<a ui-sref="state1.list">Show List</a>-->
    <div angucomplete-alt id="ex2" placeholder="Search people" pause="300" selected-object="select" local-data="people" search-fields="firstName,surname" title-field="firstName,surname" description-field="twitter" image-field="pic" minlength="1" input-class="form-control form-control-small" match-class="highlight">
    </div>
        <div class="result">
            <div class="" ng-show="selectedPerson" >
                You selected <span class="bold-span">{{selectedPerson.originalObject.firstName}} {{selectedPerson.originalObject.surname}}</span>
            </div>
        </div>
    <div ui-view></div>
</script>

<script type="text/ng-template" id="partials/search.article.html">
    <h3>Found article</h3>
    <article>
    <header>{{article.title}}</header>
    <div>
        <p>{{article.originalObject.content}}</p>
        <pre>{{article | json}}</pre></div>
</article>
</script>

<div ng-app="myApp">
  <div ui-view=""></div>
</div>

＆＃13;

angular.js：如何使用模板和JSON构建SPA

1 个答案: