AngularJS module stops working when using .config

Question

When I create my angular module without any .config, it works. Then when I try to add a .config to configure a route provider, it doesn't work. Why is that? Below are code examples and pictures of the results. I'm using UIBootstrap.

This works:

angular.module('app', ['ui.bootstrap'])


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

      // BUTTONS ======================

      // define some random object
      $scope.bigData = {};

      $scope.bigData.breakfast = false;
      $scope.bigData.lunch = false;
      $scope.bigData.dinner = false;

      // COLLAPSE =====================
      $scope.isCollapsed = false;

    });

This doesn't work:

angular.module('app', ['ui.bootstrap'])


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

  // BUTTONS ======================

  // define some random object
  $scope.bigData = {};

  $scope.bigData.breakfast = false;
  $scope.bigData.lunch = false;
  $scope.bigData.dinner = false;

  // COLLAPSE =====================
  $scope.isCollapsed = false;

})
.config(function ($routeProvider) { 
  /*$routeProvider 
    .when('/', { 
      controller: 'HomeController', 
      templateUrl: 'home.html' 
    }) 
    .otherwise({ 
      redirectTo: '/' 
    }); */
});

Here is my index.html file:

    <!DOCTYPE html>
<html lang="en">

<head>
  <title>My ParseApp site</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- bootstrap version 3.3.5 -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- angularjs version 1.4.8 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <!-- UIBootstrap version 0.14.3 -->
  <script src="ui_bootstrap.js"></script>

  <!-- roboto font 
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>-->

  <link rel="stylesheet" href="page_border.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="container" ng-app="app" ng-controller="mainController">

    <div class="text-center">
      <p class="text-success">Example of using UI Bootstrap to create responsive html elemnts that are data-bound</p>
    </div>

    <h2>Buttons</h2>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
        Breakfast
      </label>
      <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
        Lunch
      </label>
      <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
        Dinner
      </label>
    </div>

    <pre><code>{{ bigData | json }}</code></pre>

    <h2>Collapse</h2>

    <a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
    Toggle Panel
  </a>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
        <a href="#" ng-click="isCollapsed = !isCollapsed">
          Collapsible Group Item #1
        </a>
      </h4>
      </div>
      <div collapse="isCollapsed">
        <div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
          you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>

    <pre><code>{{ isCollapsed }}</code></pre>

  </div>




  <!-- Modules -->

    <!-- Controllers 
    <script src="HomeController.js"></script>
    <script src="PhotoController.js"></script>

    <!-- Services 
    <script src="photos.js"></script>-->



</body>

</html>

This is the error:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A41%3A249)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4458n @ angular.js:340g @ angular.js:4419eb @ angular.js:4344c @ angular.js:1676yc @ angular.js:1697Zd @ angular.js:1591(anonymous function) @ angular.js:29013b @ angular.js:3057If @ angular.js:3346Hf.d @ angular.js:3334

Try naming your module 'myApp' instead. It might be that you're defining a global variable called app. — Shaun Scovil
– Shaun Scovil, Commented Dec 13, 2015 at 5:08
It works for me. Try to take a look at plnkr.co/edit/woETq2Gxp9NG1i0RHp1A . Maybe you can try to provide a sample in plunker? — Wei-jye
– Wei-jye, Commented Dec 13, 2015 at 5:28
Instead of just saying "it doesn't work", press F12 (or Cmd-Amt-I on MacOS), open the console, and read the error message. — JB Nizet
– JB Nizet, Commented Dec 13, 2015 at 7:42

Maher · Accepted Answer · 2015-12-13 13:51:57Z

This worked for me, copy and paste it, and be sure your ng-route is injected to your app.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My ParseApp site</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/Content/ui-bootstrap-csp.css" rel="stylesheet" />
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-route.js"></script>
    <script src="/Scripts/angular-ui/ui-bootstrap.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="container" ng-app="app" ng-controller="mainController">

        <div class="text-center">
            <p class="text-success">Example of using UI Bootstrap to create responsive html elemnts that are data-bound</p>
        </div>

        <h2>Buttons</h2>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox>
                Breakfast
            </label>
            <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox>
                Lunch
            </label>
            <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox>
                Dinner
            </label>
        </div>

        <pre><code>{{ bigData | json }}</code></pre>

        <h2>Collapse</h2>

        <a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed">
            Toggle Panel
        </a>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#" ng-click="isCollapsed = !isCollapsed">
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div collapse="isCollapsed">
                <div class="panel-body">
                    Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
                    you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <pre><code>{{ isCollapsed }}</code></pre>

    </div>
</body>
</html>

Collectives™ on Stack Overflow

AngularJS module stops working when using .config

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related