JSFiddle - React, Tailwind, and code Playground

by cardeol

HTML

<script src="//code.angularjs.org/1.4.8/angular-route.js"></script>
<script type="text/ng-template" id="views/friends.html">
  <div>ROUTE: {{route}}</div>
  <h2>{{user.name}} Profile</h2>
  {{user.name}} friends:  
  <ul ng-repeat="friend in user.friends">
     <li><a ng-href="#/friends/{{friend}}">{{getFriendName(friend)}}</a></li>
 </ul>
</script>
<div ng-view></div>

JavaScript

angular.module('myApp', ['ngRoute'])

.config(function ($routeProvider) {
    $routeProvider
       .when('/friends/:username', {
         controller: 'FriendsController',
         templateUrl: 'views/friends.html'
      })
      .otherwise({
        redirectTo: '/friends/foo'
      });  
})

.controller('FriendsController', function($scope, $routeParams, UserService, $location) { 
  $scope.user = UserService.get($routeParams.username);   
  $scope.getFriendName = UserService.getName;
  $scope.route = $location.path();
})

.service('UserService', function() {
   var Users = [
   {
      id: 'foo',
      name: 'Foo Smith',
      friends: ['bar', 'baz']
    },{
      id: 'bar',
      name: 'Barry Bar',
      friends: ['foo']
    },{
      id: 'baz',
      name: 'Baz Bazzy',
      friends: ['bar', 'foo']
    }
   ];
   var methods = {
   		"get": function(pkey) {
           var result = null;
      	   angular.forEach(Users, function(v) {
              if(v.id == pkey) result = v;
    			 });
           return result;
      },
     	"getName": function(pkey) {
           var result = methods.get(pkey);
           return (result !== null) ? result.name  : null;
      }
   }
   return methods;
})

;