个人中心
gpt4 book ai didi

javascript - Angularjs 没有初始化

转载 作者：行者123 更新时间：2023-12-02 16:21:35 24 4
gpt4 key购买 nike

你好，我正在尝试使用 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 代码。这就是 app.js 中的内容:

angular.module('app', []);

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

但是，当我重新加载页面(在 Angular 部分)时，我看到的只是 {{main.title}}我的 Angular 语法是否做错了什么？如果我使用 <body ng-app>没有任何 Angular 模块命名其工作。这是怎么回事？

最佳答案

首先，您在 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。

关于javascript - Angularjs 没有初始化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29059619/

24 4 0
文章推荐： javascript - 删除自动发布后在 Meteor 中获取 Facebook 头像
文章推荐： c# - 如何在EMGUCV中使用Facemarker？
文章推荐： python-3.x - 如何面对对齐和裁剪？
文章推荐： javascript - 文档中点击链接的警报索引
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com