Question

我已将问题放在最底层，因为我可以解释我的问题的唯一方法是使用一个示例，因此在示例中它可能没有意义但是可以随意跳到底部然后阅读问题

我将使用这个例子来尝试一下我理解的内容以及我的理解落在哪里。

我想构建一个页面，我可以在其中浏览我将设置的项目集合：

angular.module('App')
  .config(['$stateProvider', function ($stateProvider) {
    $stateProvider
      .state('browse', {
        url: '/browse',
        templateUrl: 'app/browse/browse.html',
        controller: 'BrowseCtrl',
        title: 'Browse',
        mainClass: 'browse'
      });
  }]);

使用ng-repeat然后调用api：

将每个项目拉出并放在此页面上

    $scope.items = [];
    $http.get('/api/items').success(function(items) {
      $scope.items = items;
      socket.syncUpdates('Item', $scope.items);

      $scope.totalItems = $scope.items.length;
      $scope.$watch('currentPage + itemsPerPage', function() {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
          end = begin + $scope.itemsPerPage;

        $scope.filteredItems = $scope.items.slice(begin, end);
      });

    });

然后访问api并重复输出项目。 到目前为止一切顺利。下面是API设置的一个示例。值得一提的是我正在使用使用Express＆amp; amp;插入Mongo DB的Angular-fullstack generator。 Sockets.io

Item.find({}).remove(function() {
  Item.create({
    "image_url" : "../../../assets/images/test.jpg",
    "title" : "Test Item",
    "created_on" : new Date(2014, 9, 23, 3, 24, 56, 2),
    "creator" : {
      "profile_img" : "../../../assets/images/stephanie-walters.jpg",
      "username" : "StephW",
      "url" : "/stephanie-walters",
      "first_name" : "Stephanie",
      "last_name" : "Walters",
    }
  }

好的，现在这件事开始让我不清楚了。

我现在需要创建项目页面，这样当我点击某个项目时，我就可以访问该项目的内容。如果没有为每个条目创建每个页面，我非常希望能够创建一个页面模板，ui-router能够在满足正确的url结构时附加内容。

这可能不太清楚所以让我试着更清楚一点。让我们说如果我们遵循上面的JSON，我想去找Stephanie Walters＆＃39;配置文件我将需要三件事。首先是一个配置文件模板，其次我需要api调用中的配置文件的内容，最后是一个动态URL，可以获取该API内容并将其放入页面模板。

也许类似于：

.state('profile.username', {
    url: '/:username',
    templateUrl: '/partials/profile.username.html',
    controller: 'profileUsernameCtrl'
})

但我并不完全明白如何从username JSON（上图）中获取item之类的变量，然后使用它来构建一个网址/:username连接到模板页面profile.username.html，并进一步填充该页面，其中包含存储在另一个API调用中的用户内容。

Answer 1

要“建立网址”，可以这么说，你需要使用ui-sref指令。

鉴于这样的状态：

.state('profile.username', {
    url: '/:username',
    templateUrl: '/partials/profile.username.html',
    controller: 'profileUsernameCtrl'
})

创建指向此状态的链接：

<a ui-sref="profile.username({username: user.name})">{{ user.name }}</a>

其中user是显示该链接的范围的属性。

对于更复杂的网址，您只需添加其他参数：

.state('browse.item', {
    url: '/:username/:itemId'
})

要获取参数，请在控制器中使用$stateParams服务，如下所示：

.controller('MyController', function($scope, $stateParams) {
    $scope.username = $stateParams.username;
    $scope.itemId = $stateParams.itemId;
})

如何使用动态URL在Angular JS中创建动态页面

1 个答案: