Calling all controllers from a single angularjs file

Question

I am new to Angularjs and Ionic, and I have tried all the solutions provided in this forum and elsewhere. I cannot seem to have anything working.

I want to develop an application with a home page designed as a set of cards (photos). When clicking on a card, we are directed to another page. I read about ng-view, and tried several tutorials, and none of them worked for me.

Here is an example:

Index.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';

});

and

add_order.html

    <h2>Add New Order</h2>

    {{ message }}

The error I'm get is this :

> > 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

Edit

I deleted 'ionic' from the module dependencies in app.js. Now the first link "add order" works, but not the second link "show order".

You're trying to chain your module declarations, but you have a semi-colon closing each one. — Lex, Mar 30 '16 at 22:55

score 0 · Answer 1 · answered Mar 30 '16 at 23:00

0

I think you should change the order of the libraries:

<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>

answered Mar 30 '16 at 23:00

Kevin Sanchez

2,215
2
11
19

still the same problem – Hana Mar 30 '16 at 23:02
1

@Hana Is your app in "js/app.js" or "app.js". Because you are referencing them both. As well you are referencing Angular in "js/plugins/angular.js" and then from a CDN (an old version at that). You need to do some serious cleanup on your stuff before anyone's going to be able to give you an answer that isn't half guess. – Lex Mar 30 '16 at 23:07
At the end of the html you are duplicating the angular and app libraries, it could be the reason. – Kevin Sanchez Mar 30 '16 at 23:10
still it does not work 'Error: [$injector:modulerr] Failed to instantiate module sampleApp due to: [$injector:modulerr] Failed to instantiate module ionic due to: [$injector:nomod] Module 'ionic' 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.' – Hana Mar 30 '16 at 23:13
I haven't seen that you are using a module called ionic, you should include the library in the scripts. Something like this: – Kevin Sanchez Mar 30 '16 at 23:16
I added this : no change :/ – Hana Mar 30 '16 at 23:27
Did you added the library after the angular library but before the app.js? – Kevin Sanchez Mar 30 '16 at 23:34
I fixed it. How to change the whole page? I mean instead of loading the template leaving the links and the same layout of index.html? – Hana Mar 30 '16 at 23:36

Calling all controllers from a single angularjs file

1 Answers1