CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Kostenko
Kostenko

Reputation: 307

Angular js doesnt initialize

Hello I m trying to build a webpage using Angular js and 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>

this is my html code. and thats what is have in app.js :

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

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

however all I see when i reload my page(in the angular section) is {{main.title}} Am I doing something wrong in my Angular syntax? If I use <body ng-app> whith no angular module name its working. What is going on?

Upvotes: 0

Views: 75

Answers (2)

Claies
Claies

Reputation: 22323

You need to load angular.js before loading the app.js which has code inside that references it. switch the order you are loading the scripts in your header, or even better, move your script files to the bottom of your document.

Also, you should make sure you check your console logs and include any errors you see there when posting a question.

Upvotes: 1

jlowcs
jlowcs

Reputation: 1933

Well, first of all, you're including app.js before angular. I wouldn't be surprised if you had errors in your console. Also, it's better practice to insert your JS scripts at the end of your body:

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

Also, if you're using jquery with angular, you need to include jquery before angular.

Upvotes: 1

Related Questions