Angular js 不初始化

Angular js doesnt initialize

本文关键字：初始化 js Angular      更新时间：2023-09-26

你好，我正在尝试使用Angular js和bootstrap构建一个网页。 

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff">
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/label.css">
<script src="app.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"> </script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class="container">
    <div class="row">
      <div class="col-sm-12 header">
          <div class="col-sm-3">
            <div class="line">
             <div class="spread">
               <span class="icon"><i class="fa fa-twitter"></i></span> SPREAD THE WORD!<span class="hashtag"> #PAWSCHICAGO</span>
             </div>
         </div>
          </div>
          <div class="col-sm-2">
            <div class="line">
            <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
        </div>
          </div>
          <div class="col-sm-3">
            <ul class="top-icons">
                <li><span class="icon"><a href="#"><i class="fa fa-rss-square"></i></a></span></li>
                <li><span class="icon"><a href="#"><i class="fa fa-facebook-square"></i></a></span></li>
                <li><span class="icon"><a href="#"><i class="fa fa-youtube-play"></i></a></span></li>
                <li><span class="icon"><a href="#"><i class="fa fa-flickr"></i></a></span></li>
            </ul>
       </div>
       <div class="col-sm-2 pull-right">
        <div class="buttons"><span class="icon"><a href="#"><i class="fa fa-envelope"></i>SIGN UP</a></span><span class="icon"><a href="#"><i class="fa fa-rss-square"></i>SHOP</a></span></div>
       </div>
    </div>

<div class="row">
    <div class="col-md-2">
        <div class="logo"><img src="./img/logo.jpg" alt="cat_paws_logo">
        </div>
    </div>
<div class="col-md-7">
    <nav class="nav">
        <ul>
            <li><a class="scale" href="#">our work</a></li>
            <li><a class="scale" href="#">our work</a></li>
            <li><a class="scale" href="#">adopt</a></li>
            <li><a class="scale" href="#">donate</a></li>
        </ul>
    </nav>
  </div>
 <div class="col-sm-2 pull-right">
    <div class="search">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
    </div>
 </div>
</div>
<!--Todo add breadcrumps here! -->
<div class="row">
  <div class="intro">
    <div class="col-lg-6">
        <h1>Adoption Process</h1>
        <h2>Lorem ipsum dolor sit consetur adipiscing elit nibh ultricies.</h2>
    </div>
    <div class="col-lg-6">
        <img class="intro-img" src="./img/adopt-us.jpg" alt="adopt us">
    </div>
</div>
</div>

<div class="row">
        <div class="news">
            <h1>Related News</h1>
            <div id="owl" class="owl-carousel"></div>
        </div>
</div>

<h1>{{main.title}}</h1>

 </div><!--container-->

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="js/owl.carousel.js"></script>
<script>
    $(document).ready(function() {
      $("#owl").owlCarousel({
        jsonPath : 'js/customData.json',
        jsonSuccess : customDataSuccess,
        lazyLoad : true,
        navigation : true,
        items: 4,
        navigationText:["<",">"]
      });
      function customDataSuccess(data){
        var content = "";
        for(var i in data["items"]){
           var img = data["items"][i].img;
           var alt = data["items"][i].alt;
           var title = data["items"][i].title;
           var text = data["items"][i].text;
           var label = data["items"][i].label;
           var icon = data["items"][i].icon;
           content += "<figure><img src='"" +img+ "'" alt='"" +alt+ "'">"
           content +="<figcaption><h5>"+title+"</h5>"+"<h6>"+label+"</h6><img class='icon-lbl' src='"+icon+"'><p>"+text+"</p></figcaption></figure>"

        }
        $("#owl").html(content);
      }
    });
    </script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>

这是我的HTML代码。 这就是应用程序中的内容.js ：

angular.module('app', []);
angular.module('app').controller("MainController", function(){
    var vm = this;
    vm.title = 'AngularJS Tutorial Example';
});

但是当我重新加载页面（在角度部分）时，我看到的只是{{main.title}}我在 Angular 语法中做错了什么吗？如果我使用<body ng-app>没有角度模块名称它的工作。这是怎么回事？

嗯，首先，你在 angular 之前包括 app.js。如果您的控制台出现错误，我不会感到惊讶。此外，最好在正文末尾插入 JS 脚本：

<body>
    [...]
    <script src="http://code.angularjs.org/1.1.5/angular.min.js"> </script>
    <script src="app.js"></script>
</body>

此外，如果你将 jquery 与 angular 一起使用，你需要在 angular 之前包含 jquery。

您需要

在加载app.js之前加载angular.js，该内部有引用它的代码。 切换在标题中加载脚本的顺序，或者更好的是，将脚本文件移动到文档底部。

此外，您应该确保检查控制台日志，并在发布问题时包含您在那里看到的任何错误。

相关文章：