I have two modules namely 'users' and 'groups', and have different routes in both of them. Now I want to use them in some other module, I am trying to require both the modules but getting error as required is not defined. How can I resolve it? Here is my code:

appGroup.js

    let myNinjaAppforGroup = angular.module('myNinjaAppforGroup',['ngRoute']);
    //injected ngRoute module as a dependency in the above statement

    myNinjaAppforGroup.config(['$routeProvider',function($routeProvider)
    {
    //code executes before application runs

    $routeProvider
      .when('/group/home',{
        templateUrl:'views/home.html',  //which view to be rendered if user visits this url
      })
      .when('/group/directory',{
        templateUrl:'views/directory.html',
        controller:'NinjaController'//it will be the controller for the mentioned route
      }).otherwise({
        redirectTo:'/group/home'
      });
    }]);

    myNinjaAppforGroup.run(function()
    {
    //code executes when application runs
    });

    myNinjaAppforGroup.controller('NinjaController',['$scope','$http',function($scope,$http){ 
    //scope is the glue between controller and view. Its also a dependency
      $scope.message="Hey Angular!";//this is accessable in views
      $scope.removeNinja = function(ninja)
      {
        let removedNinja = $scope.ninjas.indexOf(ninja);
        $scope.ninjas.splice(removedNinja,1);
      }
    $scope.addNinja = function()
    {
      $scope.ninjas.push({
        name:$scope.newNinja.name,
        rate:parseInt($scope.newNinja.rate),
        belt:$scope.newNinja.belt,
        available:true
      });
      $scope.newNinja.name="";
      $scope.newNinja.rate="";
      $scope.newNinja.belt="";
    }

    $http.get('model/ninjas.json').then(function(response){
      $scope.ninjas=response.data;
      //console.log(response); for checking the object received
      //whatever data we are getting from the http service is being saved here.
    })

    }]);

    module.exports = myNinjaAppforGroup;

`and appUsers.js`

let myNinjaAppforUsers = angular.module('myNinjaAppforUsers',['ngRoute']);
//injected ngRoute module as a dependency in the above statement

myNinjaAppforUsers.config(['$routeProvider',function($routeProvider)
{
//code executes before application runs

$routeProvider
  .when('/user/home',{
    templateUrl:'views/home.html',  //which view to be rendered if user visits this url
  })
  .when('/user/directory',{
    templateUrl:'views/directory.html',
    controller:'NinjaController'//it will be the controller for the mentioned route
  }).otherwise({
    redirectTo:'/user/home'
  });
}]);

myNinjaAppforUsers.run(function()
{
//code executes when application runs
});

myNinjaAppforUsers.controller('NinjaController',['$scope','$http',function($scope,$http){ 
//scope is the glue between controller and view. Its also a dependency
  $scope.message="Hey Angular!";//this is accessable in views
  $scope.removeNinja = function(ninja)
  {
    let removedNinja = $scope.ninjas.indexOf(ninja);
    $scope.ninjas.splice(removedNinja,1);
  }
$scope.addNinja = function()
{
  $scope.ninjas.push({
    name:$scope.newNinja.name,
    rate:parseInt($scope.newNinja.rate),
    belt:$scope.newNinja.belt,
    available:true
  });
  $scope.newNinja.name="";
  $scope.newNinja.rate="";
  $scope.newNinja.belt="";
}

$http.get('model/ninjas.json').then(function(response){
  $scope.ninjas=response.data;
  //console.log(response); for checking the object received
  //whatever data we are getting from the http service is being saved here.
})

}]);

module.exports = myNinjaAppforUsers;

Now I have another file as app.js, I want to require these two files there, how can this be done?

I have two modules namely 'users' and 'groups', and have different routes in both of them. Now I want to use them in some other module, I am trying to require both the modules but getting error as required is not defined. How can I resolve it? Here is my code:

