I created a little example with a simple responsive caroussel that works as expected.
<body>
<div class="wrap">
<header>header</header>
<div class="main">
<div class="container fill" style="padding: 0px;">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="fill" style="background-image:url('app/images/image2.jpg');">
<div class="container">
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('app/images/image1.jpg');">
<div class="container">
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('//placehold.it/1024x700/CC1111/FFF');">
<div class="container">
</div>
</div>
</div>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<footer>#Copyright</footer>
</div>
The matter is that when I bind it using angular, the images are not being displayed.
<div class="wrap">
<header>
</header>
<div class="main">
<div class="container-fluid" style="padding:0px;">
<div ng-view=""></div>
</div>
</div>
<div class="clear"></div>
<footer>
</footer>
</div>
And here is the code in my app.js file (the carousel is defined in the main.html file) :
var app = angular
.module('webappApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('HeaderCtrl', function ($scope, $location) {
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
});
I have no errors in the developer console, and in the network calls, the images are called and found. This it the output I have (only the controls are visible) :
To use ngView you need to have Routes set up. You didn't post any of your app JS code so it's hard to see where it might have gone awry, but generally the approach to do what I think you're asking would be:
Cut out the content for your carousel and put it in a separate .html file (called a "partial"). Make sure to leave out the footer and other elements that are part of your page "skeleton" and just put the content for your carousel into the partial
Add ngRoute to your app
Define routes ( in app.config() ). In your case, if it's just one page you'd likely use the ".otherwise" function on the RouteProvider and set the templateUrl to your partial html file
When route resolves, the partial is loaded into ngView (which can be an element, or an attribute of another element)
Without seeing your code it's tough to tell where you're having trouble, but my guess is that you're just trying to use ngView without routes; easy mistake to make.
I finally found the answer. I had to set the height of the div :
<div class="main">
<div ng-view="" style="height:100%"></div>
</div>
Related
I am trying out following code for angular js, but not sure where I am getting wrong.
I have included ui-router and every required details. The states are defined for business and about us. Need help to find issue.
var formModule = angular.module("formModule",['ui.router']);
formModule.config(['$stateProvider','$urlRouterProvider',
function ($stateProvider,$urlRouterProvider ){
$urlRouterProvider.otherwise("/");
$stateProvider
.state('business',{
url: '/business',
template: 'This is sample template',
})
.state('aboutus', {
url:'/aboutus',
template: '<div class="row" ng-controller="aboutUsController"><ul > <li ng-repeat="director in directors">{{director.name}}</li> </ul></div>',
controller: 'aboutUsController',
});
}]);
formModule.controller('aboutUsController',['$scope', function($scope){
$scope.directors = [{name: 'Avdhut Sonpethkar'},
{name: 'Sphurti Sonpethkar'},
{name: 'Pruthvi Sonpethkar'},];
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<div class="row">
<div class="col-sm-12">
<ul>
<li >
<a ui-sref=".business" >Business</a>
</li>
<li >
<a ui-sref=".aboutus" >About us</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12" ui-view>
</div>
</div>
The code is correct as per my understanding but not sure where getting it wrong.
Remove the '.' prefix in ui-sref
<a ui-sref="business">Business</a>
<a ui-sref="aboutus">About us</a>
I want to add some animation to my angular webpage which uses routing. I am looking for fadein/fadeout effect just like when you click Next in this page: https://app.enhancv.com/ . So that when I click on any of the list item in header, another page floats in with the same effect. How can I do that using angular routing? You can find the required files below.
Index.html
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact
</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
Pages are:
About.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
`</div>
Contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
home.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
Script.js
// create the module and name it myApp
var myApp = angular.module('myApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
I wrap my content in a container that is displayed only when the data is loaded:
<div ng-show="yourpage.dataLoaded" class="fade-element">
...
</div>
CSS
.fade-element{
transition: all linear 0.1s;
opacity: 1;
}
.fade-element.ng-hide {
opacity: 0;
}
.fade-element.ng-hide can be used in an element that fades out, for example a preloader:
<div ng-hide="yourpage.dataLoaded" class="preloader fade-element"></div>
Please can someone help me with this problem.
.state('home',{
url:'home',
controller: 'mainCtrl',
templateUrl: 'index.html'
})
.state('home.profile',{
url:'/profile',
controller: 'proCtrl',
templateUrl: 'profile.html'
})
.state('home.category',{
url:'/category',
controller: 'cateCtrl',
templateUrl: 'category.html'
})
My index page is like this
<div class="col-sm-12 no-padding">
<div class="col-sm-3 hidden-xs">
<div class="col-xs-12">
<ul class="nav panel-group rm-border">
<li>
<a click-toggle ui-sref-active="active" class="row" ui-sref="home.profile">Profile</a>
</li>
<li>
<a click-toggle ui-sref-active="active" class="row" ui-sref="home.category">category</a>
</li>
</ul>
</div><br clear="all">
</div>
<div class="col-sm-9 no-padding">
<div class="row panel-heading rm-border no-margin">
<h4 class="panel-title"> {{title}}</h4>
</div>
<div class="row no-margin" ui-view></div>
</div>
</div>
Please i want a situation whereby i can load both index.html and also load another template when one click on my root "/home" route.
You will need to have your Home and category pages have this type of layout
HOME
<div>
show some cool things
</div>
<div ui-view></div>
CATEGORY
<div>
cool category things
</div>
Following UI Router guide will get you there. But in essence the view that needs to have another view 'nested' will need to have a div or another html element have the ui-view attribute on it
quick link to their Plunker
Thank you guys, i just did a redirect. It solves my problem.
for some reason my webpage hangs when I load my directive into the html. So instead of printing 'Dashboard', it's just blank. When I remove the directive call, , it works fine. Am I not defining the directive properly?
I uploaded my code to Github: Project
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li><a href="#" >Projects</a></li>
<li>Equipment</li>
<li>Lab Safety</li>
</ul>
</div>
<projects></projects>
</div>
</div>
</div>
Directive:
(function(){
'use strict';
angular
.module('userdashApp.projects.directives')
.directive('projects', projects);
function projects(){
return {
restrict: 'E',
templateUrl: 'template/projects.html'
}
}
})();
Directive Html:
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
</div>
Looks like you need to initiate your module:
angular
.module('userdashApp.projects.directives', [])
...
HTML body code.
<body>
<div ng-controller="MainCtrl as mc">
<div class='container'>
<div class='row navbar navbar-default navbar-fixed-top' style="background-color:#006633;">
<div class='col-md-6'>
<input style="margin-top:10px;" type="text" ng-model="SearchText" placeholder="Search for more than 10,000 products..." class='form-control' size="50">
</div>
<div class='col-md-2'>
<a ui-sref="Login" style="position:absolute; margin-top:15px; color:#FFFCBA"><strong>LOGIN</strong></a>
</div>
</div>
</div>
<div id="middle" class='container'>
<div class='row'>
<div id="right" class='col-md-10'>
<div ui-view></div>
</div>
</div>
</div>
</div>
</body>
Routing Code
sampleApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/Products/38/");
$stateProvider
.state('Products', {
templateUrl: "templates/Products.html",
url: '/Products/:SCID/:BrandID',
controller: 'ProductsController as pc'
})
.state('Login', {
templateUrl: "templates/Login.html",
url: "/Login",
controller: 'LoginController'
});
});
Controller
sampleApp.controller('ProductsController', function ($scope, $routeParams, $log, $rootScope, $stateParams, ProductService) {
$scope.$on('SearchTextChanged', function(event, SearchText) {
if (SearchText.length >=3) {
$scope.FilterExpr = SearchText;
}
});
});
Products.html template
<div ng-if="SearchText.length>=3" class='box' ng-repeat="product in pc.ProductService.Products | filter:FilterExpr | orderBy:'ProductName'">
<ng-include src="'commonTemplate.html'"></ng-include>
</div>
Every thing works fine until user click on login button. once user click on login button, controller moves to LoginController.
Now if user types in text box for searching the products, i want again product controller to be loaded to display the products.
How to do that? Any help?