我如何组织我的 angularjs 页面？答案

【问题标题】：How do i organize my angularjs page?我如何组织我的 angularjs 页面？
【发布时间】：2016-03-26 00:28:57
【问题描述】：

我正在尝试创建我的第一个 angularjs 页面。给我家人的小愿望清单。

我的简化 html：

<body ng-controller="memberController">
<nav>
  <div class="container">
    <ul class="nav navbar-nav">
      <li ng-repeat="member in members" ng-class="{'active': isActive(member)}">
        <a ui-sref="member({memberId:member.pk})" ng-bind="member.name"></a>
      </li>
    </ul>
  </div>
</nav>
<div ui-view></div>

我的愿望清单.html（简体）

<ol class="breadcrumb">
  <li><a ui-sref="home">Hjem</a></li>
  <li class="active">{{member.name}}</li>
</ol>

这是我的 app.js

'use strict';

var wishApp = angular.module('wishApp', [
  'ui.router',
  'memberController',
  'memberService',
]);

wishApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider
    .state('home', {
      url: "/",
      templateUrl: static_url('partials/index.html'),
    })
    .state('member', {
      url: "/member/:memberId",
      templateUrl: static_url('partials/wish-list.html'),
      controller: 'WishFilterCtrl',
    })
});

controllers.js

'use strict';
var memberController = angular.module('memberController', []);

memberController.controller('memberController', ['$scope', '$stateParams', 'Member', function($scope, $stateParams, Member) {
  $scope.members = Member.query();

  $scope.isActive = function(member){
    if (member.pk == $stateParams.memberId)
      $scope.member = member;
    return member.pk == $stateParams.memberId;
  };
}]);

services.js

var memberService = angular.module('memberService', ['ngResource']);

memberService.factory('Member', ['$resource', function($resource){
  return $resource('/api/members/:memberId/', {memberId: '@pk'}, {
    query: {method:'GET', isArray:true},
  });
}]);

所以我的简单问题是。这是在面包屑中显示 member.name 的正确方法还是在愿望清单中显示此信息的更正确方法？

会员 ID 用于显示与会员相关的愿望。那么调用是否也应该返回 member.name？

我希望这是有道理的，否则请询问更多详细信息。

【问题讨论】：

标签： angularjs rest django-rest-framework

【解决方案1】：

开始使用 Angular 2，所以我关闭了这个问题。

【讨论】：