require.jsとangular.jsを使用

Question

私はrequire.jsで新しく、requier.jsをangular.jsで実装していますが、エラーが発生しました。ここに私のコードは次のとおりです。

設定ファイル：

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']); 
     }); 
    } 
); 

これは私のアプリのファイルです：

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; 
}); 

これは、コントローラファイルです：

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; 
}); 

私が間違っているものを知ってはいけませんこのコードではこれを整理するのを手伝ってください。

Answer 1

公式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; 
});