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.

Answer 1

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>

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

Question

1 answers

solution1
3 2015-12-17 03:47:49

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

Question

1 answers

solution1 3 2015-12-17 03:47:49

solution1
3 2015-12-17 03:47:49