CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Rob
Rob

Reputation: 119

ng-include doesn't work when ng-app gets a name

I'm using ng-include to include a navbar. In combination with ng-app="" it works fine.But when I use a name (e.g. ng-app="myApp") then it doesn't work anymore. See example.

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body >
        <div ng-app="">
        <div ng-include="'pages/navbar.html'"></div>
            <script src="app.js"</script>
        </div>

    </body>
</html>

app.js

var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
   });

This above works fine, but when I insert the name "myApp" it stops including the navbar.

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body >
        <div ng-app="myApp">
            <div ng-include="'pages/navbar.html'"></div>
            <script src="app.js"</script>
        </div>

    </body>
</html>

Why?

Upvotes: 0

Views: 341

Answers (2)

anujayk
anujayk

Reputation: 584

I believe you have missed including your app.js file in a proper style. are you getting any error in console?

Edited

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body >
        <div ng-app="myApp">
            <div ng-include="'pages/navbar.html'"></div>

        </div>
<script src="app.js"></script>
    </body>
</html>

Upvotes: 0

br3w5
br3w5

Reputation: 4583

You have a typo here

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

It should be 

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

As long as this loads after angular.js then your application should be able to find the declaration of the myApp module (which you've asked it to by using ng-app="myApp"

Check in the browser console for any errors - if the script isn't loaded you will see an error like cannot find module

Upvotes: 1

Related Questions