CODEWITHSUNDEEP
angularjsrestdjango-rest-framework
jakobdo
jakobdo

Reputation: 1302

How do i organize my angularjs page?

I'm trying to create my first angularjs page. A small wishlist to my family.

My simplified 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>

My wish-list.html (simplified)

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

And here is my 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},
  });
}]);

So my simple question is. Is this the right way to show member.name in breadcrumb or are there a more correct way to show this info inside the wishlist?

The member id is used to show wishes connected to a member. So should the call also return the member.name?

I hope this make sense or else please ask for further details.

Upvotes: 1

Views: 73

Answers (1)

jakobdo
jakobdo

Reputation: 1302

Started working in angular 2, so i close this question.

Upvotes: 1

Related Questions