Question

我正在尝试创建我的第一个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>

我的愿望列表（简化）

<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},
  });
}]);

所以我的简单问题是。这是在breadcrumb中显示member.name的正确方法，还是有更正确的方式在心愿单中显示此信息？

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

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

Answer 1

开始以角度2工作，所以我关闭了这个问题。

我如何组织angularjs页面？

1 个答案: