Clever Geek Handbook

Ng-view doesn't evaluate loading javascript (css, etc.)

My problem is that when Angular loads the templateUrl (via $ routeProvider) inside the ng-view, it doesn't evaluate all the javascript either. I tried to figure it out, but now I am really confused. During my search, I found a lot of new topics and I got lost in them. Any ideas?

Tale

I tried to figure it out if anyone else has encountered this problem before, or if there is any solution to this problem. What I found was something like lazy loading directives or using requirejs, but I'm not sure if these tools really solve these problems.

As Buu Nguyen said in this thread

The way jqLite works. If you want scripts in templates to be evaluated include jQuery before AngularJS. If jQuery is enabled the script will be evaluated. Try to remove jQuery and you should see the originally observed behavior.

I've tried including jquery in front of angularjs but doesn't seem to have any effect at all. There are sevaral streams that I read, for example

but nothing leads to a solution (maybe I missed something). And I think this is not even my problem. I dont want to (re) upload javascript files, I just want to rate my upload.

To be honest, I am really confused. Subsequently, I first encountered RequireJS. (lazy loading, and friends, again)

I watched Thomas Burleson 's youtube video and I almost understand what it is. And I've looked a lot more articles on the topic (because I found interest), but the solution has to be somewhere else.

Here is the situation

While I am working on my angularjs app, I made a partial site as a split .html file (just in case) and it looks nice. Then I cut this .html file into chunks (header, top menu, content, footer) and use its body tag as a div inside a partial urlTemplate.

<body ng-app="myApp" id="page-top">

    <div class="wrapper">
        <div class="navigation">
            <div top-menu></div>
        </div>

        <div ng-view></div>

        <footer id="page-footer">
           <div class="container">
                 <span>Copyright © 2014. All Rights Reserved.</span>
                 <span class="pull-right"><a href="#page-top" class="roll">Go to top</a></span>
           </div>
        </footer>
    </div>
</body>

angular $ routeprovider:

angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'main/templates/main.html'
        }).when('/ad-element', {
            templateUrl: 'submit/templates/submit.html'
        }).when('/404', {
            templateUrl: 'errors/templates/404.html'
        }).otherwise({
            redirectTo: '/404'
        });
    }]);

submit.html

<div class="page-sub-page page-submit">
    <div ng-controller="SubmitController" class="container">
          <form ...></form>
    </div>
</div>

Every Angular feature works, the only visible difference is the look and feel.

It's good: good

And this is bad: bad

+3


source to share


No one has answered this question yet

See similar questions:

or similar:



More articles:


All Articles