I'm doing a single page application using AngularJS. On my index.html I'm using an ng-view direction to show the header section. The navigation section is defined as a ul element with a bunch of li elements that represents navigation links. I have a ng-class on each li element that needs to set the class to active. Based on my code, it does, but it doesn't appear on the page until after I click on the page. Provided is my code, please help. Thank you in advance
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 1 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="appMod">
<!-- Start: Header -->
<div ng-include="'templates/header.html'"></div>
<!-- End: Header -->
<!-- Start: Content -->
<div ng-view></div>
<!-- End: Content -->
<!-- Start: Footer -->
<div ng-include="'templates/footer.html'"></div>
<!-- End: Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/wow.min.js"></script>
<!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<!-- parent angular module and controller that supports SPA (Single Page Application) -->
<script src="app/appMod.js"></script>
<script src="templates/TemplateCtrl.js"></script>
<script src="app/home/HomeCtrl.js"></script>
<script src="app/blog/BlogCtrl.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
templates/header.html
<header >
<div class="main-menu" >
<div class="container">
<div class="row">
<div class="col-md-4">
<h1><a class="navbar-brand" href="index.html" data-0="line-height:90px;" data-300="line-height:50px;"> Hidayah
</a></h1>
</div>
<div class="col-md-8">
<div class="dropdown">
<ul class="nav nav-pills" ng-controller="TemplateHeadCtrl">
<li ng-repeat="NavLink in NavLinks" ng-class="IsSelected(NavLink)">
{{NavLink.LinkTitle}}
</li>
<!-- <li id='liHome' class="active"></li>
<li id='liPortfolio'>Portfolio</li>
<li id='liBlog'>Blog</li>
<li id='liContact'>Contact</li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
templates/TemplateCtrl.js
app.controller("TemplateHeadCtrl", ['$scope','$http', function($scope,$http){
$scope.NavLinks = [
{
"LinkTitle": "Home",
"LinkURL": "#/",
"LinkID": "liHome"
},
{
"LinkTitle": "Portfolio",
"LinkURL": "#Portfolio",
"LinkID": "liPortfolio"
},
{
"LinkTitle": "Blog",
"LinkURL": "#Blog",
"LinkID": "liBlog"
},
{
"LinkTitle": "Contact",
"LinkURL": "#Contact",
"LinkID": "liContact"
},
{
"LinkTitle": "Contact1",
"LinkURL": "#Contact1",
"LinkID": "liContact1"
}
];
/*
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};*/
$scope.SetMaster = function(section){
$scope.SelectedSection = section;
};
$scope.IsSelected = function(section){
return $scope.SelectedSection === section? 'active': '';
};
}]);
Also for some reason the $scope.NavLinks function does not work either. I have it commented it out in my code. The NavLinks.json is located under the same folder of TemplateCtrl.js
$scope.NavLinks = function () {
alert("here")
return $http.get('/NavLinks.json').then(function (response) {
alert("here")
return response.data;
}).catch(function (fallback) {
alert("Oops an error has occured. ")
});
};
Make change in 'templates/header.html' like this:
<li ng-repeat="NavLink in NavLinks" ng-class="{active : IsSelected(NavLink)}">
{{NavLink.LinkTitle}}
</li>
And in 'templates/TemplateCtrl.js':
$scope.IsSelected = function(section){
return $scope.SelectedSection.LinkID == section.LinkID;
};
Related
I can not create complex data models in my controllers.
every time I create them the code seems to fail silently
simple data models like
$scope.conversationList = [123456];
work just fine both using ng-bind & using it in a directive template.
but the moment I change them to {{conversationList.conversation}} they fail silently and my ngbind is emptied and the template displays
"{{conversationList.conversataion}}" in plain text.
I don't know what is wrong. Every example I can find looks like I formatted the models correctly it keeps failing.
Thank you for your help
Controller
/* global angular */
'use strict';
app.controller('conversationListCtrl', ['$scope', function ($scope) {
$scope.conversationList = [
{
conversation2: 123456789,
conversation:
{
id: "bestbuy",
messageId: 123456,
subscriber: "Billy Madison",
subscriptionType: "summerPass",
conversationImage: "insert Image"
}
}
]
}
])
.directive('listCtrl', function () {
return {
scope: false,
template: '<div> {{conversationList.conversation}} </div>'
}
});
Index.html
<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
<meta charset="utf-8">
<title>ClearKey Test Message</title>
<meta name="description" content="Layer Angular example">
<link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Common CSS and Identity dialog -->
<link href="common/style.css" rel="stylesheet">
<!-- Layer Web SDK -->
<script src='vendors/layer-websdk.min.js'></script>
<script src='vendors/angular.js'>
//checked
</script>
<script src='vendors/angular-route.js'>
</script>
<script src='vendors/ng-infinite-scroll.min.js'></script>
<script src='vendors/stop-angular-overrides.js'></script>
<!-- Angular app -->
<script src='js/app.js'></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="js/models/conversation.js"></script>
</head>
<body class="ng-scope" cz-shortcut-listen="true">
<!-- ^^^used to have appCtrl^^^ -->
<div class="main-app" ng-include="'views/app.html'"></div>
</body>
</html>
App.html
<div src="jquery-3.1.1.min.js">
<!-- ^^^needs appctrl controller^^^ -->
<div class="messenger">
<div class="left-panel">
<div class="Message-item">
<div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>
</div>
<div >
<!-- ^^^had the conversationListCtrl^^^ -->
<div class="panel-header conversations-header"
>
<!-- ^^^had the partials for the left column header^^^ -->
</div>
<div ng-controller="conversationListCtrl" class="conversation-list">
<div list-Ctrl ></div>
<div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>
</div>
<!-- had the partials for conversationlist.html -->
</div>
</div>
<div class="right-panel" >
<div
>
<!-- had the partials for the messages that were in each conversation -->
</div>
</div>
</div>
</div>
You need to define element which you want to access -
Replace - {{conversationList.conversation}}
With - {{conversationList.conversation.id}} or {{conversationList.conversation.messageId}}
I am trying to make a single page web site with angular, bootstrap. I was trying to include a carousel in the first page and with ngRouting does not work. I have read somewhere here that i need to use ui.bootstrap to make carousel work with routing.
I am a beginner in angular. This is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My web page</title>
<!-- load angular, ui-bootstrap and angular-route -->
<script src="js/angular.min.1.5.8.js"></script>
<script src="js/angular-animate.min.1.5.8.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/ui-bootstrap-tpls-2.3.0.min.js"></script>
<script src="js/app.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
CODE
</nav>
<!-- ngRoute -->
<div ng-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And my app.js:
var app = angular.module('mainApp', ['ngRoute','ui.bootstrap','ngAnimate']);
// angular routing
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "pages/main.html"
})
.when("/prezentare", {
templateUrl : "pages/AnotherPage.html"
})
.when("/green", {
templateUrl : "pages/green.html"
})
.when("/blue", {
templateUrl : "pages/blue.html"
});
});
// angular ui.bootstrap
app.controller('CarouselCtrl', function($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
slides.push(
{ image_url: '#/img/header1.png' },
{ image_url: '#/img/header2.png' }
);
});
and of course the main.html
<!-- New Carousel - UI-Bootstrap -->
<div ng-controller="CarouselCtrl">
<div style="height: 350px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides">
<img ng-src="{{slide.image_url}}" style="margin:auto;">
<</div>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container"> other code </div>
Please tell my what i have doing wrong??? The carousel is not showing (only the 2 side arrows). Using ui.bootstrap, the carousel will be responsive too right?
I am totally new to angularjs. I am just trying to load an external javascript file using requirejs. I have tried something but its not helping me.
Here is my folder structure:
angular-seed
-app
-bowercomponents
-requirejs
-view1
-view1.html
-view1.js
-view1test1.js
I want to load view1test1.js file in my view1.html
Here is my index.html:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="/css/style1.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script data-main="/app" src="bower_components/requirejs/require.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
Here is my app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
g(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
requirejs(["view1/view1test1.js"], function(util) {
});
Here is my view1test1.js:
function(util){
var barChartData = {
labels : ["No. of sign-ups","Daily active users","Average time active","Total time run","Total distance covered","10K activated"],
datasets : [
{
fillColor : "#dd4b39",
strokeColor : "#dd4b39",
data : [10000,13000,56081,42001,5000,40000]
},
{
fillColor : "#f39c12",
strokeColor : "#f39c12",
data : [40000,70000,55000,21001,45023,70121,60093]
},
{
fillColor : "#00a65a",
strokeColor : "#00a65a",
data : [43010,75432,50966,66300,39000,12010,33098]
}
]
};
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
}
I found some examples in which they have used some dependency, but i didn't understand it. So can anybody tell me what i am doing wrong?
I'm trying to have a slideshow and carousel in child template in angularjs, but as they loads, they doesn't work. I found that it's because the javascript wouldn't execute, how should I resolve this?
<!doctype html>
<html class="no-js" lang="" ng-app="tte" ng-controller="GeneralCtrl">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{Page.Title}}</title>
<link rel="stylesheet" href="/media/css/bootstrap.min.css">
<link rel="stylesheet" href="/media/css/swiper.min.css">
<link rel="stylesheet" href="/media/css/owl.carousel.css">
<link href="/media/css/nprogress.css" rel="stylesheet">
<link rel="stylesheet" href="/media/css/style.css">
<script type="text/javascript" src="/media/js/angular.js"></script>
<script type="text/javascript" src="/media/js/ng-device-detector.js"></script>
<script type="text/javascript" src="/media/js/re-tree.js"></script>
<script type="text/javascript" src="/media/js/angular-route.js"></script>
<script type="text/javascript" src="/media/js/angular-md5.js"></script>
<script type="text/javascript" src="/media/js/angular-cache.js"></script>
<script src="/media/js/vendor/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="/media/js/app.js"></script
</head>
<body>
<ul id="menu-main">
<li class="logged-in"><img src="./media/img/general/profile.png" alt="text" width="75" height="75" id="profileImage" class="img-responsive img-circle center-block"></li>
</ul>
<div ng-view></div>
<script src="/media/js/vendor/swiper.min.js"></script>
<script src="/media/js/vendor/owl.carousel.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
//pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay: 2500,
autoplayDisableOnInteraction: false,
//mousewheelControl: true,
keyboardControl: true
});
$('.owl-carousel').owlCarousel({
rtl:true,
loop:false,
margin:10,
nav:true,
dots:false,
margin:30,
merge:true,
slideBy:4,
responsive:{
0:{
items:2
},
768:{
items:3
},
992:{
items:4
}
}
})
$('.owl-carousel .owl-controls .owl-nav .owl-prev').html('<span class="glyphicon glyphicon-menu-right"></span>');
$('.owl-carousel .owl-controls .owl-nav .owl-next').html('<span class="glyphicon glyphicon-menu-left"></span>');
</script>
</body>
</html>
and the child page is :
<header id="header">
<div class="swiper-container rtl">
<div class="swiper-wrapper">
<div ng-repeat="Slider in hmc.Sliders" class="swiper-slide" style="background-image:url(/media/img/test.gif)">
<div class="slide-title">
<h2>test</h2>
<h1>test<span>test ttitle</span></h1>
test </div>
</div>
<!--<div class="swiper-slide" >Slide 2</div>
<div class="swiper-slide" >Slide 3</div>
<div class="swiper-slide" >Slide 4</div> -->
</div>
<!-- Add Pagination -->
<!--<div class="swiper-pagination"></div>-->
<div class="icon-arrow-down" id="swiper-button-down"></div>
<!-- Add Navigation -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</header>
when it's loads to the page the angular ng-repeat do it's job and repeat items it it should but it's not rendered
Any one can take a look at my code? It use the ui-bootstrap carousel component. When I tried to click on one of two buttons, it updates the slides to be show, so only part of slides will be shown in the carousel... THe problem is I cannot see the carousel AT ALL sometimes (not always)... try it out... Any one can tell me why? And how to solve this issue?
My code is at: http://plnkr.co/edit/Qp8axH
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<style>
body {
padding-top: 60px;
}
#media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="CarouselLeftCtrl" class="col-xs-6 col-md-6 shopper-left">
<div style="position:relative;clear:both">
<ul class="shopper-categories" style="list-style-type: none; float:left; padding-left:0">
<li><a data-category='cute' ng-click='emitCategoryInfo($event)' class="depstore btn btn-border" style="margin-bottom:5px; padding-left:0">Cute</a>
</li>
<li><a data-category='supercute' ng-click='emitCategoryInfo($event)' class="boutique btn btn-border" style="margin-bottom:5px; padding-left:0">Super Cute</a>
</li>
</ul>
</div>
<div style="clear:both">
======
</div>
<div class="col-md-1">clicks {{slides | json}}</div>
<div>
======
</div>
<div class="col-md-6 left-carousel">
<div>
<div style="height: 150px">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
</div>
</div>
</div>
<!-- /container -->
</body>
</html>
js:
/
/ Add your javascript here
var CarouselLeftCtrl, CarouselRightCtrl, app;
app = angular.module("app", ["ui.bootstrap"]);
CarouselLeftCtrl = function($scope, $http, $log, $timeout) {
$scope.myInterval = -1;
$scope.slides = [];
$scope.json = 0;
$http.get("shopper_images.json").then(function(result) {
var d = result.data;
for (var i = 0; i < d.length; i++) {
$scope.slides.push({
image: d[i].image,
category: d[i].category
});
}
$scope.allSlides = $scope.slides;
});
$scope.$on("category", function(event, data) {
$scope.clicks +=1;
var slides = $scope.allSlides;
var result = [];
for (var i = 0; i < slides.length; i++) {
if(slides[i].category === data.category) {
result.push(slides[i]);
}
}
$scope.slides = result;
$scope.slides[0].active = true;
$scope.$apply();
});
$scope.emitCategoryInfo = function($event) {
$scope.$emit("category", {
category: angular.element($event.target)[0].dataset.category
});
};
};
json:
[
{
"image": "http://placekitten.com/601/300", "category": "cute"
},
{
"image": "http://placekitten.com/602/300", "category": "supercute"
},
{
"image": "http://placekitten.com/603/300", "category": "cute"
}
]