Use require.js with angular.js

Question

I am new in require.js, I am implementing requier.js with angular.js, but i got error. Here is my code:

config file:

require.config({
    paths: {
        angular: 'https://code.angularjs.org/1.5.5/angular.min',
        angularRoute: '//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.min',
        angularAnimate: '//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min',

    },
    shim: {
        'angular' : {'exports' : 'angular'},
        'angularRoute': ['angular'],
        'angularAnimate': ['angular']
    },
    priority: [
        "angular"
    ],
});

require([
    'angular',
    'app',
    'controllers/first-controller',
        'controllers/second-controller',
        'controllers/third-controller',
        'services/services',
        'directives/directives'
    ], function(angular, app) {
        var $html = angular.element(document.getElementsByTagName('html')[0]);
        angular.element().ready(function() {
            // bootstrap the app manually
            angular.bootstrap(document, ['WalletHubApp']);
        });
    }
); 

This is my app file:

define(['angular'], function (angular) {
    var app = angular.module('app', ['ui.router','ngAnimate']);

WalletHubApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/walletHub/1/');

    $stateProvider

        .state('test', {
            url: '/walletHub/:id/{folderPath:[a-zA-Z0-9/]*}',
           templateUrl: function ($stateParams){
                return  "templates/"+$stateParams.id + '.html';
                },
            controllerProvider: function($stateParams) {
                console.log($stateParams)
              var ctrlName = $stateParams.id + "Controller";
              return ctrlName;
          }
        });

    });    
 return app;
});

This is Controller File:

define(['app'], function(app) {
    WalletHubApp.controller('1Controller', function ($scope,$stateParams,$stateParams,$state,$http) {
 $http.get('sample.json')
       .then(function(res){
         $scope.persons = res.data              
        });


    var parts = $stateParams.folderPath.split('/')
    $scope.params = false;
    if(parts[0] != "")
    {
        $scope.parts = parts;
        $scope.params = true;

    }   
  })
return;
});

I dont know what is wrong in this code.Please help me to sort out this

Answer 1

According to official document

It is normally best to avoid coding in a name for the module and just let the optimization tool burn in the module names.

// in app.js file, remove module name :

    define(["angular", "angularRoute","angularAnimate"], function(angular) {
        var WalletHubApp = angular.module('WalletHubApp', ['ui.router','ngAnimate']);

        WalletHubApp.config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/walletHub/1/');

        $stateProvider

            .state('test', {
                url: '/walletHub/:id/{folderPath:[a-zA-Z0-9/]*}',
               templateUrl: function ($stateParams){
                    return  "templates/"+$stateParams.id + '.html';
                    },
                controllerProvider: function($stateParams) {
                    console.log($stateParams)
                  var ctrlName = $stateParams.id + "Controller";
                  return ctrlName;
              }
            });

        });    
     return WalletHubApp;
    });


// in controller file change WalletHubApp to app

define(['app'], function(WalletHubApp) {
    WalletHubApp.controller('1Controller', function ($scope,$stateParams,$stateParams,$state,$http) {
 $http.get('sample.json')
       .then(function(res){
         $scope.persons = res.data              
        });


    var parts = $stateParams.folderPath.split('/')
    $scope.params = false;
    if(parts[0] != "")
    {
        $scope.parts = parts;
        $scope.params = true;

    }   
  })
return;
});