使用angularjs时在哪里包含javascript文件。我所做的似乎不起作用

Question

I want to use javascript in an AngularJS framework but the javascript file is not making any changes to the html code. 我想在AngularJS框架中使用javascript，但是javascript文件未对html代码进行任何更改。

<!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: 这是我的JavaScript文件：

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

And here is my CSS file: 这是我的CSS文件：

#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? 我的javascript文件是否正在加载？ I am also using AngularJS as the framework. 我也使用AngularJS作为框架。 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>

使用angularjs时在哪里包含javascript文件。我所做的似乎不起作用

问题描述

1 个解决方案

解决方案1
3 2015-12-17 03:47:49

使用angularjs时在哪里包含javascript文件。 我所做的似乎不起作用

问题描述

1 个解决方案

解决方案1 3 2015-12-17 03:47:49

使用angularjs时在哪里包含javascript文件。我所做的似乎不起作用

解决方案1
3 2015-12-17 03:47:49