title: Get Angular JS,Require JS & Framework 7 to work-together
body: <p>I am trying to create a seed application using Angular JS,RequireJS &amp; Framework 7. I have so far created the following folder structure.</p>
  
  <p>My main folder looks like below:</p>
  
  <p><img src="https://i.stack.imgur.com/JmYDW.jpgmy" alt="enter image description here"></p>
  
  <p>and my scripts folder looks like this :</p>
  
  <p><img src="https://i.stack.imgur.com/qYRIi.jpg" alt="enter image description here"></p>
  
  <p>and my libraries are :</p>
  
  <p><img src="https://i.stack.imgur.com/OpUBL.jpg" alt="enter image description here"></p>
  
  <p>I was able to the view -> controller flow working properly. But when I try to inject a service object to the controller I get the following error.</p>
  
  <p><img src="https://i.stack.imgur.com/FaXDe.jpg" alt="enter image description here"></p>
  
  <p>I am sure I must be missing something. I have given my code below:</p>
  
  <p>require-main:</p>
  
  <pre><code>(function() {
  require.config({
      baseUrl: "scripts",    
  
      // alias libraries paths
      paths: {
          'angular': '../libs/angular',
          'angular-route': '../libs/angular-route',
          'angular-animate':'../libs/angular-animate',
          'angularAMD': '../libs/angularAMD.min',
          'Framework7':'../libs/framework7',
          'UserController':'controller/UserCtrl',
          'WebCallManager':'services/WebCallManager'
      },
  
      // Add angular modules that does not support AMD out of the box, put it in a shim
      shim: { 
          'angularAMD': ['angular'],
          'angular-route': ['angular'],
          'angular-animate':['angular'],
          'Framework7':{exports: 'Framework7'}
      },
  
      //kick start application
      deps: ['app']
  });
  
  require(['Framework7'], function(Framework7) {
  
       f7 = new Framework7({
          modalTitle: 'Seed App',
          swipePanel: 'left',
          animateNavBackIcon: true
      });
  
      return {
          f7: f7
      };
  });
  
   })();
  </code></pre>
  
  <p>app.js :</p>
  
  <pre><code>define(['angularAMD', 'angular-route','angular-animate'], function (angularAMD) {
  var app = angular.module("app", ['ngRoute','ngAnimate']);
  
  app.config(function ($routeProvider) {
  
      $routeProvider.when("/", angularAMD.route({ templateUrl: '../pages/login.html',controller: 'UserController'}));
      $routeProvider.when("/login", angularAMD.route({ templateUrl: '../pages/home.html', controller: 'UserController'}));
  });
  angularAMD.bootstrap(app);
  return app;
  });
  </code></pre>
  
  <p>UserController :</p>
  
  <pre><code>define(['app'], function (app) {
  app.register.controller('UserController', function ($scope,$location,webcallService) {
  
      $scope.loginUser = function(){
          console.log("Login User Called...");
          $location.path('/login').replace();
          console.log("View Navigated...");
      };
  
  
      $scope.slidePanel = function(){
           f7.openPanel('left');
      };
  
  
      $scope.doWebCall = function(){
          console.log("Doing the Web Call...");
          webcallService.sendGetRequest();
      };
  });
   });
  </code></pre>
  
  <p>WebCallManager.js (Service)</p>
  
  <pre><code>define(['app'], function (app) {
  app.service('webcallService', function() {
      var self = this;
      self.sendGetRequest = function() {
          console.log("Sending HTTP Get Request");
      }
  
      self.sendPostRequest = function() {
          console.log("Sending HTTP Post Request");
      }
  });
   });
  </code></pre>
  
  <p>And my pages :</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script data-main="scripts/main" src="libs/require.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;div class="slide-animation page-content" ng-view &gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>login.html:</p>
  
  <pre><code>&lt;div class="content-block login-input-content"&gt;
  &lt;div class="store-data list-block"&gt;
      &lt;div&gt;
          &lt;input type="text" class="login-name" placeholder="Username"&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="password" class="password" placeholder="Password"&gt;
      &lt;/div&gt;
      &lt;a class="multi-language" href="#"&gt;&lt;i class="icon ios7-world-outline"&gt;&lt;/i&gt;&lt;span&gt;english&lt;/span&gt;&lt;/a&gt;
       &lt;/div&gt;    
       &lt;/div&gt;
  
       &lt;div class="content-block login-btn-content"&gt;
       &lt;button ng-click="loginUser()" class="button button-big button-submit login-submit"&gt;Login&lt;/button&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>Home.html:</p>
  
  <pre><code>&lt;div&gt;
   &lt;h3&gt;Welcome to Mobility In Angular-JS&lt;/h3&gt;
  &lt;div class="content-block login-btn-content"&gt;
      &lt;button ng-click="doWebCall()" class="button button-big button-submit login-submit"&gt;Send Get&lt;/button&gt;
      &lt;br/&gt;&lt;br/&gt;
      &lt;button ng-click="doWebCall()" class="button button-big button-submit login-submit"&gt;Send Post&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Could Anyone help me out ??. YOu can also download and run the entire project <a href="https://drive.google.com/file/d/0B85vUqBPKLOxOVZ3d0pNVEJzNW8/edit?usp=sharing" rel="nofollow noreferrer">here</a>.</p>