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

我想在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>

这是我的JavaScript文件：

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

这是我的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;
}

我的javascript文件被加载了吗？我也使用AngularJS作为框架。谢谢

您的对象不是有效的

您使用的是;而不是,

试试这个

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

工作片段

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>

相关内容

最新更新

热门标签：