0
Привет, я пытаюсь создать веб-страницу, используя Angular js и bootstrap.Угловой js не инициализируется
<!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';
});
Однако все, что я вижу, когда я перезагрузить страницу (в угловой секции) является {{}} main.title Я делаю что-то неправильно в моей Угловое синтаксис? Если я использую <body ng-app> без имени углового модуля, его работа. Что происходит?
Какая ошибка в консоли вы видите? – dfsq
Переместить app.js перед angular.js. – dfsq