0

I've just started with Angular after many years working with MVC. I'm quite familiar with js, HMTL but still beginner in the Angular world.

I lost 3 hours trying to figure out what is wrong with my app.

So the app has 3 files

index.html

 <body ng-app="perica">

        <p>main</p>
        {{ tagline }}
        <a ng-click="logOut();">Logout</a>
        <div ng-view><p>inside</p></div>


    </body>
    <script type="text/javascript" src="../components/angular/angular.js"></script>
<script type="text/javascript" src="../AgularApp.js"></script>
<script type="text/javascript" src="../controllers/AcountController.js">

AngularApp.js

 debugger;
    angular.module('perica', ['ngRoute']).config(['$routeProvider','$locationProvider', function ($routeProvider,  $locationProvider) {

        console.log('in');

            debugger;

            $routeProvider.when('/test', {
            templateUrl: 'views/Account/_Login.html'
    })
    $locationProvider.html5Mode(true);
    }]);

and AccountController.js

   var myApp = angular.module('perica', []);
    myApp.controller('AcountController', ['$scope', function ($scope) {

     $scope.tagline = 'The square root of life is pi!';
            }]);

So as you can see it is a super simple application.

By all the coding logic, I should load angular core scripts the first, then my angular app and at the end angularcontroles.

When I run the app, Chrome hit the first debugger (above angular.module inside AngularApp.js file) and jumped straight into AccountContoler.js and completely ignored what is defined inside of the AngularApp.js.

but When I reversed paths and put first AccountController.js and afterwards AngularApp.js everything worked without any issue

I would be really grateful if someone can shed some light on this issue Thanks!

1 Answer 1

4

By using...

var myApp = angular.module('perica', [])

... in your AccountController.js, you're not loading your already existing 'perica' application (declared in the previously loaded AngularApp.js):
you are re-defining the perica application.

The correct way to refer to your already existing module is using:

angular.module('perica')
                       ^
              no dependency declared

instead of:

angular.module('perica', [])
                         ^
                    dependencies

The logic behind this is quite simple once you're acquainted to it: if you're declaring dependencies while "loading" a module, you're creating that module. Otherwise, you're referring to it.

TL;DR: You're basically using a setter here twice and never actually enhancing your existing module.


Here's a working JSFiddle (link) with your application running. I loaded AngularJS directly from the Javascript framework/extensions menu and referred to an external JS resource for angular-route (fetched from cdnjs: https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js).

I basically simply concatenated both your AngularApp.js and AccountController.js contents to emulate loading them one after the other.


Please note that your also have to declare the controller that controls your view: I took the liberty to enhance your <body ng-app="perica"> element as follows:

<body ng-app="perica" ng-controller="AcountController">
Sign up to request clarification or add additional context in comments.

2 Comments

Exactly!!! Such a stupid mistake. Thanks a lot! Now everything works perfectly and of course I need first to reference mainapp.js and afterwards controllers . Thank you so much!
Glad to have helped you out ;)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.