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
Related
Having tough times learning React. So I started to rewrite simple HTML + JavaScript page with React.
I want to prerender the html markup before the div with main application. I found that library with custom fonts (simple-line-icons) doesn't load in a way how I've done this. But if I put this <div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div> div inside a component, the fonts are loaded fine. Here is the code of index.html how it looks now:
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="css/preloader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/simple-line-icons.css">
<!--[if lt IE 9]>
<script>
(function(){
var ef = function(){};
window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
}());
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
<![endif]-->
<script>
(function (i, s, o, g, r, a, m) {
Google Analytics code
});
</script>
</head>
<body data-spy="scroll">
<div id="preloader">
<div id="status_first">
<div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
</div>
<div id="status_second">
<div className="wow tada infinite" data-wow-duration="8s">K</div>
</div>
<div id="status_third">
<div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
</div>
</div>
<div id="app">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.8/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
<script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script>
<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
so, the task is simply perrender this piece of code:
<div id="status_first">
<div className="loadicon icon-arrow-left wow tada infinite" data-wow-duration="8s"></div>
</div>
<div id="status_second">
<div className="wow tada infinite" data-wow-duration="8s">K</div>
</div>
<div id="status_third">
<div className="loadicon icon-arrow-right wow tada infinite" data-wow-duration="8s"></div>
</div>
How it could be done in simple way? Need a working example please
Well, I've solved it by moving the html code to the first child component of the App.
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}}
The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
http://codepen.io/jcbowyer/pen/wGrLmE
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I figured out how to get this work with k-rel insteal of open.
Updated code is below
Codepen here
http://codepen.io/jcbowyer/pen/KzyQwa
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile"
k-rel="'actionsheet'"
href="#mnuProfile"></a>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
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;
};
I want in angularJS store oder preload the admin(id, password) by start from a json in localstorage, but angularJS return always error. the init function I have written through a ng-controller="initAdminController" in a div.
I want to know, where is the error exactly, in script.js or in index.html and how can i fix it.
skript.js:
var app = angular.module('store', []);
app.controller('initAdminController', function($userFactory){
admin.id=0;
admin.name="admin";
admin.password="admin";
userFactory.put(admin);
});
app.factory('userFactory', function(){
return{
get: function (userinfo) {
return JSON.parse(localStorage.getItem(userinfo) || '[]');
},
put: function(userinfo){
console('adminInit wird aufgerufen');
localStorage.setItem('user' + userinfo.id, JSON.stringify(userinfo));
}
};
});
and the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular Project</title>
<link rel="stylesheet" href="css/vendor/jquery.mobile-1.4.3.css">
<link rel="stylesheet" href="css/vendor/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/vendor/mobile-angular-ui-base.css" />
<link rel="stylesheet" href="css/vendor/mobile-angular-ui-hover.css" />
<link rel="stylesheet" href="css/vendor/mobile-angular-ui-desktop.css" />
<script type="text/javascript" src="js/vendor/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="js/vendor/jquery.mobile-1.4.3.js"></script>
</head>
<body ng-app="store" >
<div id="pageContent" data-role="page" >
<div data-role="header" class="site-header" >
<h1>logIn</h1>
</div>
<p>Willkommen: <span>{{user.name}}</span> </p>
<div data-role="content" id="content">
<form method="get" role="form" name="Loginform">
<div data-role="fieldcontain">
<input type="text" name="userID" ng-model='user.name' required placeholder="user ID">
<input type="password" name="password" ng-model="user.password" required placeholder="password">
</div>
<input type="submit" ng-disabled="Loginform.$invalid" value="submit" ng-click:login() />
</form>
</div>
<div data-role="footer" id="footer" class="site-footer">
<h1>footer</h1>
</div>
</div>
<div ng-controller="initAdminController"></div>
<!-- load the libs -->
<script type="text/javascript" src="js/vendor/angular-resource.js"></script>
<script type="text/javascript" src="js/vendor/angular-route.js"></script>
<script type="text/javascript" src="js/vendor/angular-touch.js"></script>
<script type="text/javascript" src="js/vendor/angular-animate.js"></script>
<script type="text/javascript" src="js/vendor/angular-loader.js"></script>
<script type="text/javascript" src="js/vendor/angular.js"></script>
<script type="text/javascript" src="js/controllers/controller.js"></script>
<script type="text/javascript" src="js/directives/directive.js"></script>
<script type="text/javascript" src="js/filters/filter.js"></script>
<script type="text/javascript" src="js/services/service.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
and the error:
Error: [$injector:unpr] Unknown provider: $userFactoryProvider <- $userFactory ........
It's a small issue of you using "$userFactory" instead of using "userFactory" to inject.
I think you need to inject your userFactory into the controller:
app.controller('initAdminController', ['userFactory', function(userFactory){ ... }]);
Please note that $ sign is reserved for angularjs properties and such. The $$ is reserverd for private properties in angularjs that you should not use.