appGroup.js

    let myNinjaAppforGroup = angular.module('myNinjaAppforGroup',['ngRoute']);
    //injected ngRoute module as a dependency in the above statement

    myNinjaAppforGroup.config(['$routeProvider',function($routeProvider)
    {
    //code executes before application runs

    $routeProvider
      .when('/group/home',{
        templateUrl:'views/home.html',  //which view to be rendered if user visits this url
      })
      .when('/group/directory',{
        templateUrl:'views/directory.html',
        controller:'NinjaController'//it will be the controller for the mentioned route
      }).otherwise({
        redirectTo:'/group/home'
      });
    }]);

    myNinjaAppforGroup.run(function()
    {
    //code executes when application runs
    });

    myNinjaAppforGroup.controller('NinjaController',['$scope','$http',function($scope,$http){ 
    //scope is the glue between controller and view. Its also a dependency
      $scope.message="Hey Angular!";//this is accessable in views
      $scope.removeNinja = function(ninja)
      {
        let removedNinja = $scope.ninjas.indexOf(ninja);
        $scope.ninjas.splice(removedNinja,1);
      }
    $scope.addNinja = function()
    {
      $scope.ninjas.push({
        name:$scope.newNinja.name,
        rate:parseInt($scope.newNinja.rate),
        belt:$scope.newNinja.belt,
        available:true
      });
      $scope.newNinja.name="";
      $scope.newNinja.rate="";
      $scope.newNinja.belt="";
    }

    $http.get('model/ninjas.json').then(function(response){
      $scope.ninjas=response.data;
      //console.log(response); for checking the object received
      //whatever data we are getting from the http service is being saved here.
    })

    }]);

    module.exports = myNinjaAppforGroup;

`and appUsers.js`

let myNinjaAppforUsers = angular.module('myNinjaAppforUsers',['ngRoute']);
//injected ngRoute module as a dependency in the above statement

myNinjaAppforUsers.config(['$routeProvider',function($routeProvider)
{
//code executes before application runs

$routeProvider
  .when('/user/home',{
    templateUrl:'views/home.html',  //which view to be rendered if user visits this url
  })
  .when('/user/directory',{
    templateUrl:'views/directory.html',
    controller:'NinjaController'//it will be the controller for the mentioned route
  }).otherwise({
    redirectTo:'/user/home'
  });
}]);

myNinjaAppforUsers.run(function()
{
//code executes when application runs
});

myNinjaAppforUsers.controller('NinjaController',['$scope','$http',function($scope,$http){ 
//scope is the glue between controller and view. Its also a dependency
  $scope.message="Hey Angular!";//this is accessable in views
  $scope.removeNinja = function(ninja)
  {
    let removedNinja = $scope.ninjas.indexOf(ninja);
    $scope.ninjas.splice(removedNinja,1);
  }
$scope.addNinja = function()
{
  $scope.ninjas.push({
    name:$scope.newNinja.name,
    rate:parseInt($scope.newNinja.rate),
    belt:$scope.newNinja.belt,
    available:true
  });
  $scope.newNinja.name="";
  $scope.newNinja.rate="";
  $scope.newNinja.belt="";
}

$http.get('model/ninjas.json').then(function(response){
  $scope.ninjas=response.data;
  //console.log(response); for checking the object received
  //whatever data we are getting from the http service is being saved here.
})

}]);

module.exports = myNinjaAppforUsers;

Now I have another file as app.js, I want to require these two files there, how can this be done?

• javascript
• angularjs
• require

Share Improve this question Follow edited Mar 20, 2018 at 9:50 Powkachu 2,26822 gold badges2727 silver badges3737 bronze badges asked Mar 20, 2018 at 9:48 user9445158user9445158

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Require doesn't work in browser.Basically require is a node_module by which we can access other modules or files.So please if you are using it on browser side then try other things like import or self.import or injecting.

Doc: http://requirejs/docs/download.html

Add this to your project: http://requirejs/docs/release/2.2.0/minified/require.js

and take a look at this http://requirejs/docs/api.html