Simple AngularJS and RequireJS

<!DOCTYPE html>
<html>

  <head>
    <script data-main="js/main.js" data-require="require.js@2.1.4" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <ul>
      <li><a href="#/view1">View 1</a></li>
      <li><a href="#/view2">View 2</a></li>
    </ul>
    <hr></hr>
    <div ng-view></div>
  </body>

</html>

/* Styles go here */


h3.title {
    color: DarkBlue;
}

li.hlist {
    height: 160px;
    width: 160px;
    display: inline;
    list-style-type: none;
}

require.config({
  baseUrl: "js",
  
	// alias libraries paths
  paths: {
      'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min',
      'angular-route': '//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min',
      'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
      'View1Controller': 'scripts/controllers/ctrl1',
      'View2Controller': 'scripts/controllers/ctrl2',
      'dataServices': 'scripts/services/dataServices',
      'app': 'scripts/app'
  },

  shim: {
      'app': ['angular-route'],
      'angular-route': ['angular']
  },

  // kick start application
  deps: ['app']

});

define(['app'], function (app) {
    app.register.controller('View1Controller', ['$scope', function ($scope) {
        $scope.title = "View 1"; 
    }])
});

define(['app','dataServices'], function (app) {
  var injector = angular.injector(['dataServices','ng']);

  app.register.controller('View2Controller', ['$scope', function ($scope) {
    var Pictures = injector.get("Pictures");
    $scope.title = "Second View";
    
    /**
     * A simple:
     *  $scope.rows = Pictures.query();
     * does not works as the dataServices seems to be running outside of angular.
     */
    Pictures.query().then(function (data) {
      $scope.$apply(function () {
        $scope.rows = data;
      })
    });

  }])

});

<h3 class="title">{{title}}</h3>

<h3 class="title">{{title}}</h3>
<ul>
    <li class="hlist" ng-repeat="row in rows">
        <img ng-src="{{row.media.m}}">
    </li>
</ul>

define(['app'], function (app) {

    var service = angular.module("dataServices", []);
    
    service.factory('Pictures', ['$http', '$q', '$log', function ($http, $q, $log) {
        var feed_url = "http://ycpi.api.flickr.com/services/feeds/photos_public.gne?format=json&tags=London&jsoncallback=JSON_CALLBACK";
        return {
            query: function () {
                var d = $q.defer();
                
                $http.jsonp(feed_url).success(function (data) {
                    d.resolve(data.items);
                }).error(function (data, status, headers, config) {
                    $log.error("Error: ", headers);
                    d.reject(data);
                });
                    
                return d.promise;
            }
        };
    }]);
    
    return service;
});

define(function () {

  var app = angular.module("webapp", ['ngRoute']);

  app.config(['$routeProvider', '$controllerProvider', '$provide', function ($routeProvider, $controllerProvider, $provide) {
      
      app.register = {
          controller: $controllerProvider.register,
          factory: $provide.factory
      };
      
      function resolveController(names) {
          return {
              load: ['$q', '$rootScope', function ($q, $rootScope) {
                  var defer = $q.defer();
                  require(names, function () {
                      defer.resolve();
                      $rootScope.$apply();
                  });
                  return defer.promise;
              }]
          }
      }
      
      $routeProvider
          .when("/view1", {
              templateUrl: "views/view1.html", controller: "View1Controller",
              resolve: resolveController(["View1Controller"])
          })
          .when("/view2", {
              templateUrl: "views/view2.html", controller: "View2Controller",
              resolve: resolveController(["View2Controller"])
          })
          .otherwise({redirectTo: '/view1'})
  }]);

  angular.element(document).ready(function () {
      angular.bootstrap(document, ['webapp']);
  });

  return app;
});