3

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?

1 Answer 1

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.org/docs/download.html

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

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

Sign up to request clarification or add additional context in comments.

3 Comments

Thanks mam, How can I do it through 'Injection'? Please suggest.
whatever module you want to use download the npm module or file or online link in script tag in index html file with path and then add the dependency in angular app in module like ex: app.module('app1',['dependacy1'])
Thanks. That was helpful.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.