在不同的文件中定义角度模块

时间:2015-05-12 05:55:32

标签: javascript angularjs module

我的应用程序中有3个js文件 (mainApp.js, template.js, app.js

的index.html

<html lang="en" ng-app="myapp">

mainApp.js

var app = angular.module('myapp', 
      ['myapp.templateApp', 'myapp.demoApp']);

template.js

angular.module('myapp.templateApp', ['slick', 'localization'])
.controller('CountryLaunguageSelection', [
    '$scope', '$rootScope','$http', 
    function($scope, $rootScope,$http) {

    }
]);

app.js

var app = angular.module('myapp.demoApp', [
              'ui.router',
              'ui.grid',
              'ngTouch',
              'ui.grid.selection',
              'ui.bootstrap',
              'ngTable'
          ]);

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

});

我需要将3个模块放在3个不同的文件中。有人可以告诉我上面的代码有什么问题。

我收到以下错误

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.28/$injector/modulerr?p0=app&p1=Error%3A%20…0%2FdemoApp%2Ftemplate%2Fthird-party%2Fangular%2Fangular.min.js%3A18%3A387)

1 个答案:

答案 0 :(得分:0)

刚创建了这样的localhost - 它有效。尝试比较您的index.html和依赖项。

<强>的index.html

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="angular.min.js"></script>
  <script src="mainApp.js"></script>
  <script src="app.js"></script>
  <script src="template.js"></script>
</head>
<body>
<div ng-controller="CountryLaunguageSelection">
  {{data.myData}}
</div>
</body>
</html>

<强> mainApp.js

var app = angular.module('myapp', ['myapp.templateApp', 'myapp.demoApp']);

<强> app.js

var app = angular.module('myapp.demoApp', []);

app.config(function() {

});

<强> template.js

angular.module('myapp.templateApp', [])
  .controller('CountryLaunguageSelection', [
    '$scope', '$rootScope','$http',
    function($scope, $rootScope, $http) {
        $scope.data = {
          myData: "Hello"
        };
    }
  ]);