从单个 angularjs 文件调用所有控制器答案

【问题标题】：Calling all controllers from a single angularjs file从单个 angularjs 文件调用所有控制器
【发布时间】：2016-07-19 04:23:42
【问题描述】：

我是 Angularjs 和 Ionic 的新手，我已经尝试了这个论坛和其他地方提供的所有解决方案。我似乎没有任何工作。

我想开发一个应用程序，其主页设计为一组卡片（照片）。当点击一张卡片时，我们会被引导到另一个页面。我阅读了有关 ng-view 的信息，并尝试了几个教程，但没有一个对我有用。

这是一个例子：

索引.html

    <!DOCTYPE html>
       <html ng-app="sampleApp">
         <head>
            <meta charset="utf-8">
            <script src="js/app.js"></script>
            <script src="js/plugins/angular.js"></script>
            <script src="js/plugins/angular-route.js"></script>
            <title>AngularJS Routing example</title>
         </head>

        <body>

    <div class="container">
    <div class="row">
    <div class="col-md-3">
      <ul class="nav">
        <li><a href="#AddNewOrder"> Add New Order </a></li>
        <li><a href="#ShowOrders"> Show Order </a></li>
      </ul>
    </div>
    <div class="col-md-9">
        <div ng-view></div>
    </div>
    </div>
    </div>
  </body>
</html>

app.js

//Define an angular module for our app
angular.module('sampleApp', ['ionic', 'ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.

  when('/AddNewOrder', {
    templateUrl: 'templates/add_order.html',
    controller: 'AddOrderController'
}).

  when('/ShowOrders', {
    templateUrl: 'templates/show_orders.html',
    controller: 'ShowOrdersController'
  }).

  otherwise({
    redirectTo: '/AddNewOrder'
  });

  }])


 .controller('AddOrderController', function($scope) {

$scope.message = 'This is Add new order screen';

})

 .controller('ShowOrdersController', function($scope) {

$scope.message = 'This is Show orders screen';

});

和

add_order.html

    <h2>Add New Order</h2>

    {{ message }}

我得到的错误是这样的：

> > ReferenceError: angular is not defined  app.js:2:5 Error: [$injector:modulerr] Failed to instantiate module sampleApp due to:
> [$injector:nomod] Module 'sampleApp' is not available! You either
> misspelled the module name or forgot to load it. If registering a
> module ensure that you specify the dependencies as the second
> argument.
> http://errors.angularjs.org/1.2.9/$injector/nomod?p0=sampleApp
> minErr/<@http://localhost:8100/js/plugins/angular.js:78:12
> module/<@http://localhost:8100/js/plugins/angular.js:1529:1
> ensure@http://localhost:8100/js/plugins/angular.js:1454:38
> module@http://localhost:8100/js/plugins/angular.js:1527:1
> loadModules/<@http://localhost:8100/js/plugins/angular.js:3622:22
> forEach@http://localhost:8100/js/plugins/angular.js:303:7
> loadModules@http://localhost:8100/js/plugins/angular.js:3616:5
> createInjector@http://localhost:8100/js/plugins/angular.js:3556:11
> bootstrap/doBootstrap@http://localhost:8100/js/plugins/angular.js:1299:20
> bootstrap@http://localhost:8100/js/plugins/angular.js:1314:1
> angularInit@http://localhost:8100/js/plugins/angular.js:1263:5
> @http://localhost:8100/js/plugins/angular.js:20555:5
> trigger@http://localhost:8100/js/plugins/angular.js:2342:7
> createEventHandler/eventHandler/<@http://localhost:8100/js/plugins/angular.js:2613:7
> forEach@http://localhost:8100/js/plugins/angular.js:310:11
> createEventHandler/eventHandler@http://localhost:8100/js/plugins/angular.js:2612:5

编辑

我从 app.js 的模块依赖项中删除了“ionic”。现在第一个链接“添加订单”有效，但第二个链接“显示订单”无效。

【问题讨论】：

你正试图链接你的模块声明，但你有一个分号结束每个。
我改了。还是一样的问题。
你能创建一个 jsfiddle/plunk

标签： javascript jquery angularjs ionic-framework ngroute

【解决方案1】：

我认为您应该更改库的顺序：

<head>
     <meta charset="utf-8">
     <script src="js/plugins/angular.js"></script>
     <script src="js/plugins/angular-route.js"></script>
     <script src="js/app.js"></script>    
     <title>AngularJS Routing example</title>
</head>

【讨论】：

还是同样的问题
@Hana 您的应用是在“js/app.js”还是“app.js”中。因为您同时引用了它们。同样，您在“js/plugins/angular.js”中引用 Angular，然后从 CDN（那时的旧版本）中引用。您需要认真清理您的资料，然后才能有人给您一个不是半猜的答案。
在 html 的末尾，您正在复制 angular 和 app 库，这可能是原因。
仍然无法正常工作'错误：[$injector:modulerr] 无法实例化模块 sampleApp 由于：[$injector:modulerr] 无法实例化模块 ionic 由于：[$injector:nomod]模块“离子”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。'
我还没有看到你正在使用一个名为 ionic 的模块，你应该在脚本中包含这个库。像这样：