Angular js doesnt initialize

Question

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?

What error in console you see?

dfsq
– dfsq

2015-03-15 10:34:06 +00:00
Commented Mar 15, 2015 at 10:34 — dfsq
– dfsq, Commented Mar 15, 2015 at 10:34
Move app.js before angular.js.

dfsq
– dfsq

2015-03-15 10:37:18 +00:00
Commented Mar 15, 2015 at 10:37 — dfsq
– dfsq, Commented Mar 15, 2015 at 10:37

jlowcs · Accepted Answer · 2015-03-15 10:35:13Z

1

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.

answered Mar 15, 2015 at 10:35

jlowcs

1,9331 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kostenko Over a year ago

Thank you that did it. I did not know that "inclusion" order mattered. I m accepting your answer

Claies · Accepted Answer · 2015-03-15 10:35:54Z

1

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.

answered Mar 15, 2015 at 10:35

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Collectives™ on Stack Overflow

Angular js doesnt initialize

2 Answers 2

1 Comment

Comments

Hot Network Questions