i'm newbie angular js..but try make image slider in file..
and i'm using route..acutally i'm having 3 pages..
1.home 2.about 3.contact
for create index file in add header , footer
while i'm adding slider in index page works fine me..
but if did same thing in home page..it won't work , din't find errors in console also..
i don't know how fix it..
here attach codes..
script.js
// create module , name scotchapp var scotchapp = angular.module('scotchapp', ['ngroute','nganimate', 'ngtouch']); // configure our routes scotchapp.config(function($routeprovider) { $routeprovider // route home page .when('/', { templateurl : 'pages/home.html', controller : 'homecontroller' }) // route page .when('/about', { templateurl : 'pages/about.html', controller : 'aboutcontroller' }) // route contact page .when('/contact', { templateurl : 'pages/contact.html', controller : 'contactcontroller' }); }); // create controller , inject angular's $scope scotchapp.controller('maincontroller', function($scope) { //logo $scope.logo = 'logo.png'; //username $scope.username = 'jonathan stephanopalus'; //footercontent $scope.footer = [ { title: 'contacts' }, { title: 'feedback' }, { title: 'help' }, { title: 'site map' }, { title: 'terms & conditions' }, { title: 'privacy statement' }, { title: 'cookie policy' }, { title: 'trademarks' } ]; }); scotchapp.controller('homecontroller', function($scope) { // create message display in our view $scope.message = "lorem ipsum "; //lastdiv $scope.lastdiv = { image : "women_wright.png" ,title:"get know cisco better: community forums"}; //slider $scope.slides = [ {image: 'images/img00.jpg', description: 'image 00'}, {image: 'images/img01.jpg', description: 'image 01'}, {image: 'images/img02.jpg', description: 'image 02'}, {image: 'images/img03.jpg', description: 'image 03'}, {image: 'images/img04.jpg', description: 'image 04'} ]; $scope.direction = 'left'; $scope.currentindex = 0; $scope.setcurrentslideindex = function (index) { $scope.direction = (index > $scope.currentindex) ? 'left' : 'right'; $scope.currentindex = index; }; $scope.iscurrentslideindex = function (index) { return $scope.currentindex === index; }; $scope.prevslide = function () { $scope.direction = 'left'; $scope.currentindex = ($scope.currentindex < $scope.slides.length - 1) ? ++$scope.currentindex : 0; }; $scope.nextslide = function () { $scope.direction = 'right'; $scope.currentindex = ($scope.currentindex > 0) ? --$scope.currentindex : $scope.slides.length - 1; }; }); scotchapp.animation('.slide-animation', function () { return { beforeaddclass: function (element, classname, done) { var scope = element.scope(); if (classname == 'ng-hide') { var finishpoint = element.parent().width(); if(scope.direction !== 'right') { finishpoint = -finishpoint; } tweenmax.to(element, 0.5, {left: finishpoint, oncomplete: done }); } else { done(); } }, removeclass: function (element, classname, done) { var scope = element.scope(); if (classname == 'ng-hide') { element.removeclass('ng-hide'); var startpoint = element.parent().width(); if(scope.direction === 'right') { startpoint = -startpoint; } tweenmax.fromto(element, 0.5, { left: startpoint }, {left: 0, oncomplete: done }); } else { done(); } } }; }); scotchapp.controller('aboutcontroller', function($scope) { $scope.message = 'look! page.'; }); scotchapp.controller('contactcontroller', function($scope) { $scope.message = 'contact us! jk. demo.'; }); home.html
<div ng-controller="homecontroller"> <div class="container slider"> <img ng-repeat="slide in slides" class="slide slide-animation nondraggableimage" ng-swipe-right="nextslide()" ng-swipe-left="prevslide()" ng-hide="!iscurrentslideindex($index)" ng-src="{{slide.image}}"> <a class="arrow prev" href="#" ng-click="nextslide()"></a> <a class="arrow next" href="#" ng-click="prevslide()"></a> <nav class="nav"> <div class="wrapper"> <ul class="dots"> <li class="dot" ng-repeat="slide in slides"> <a href="#" ng-class="{'active':iscurrentslideindex($index)}" ng-click="setcurrentslideindex($index);">{{slide.description}}</a> </li> </ul> </div> </nav> test </div> </div> index.html
<!doctype html> <!-- define angular app --> <html ng-app="scotchapp"> <head> <!-- scrolls --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <!-- <link rel="stylesheet" href="styles/main.css" /> --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <!-- <link href="css/bootstrap.css" rel="stylesheet"> --> <link rel="stylesheet" href="css/styles.css"> <!-- <script src="js/app.js"></script> --> <!-- spells --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/tweenmax.min.js"></script> <!-- <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 class="angular_class" ng-controller="maincontroller"> <nav class="navbar navbar-default"> <div class="container"> <div class="menu_1"> <div class="navbar-header"> <a class="navbar-brand" href="/"><img src="image/{{logo}}"></a> </div> <div class="f_right"> <p>welcome, {{ username }}</p> <img src="image/sml_logo.png"> </div> </div> <div class="menu_1"> <ul class="nav navbar-nav navbar-left"> <li ng-repeat="teams in teamarray"><a href="#{{ teams.link }}">{{ teams.team_name }}</a></li> </ul> <div class="f_right"> <input type="text" class="searchbox" placeholder="search"></input> </div> </div> </div> </nav> <div id="main"> <!-- angular templating --> <!-- content injected --> <div ng-view></div> </div> <footer class="text-center"> <div class="footer_block"> <span ng-repeat="ft in footer"><a href="">{{ ft.title }}</a></span> </div> </footer> </body> </html> and information follow link
could please me out of this..
thank you,
change home.html
<div ng-controller="homecontroller"> <div class="container slider"> <img ng-repeat="slide in slides" class="slide slide-animation nondraggableimage" ng-swipe-right="nextslide()" ng-swipe-left="prevslide()" ng-hide="!iscurrentslideindex($index)" ng-src="{{slide.image}}"> <a class="arrow prev" href="#" ng-click="nextslide()"></a> <a class="arrow next" href="#" ng-click="prevslide()"></a> <nav class="nav"> <div class="wrapper"> <ul class="dots"> <li class="dot" ng-repeat="slide in slides"> <a href="#" ng-class="{'active':iscurrentslideindex($index)}" ng-click="setcurrentslideindex($index);">{{slide.description}}</a> </li> </ul> </div> </nav> test </div> with
<div class="container slider"> <img ng-repeat="slide in slides" class="slide slide-animation nondraggableimage" ng-swipe-right="nextslide()" ng-swipe-left="prevslide()" ng-hide="!iscurrentslideindex($index)" ng-src="{{slide.image}}"> <a class="arrow prev" href="#" ng-click="nextslide()"></a> <a class="arrow next" href="#" ng-click="prevslide()"></a> <nav class="nav"> <div class="wrapper"> <ul class="dots"> <li class="dot" ng-repeat="slide in slides"> <a href="#" ng-class="{'active':iscurrentslideindex($index)}" ng-click="setcurrentslideindex($index);">{{slide.description}}</a> </li> </ul> </div> </nav> test </div> 
Comments
Post a Comment