为每个angularjs菜单项创建配置文件的工业机制

我正在使用spring boot和AngularJS创建一个网站，有一个动态创建的侧菜单，每个菜单项代表一个人。当用户单击某个菜单项时，应显示该特定菜单项的人员配置文件。我已经为个人资料创建了一个模板页面，我想知道在单击的菜单项中使用同一个人资料页面的机制是什么？

这是动态菜单的代码

 <md-list>                                
    <a ng-repeat="x in menuItems" href="{{x.href}}">{{x.name}}</a>
 </md-list>           

Angularjs路由提供程序

app.config(function ($routeProvider) {
    $routeProvider
            .when("/menu1", {
                templateUrl: "template.html"
            })
            .when("/menu2", {
                templateUrl: "template.html"
            })
            .when("/menu3", {
                templateUrl: "template.html"
            })
            .when("/menu4", {
                templateUrl: "template.html"
            })
            .when("/menu5", {
                templateUrl: "template.html"
            });
})

---

您可以使用$routeProvider中的

resolve

属性

app.config(function ($routeProvider) {
    $routeProvider
        .when("/menu1", {
            templateUrl: "template.html"
            controller: "ProfilePageController"
            resolve: {
                profile: function(ProfileService) {
                    return ProfileService.getProfile(1)
                }
            }
        })
        .when("/menu2", {
            templateUrl: "template.html"
            controller: "ProfilePageController"
            resolve: {
                profile: function(ProfileService) {
                    return ProfileService.getProfile(2)
                }
            }
        })
        .when("/menu3", {
            templateUrl: "template.html"
            controller: "ProfilePageController"
            resolve: {
                profile: function(ProfileService) {
                    return ProfileService.getProfile(3)
                }
            }
        });
})

然后为您服务：

app.factory("ProfileService", function() {
    return {
        getProfile: function(id) {
            // Fetch the profile
            return profile;
        }
    }
});

现在，您需要在控制器中注入解析：

app.controller("ProfilePageController", function (profile) {
   $scope.profile = profile; 
});

---

但这不是ui路由器，这是ngRoute，无论如何，你必须将路由更改为一个路由，而不是像你在这里所说的那样

 $routeProvider
    .when("/menu/:id", { // :id => my dynamic param for the route
        templateUrl: "template.html"
        controller: "ProfilePageController"
        resolve: {
            profile: function(ProfileService , $routeParams ) {
                // $routeParams.id => get the route param that called :id
                return ProfileService.getProfile($routeParams.id);
            }
        }
    })

---

你用过ui路由器吗？@AhmedMostafa是的，我用过ui路由器。我用代码片段shi@jifama编辑了我的问题，谢谢你的回答，它似乎适合我的场景。我会核对我的密码，然后告诉你。

 $routeProvider
    .when("/menu/:id", { // :id => my dynamic param for the route
        templateUrl: "template.html"
        controller: "ProfilePageController"
        resolve: {
            profile: function(ProfileService , $routeParams ) {
                // $routeParams.id => get the route param that called :id
                return ProfileService.getProfile($routeParams.id);
            }
        }
    })