Where to include javascript files while using angularjs. What i have done doesn't seem to be working

Question

I want to use javascript in an AngularJS framework but the javascript file is not making any changes to the html code.

<!DOCTYPE html>
<html lang="en" ng-app>

  <head>
    <meta charset="UTF-8">
    <title>BookArt.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="app.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body>

    <div id="header-wrapper" ng-controller="HeaderCtrl">
      <span class="logo pull-left">{{appDetails.title}}</span>
      <span class="tagline pull-left">{{appDetails.tagline}}</span>
      <div class="nav-wrapper pull-left">
        <ul class="nav nav-pills">
          <li class="active"><a href="#">Books</a> </li>
          <li><a href="#">Kart</a> </li>
        </ul>
      </div>
    </div>
  </body>

</html>

Here is my JavaScript file:

var HeaderCtrl = function($scope) {
  $scope.appDetails = {
    title: "BookArt";tagline: "We have 1 Million books for you.";
  };
}

And here is my CSS file:

#header-wrapper{
    width: 100%;
}

.logo{
    padding: 10px;
    margin-right: 10px;
    font-size: 50px;
    font-family: fantasy;
}

.tagline{
    font-size: 13px;
    margin-top: 70px;
    margin-left: -180px;
    font-family: monospace;
}

.nav-wrapper{
    margin-top: 25px;
    margin-left: 100px;
}

Is my javascript file even being loaded? I am also using AngularJS as the framework. Thanks.

From what you have posted, no. The file is not being loaded. I suggest following any single guide to angular on Google. — Mathemats
– Mathemats, Commented Dec 17, 2015 at 3:46

Anik Islam Abhi · Accepted Answer · 2015-12-17 03:50:35Z

3

Your object is not valid

you are using ; instead of ,

Try like this

 $scope.appDetails = {
    title: "BookArt",
    tagline: "We have 1 Million books for you."
  };

Working snippet

var HeaderCtrl = function($scope) {
  $scope.appDetails = {
    title: "BookArt",
    tagline: "We have 1 Million books for you.",
  };
}

#header-wrapper {
  width: 100%;
}

.logo {
  padding: 10px;
  margin-right: 10px;
  font-size: 50px;
  font-family: fantasy;
}

.tagline {
  font-size: 13px;
  margin-top: 70px;
  margin-left: -180px;
  font-family: monospace;
}

.nav-wrapper {
  margin-top: 25px;
  margin-left: 100px;
}

<!DOCTYPE html>
<html lang="en" ng-app>

  <head>
    <meta charset="UTF-8">
    <title>BookArt.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="app.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body>

    <div id="header-wrapper" ng-controller="HeaderCtrl">
      <span class="logo pull-left">{{appDetails.title}}</span>
      <span class="tagline pull-left">{{appDetails.tagline}}</span>
      <div class="nav-wrapper pull-left">
        <ul class="nav nav-pills">
          <li class="active"><a href="#">Books</a> </li>
          <li><a href="#">Kart</a> </li>
        </ul>
      </div>
    </div>
  </body>

</html>

edited Dec 17, 2015 at 3:50

answered Dec 17, 2015 at 3:47

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Way Over a year ago

As a debugger would have easily picked this up, maybe a link/mention of where to get started with debugging.

AB25 Over a year ago

Silly me. Thanks alot Anik Islam Abhi :)

Anik Islam Abhi Over a year ago

@AkshayB you check console for errors and you are welcome :)

Collectives™ on Stack Overflow

Where to include javascript files while using angularjs. What i have done doesn't seem to be working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related