CODEWITHSUNDEEP
javascriptjqueryajaxangularjs
Rohit Aggarwal
Rohit Aggarwal

Reputation: 650

jQuery loading <script> but not evaluating the same under AngularJS

I'm developing a single page application which I intend to keep as much modular as possible. Also, it'll be a rather large application, so, I intend to load the controllers only when the associated view is loaded. For achieving the same I have structured my code in the following way:

app.js

var app = angular.module("app", ['ngRoute']).config(function($httpProvider) { 
    $httpProvider.defaults.headers.common['X-Requested-With'] = "XMLHttpRequest";
    $httpProvider.defaults.headers.post['Content-Type'] = "application/x-www-form-urlencoded; charset=utf-8";
});

route.js

app.config(function($routeProvider) {
    $routeProvider.when("/user/login", {
        templateUrl: "/user/login.html",
        controller: "LoginCtrl"
    });
});

user/login.html

<script type="text/javascript" src="/js/user/login.js"></script>
<div>
    <!-- Complete Login Form -->
</div>

js/user/login.js

app.controller("LoginCtrl", function() {
    // Login related functionality
});

Now, the problem that I'm facing is that the login.html template is loading properly. Also, the request for login.js is being sent and the response is received successfully. But, still I'm getting error from AngularJS saying that the LoginCtrl is undefined. I researched on the same and found that including jQuery solves the problem, but that didn't happen. I tried putting a simple alert in the login.js file, but the popup also didn't appear.

Any help is much appreciated in the matter.

Upvotes: 0

Views: 72

Answers (1)

harishr
harishr

Reputation: 18055

you need to change the location of login controller

app.config(function($routeProvider) {
    $routeProvider.when("/user/login", {
        templateUrl: "/user/login.html",
         //controller: "LoginCtrl" // remove this
    });
});

and replace html like this

<script type="text/javascript" src="/js/user/login.js"></script>
<div ng-controller="LoginCtrl">
    <!-- Complete Login Form -->
</div>

Upvotes: 1

Related Questions