Angular 带附加功能的路由

Question

我想用 Angular 制作一个小网站。该站点包含 3 种类型的内容： - 一个列表，实际上是索引，'/' - 独特的书面内容，即'/r' - 列表中元素的 suv 视图我拥有所有三种类型的视图，但在路由方面我遇到了问题。我已经有一个控制器来处理工作 object，并从中创建列表（数组中的 key-value 对，每个工作项的标题、副标题、缩略图等），但是当我单击其中一个列表项，它的子页面应该出现。我想将它与默认的 $index 属性一起使用，这对我来说已经足够了。但是我可以使用我为清单制作的控制器还是应该制作另一个控制器？感谢帮助，这是我的 app.js:

    (function(){
    var app = angular.module("portApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        .when("/", { // default, basically the list-view
            controller: "",
            templateUrl: "/listView.html"
        });
        .when("/r", { // about section-s content
            controller: "",
            templateUrl: "/resumeView.html"
        });
        .when("/w/:wId", { // sub pages from the list view - $index
            controller: "???",
            templateUrl: "/itemView.html"
        });
        .otherwise({ // otherwise redirect to the listView
            redirectTo: "/"
        });
    });
    app.controller("PortController", function(){ // controller for the listView
        this.products = work;
    });
    var work = [
        {
            Title: "Carlsberg / Dreher",
            subTitle: "Sörösdoboz tervek ",
            Link: "sorok",
            Thumbnail: "img/portfolio08.png",
            Image: "img/sorokmont.png"
        },
        {
            Title: "Pepsi",
            subTitle: "Kristályvíz Promóció",
            Link: "pepsi",
            Thumbnail: "img/portfolio13.png",
            Image: "img/pepsimont.png"
        }    
    ]
})();

我该如何完成这个？

或者我应该以某种方式使用 listView 中项目的 Link 属性并将其发送到带有控制器的 itemView 吗？

Answer 1

要使用您的 'work' 数组创建一个工厂，您需要这样做：

app.factory('workFactory', function() {
  var scope = this;

  scope.work = [
        {
            Title: "Carlsberg / Dreher",
            subTitle: "Sörösdoboz tervek ",
            Link: "sorok",
            Thumbnail: "img/portfolio08.png",
            Image: "img/sorokmont.png"
        },
        {
            Title: "Pepsi",
            subTitle: "Kristályvíz Promóció",
            Link: "pepsi",
            Thumbnail: "img/portfolio13.png",
            Image: "img/pepsimont.png"
        }    
    ];

  return scope;
}

然后在您的控制器中注入并调用它

app.controller('myController', function($scope, workFactory, $routeParams) {
  $scope.work = workFactory.work;
  $scope.product = scope.work[$routeParams.wId];
});

工厂在您的应用程序中是相同的，因此当您在一个控制器中设置工厂属性时，它对另一个控制器仍然适用。这与仅提供自身实例的其他服务类型不同。

Angular 带附加功能的路由

Angular routing with extras

optional-parameters

angularjs

angularjs-routing