1

My app runs all fine as long as I have controllers.js as a sibling of app.js but when I move it to controllers folder and allow webStorm to do its magic by changing its reference from

script src="controllers.js"></script>

to

script src="js/controllers/controllers.js"></script>

the app loses the functionalities in that file.
What am I doing wrong? Thanks

enter image description here

//---app.js---

(function () {                                           
    'use strict';

    angular
        .module('angApp', ['ngRoute'])                 
        .config(['$routeProvider', routeProvider]);     
})();

function routeProvider ($routeProvider) {
    $routeProvider.when('/list', {
        templateUrl: 'partials/mainMenu.html',
        controller: 'MainMenuCtrl'
    }).otherwise({      //home page
        redirectTo: '/list'
    });
}

//better do manual bootstrap and better done last
angular.element(document).ready(function () {
    angular.bootstrap(document, ['angApp']);
});


//---controllers.js---

angular
    .module('angApp')                                                   
    .controller('MainMenuCtrl', ['$scope', '$http', MainMenuCtrl]);     

function MainMenuCtrl ($scope, $http) {
    $http.get('js/mainMenu.json').then(
        function (response) {
            $scope.menuItems = response.data;
        },
        function (error) {
            alert("http error");
        }
    )
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/controllers.js"></script>
    <meta name="viewport" content="width=device-width" />
</head>

<body>
<header>
    <button class="menuLeft" type="button" ng-click="mainMenuToggle()">&#9776;</button>
    <label class="pageTitle">Title of Page</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>

<main ng-view></main>

<footer>
    <ul class="horizontal-style">
        <li><button type="button">NO</button></li>
        <!--<li><button type="button">EXTRA</button></li>-->
        <li><button type="button">YES</button></li>
    </ul>
</footer>

</body>
</html>

Improve this question
4
  • I had a similar problem and I solved it by adding <base href="/"> into the document head tag (You might need to change the path to the root URL of your website) Commented Jan 17, 2016 at 17:30
  • I tried that for no avail. '<base href="Users/empl1/Documents/an1/">' which is where index.html lives. Commented Jan 17, 2016 at 17:54
  • It should be the URL (Example http://localhost/myAngularProject/) Commented Jan 17, 2016 at 17:55
  • Yes. that worked. Thank you :) Commented Jan 17, 2016 at 17:58
Related questions
3426
AngularJS: Service vs provider vs factory
2051
How does data binding work in AngularJS?
1318
How do I access the $scope variable in browser's console using AngularJS?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.