0

I am building a SPA; I am at the point where I have incorporated Routes/Templates. It works mostly, however two plugins don't seem to work, I suspect are due to my integration?

#1 When the page loads initially my flexSlider slider works fine. But when I click back to the flexslider page, the slider doesn't fire again. I get no errors in the console.

This is the slider implementation:

 $(window).load(function() {
    $('.flexslider').flexslider({
        pauseOnHover: true,
        randomize: true,
        animation: "slide"

    });
});

This is my script for my angular file:

    var rustyApp = angular.module('rustyApp', [
        'ngRoute',
        'viewController'
    ]);

   rustyApp.config(['$routeProvider', function($routeProvider) {
     $routeProvider
         .when('/home', {
         templateUrl: 'partials/home.html',
         controller: 'HomeController'
     })
        .when('/work', {
         templateUrl: 'partials/work.html',
         controller: 'WorkController'
     })
        .when('/contact', {
        templateUrl: 'partials/contact.html',
        controller: 'ContactController'
     })
       .otherwise({
       redirectTo: '/home'
   })

  }]);

  var viewController = angular.module('viewController', []);


  rustyApp.controller('HomeController', function($scope) {});
  rustyApp.controller('WorkController', function($scope) {});
  rustyApp.controller('ContactController', function($scope) {});

#2 I am using a off-canvas navigation for mobile. When I click a link for an appropriate page, I get my different templates/views, but the side panel doesn't close.

<aside class="left-off-canvas-menu">
    <ul class=" off-canvas-list">
        <li class="uk-active"><a href="#home"><i class="uk-icon-home"></i>home</a></li>
        <li><a href="#work"><i class="uk-icon-photo"></i> work</a></li>
        <li><a href="#contact"><i class="uk-icon-envelope-o"></i> contact</a></li>
    </ul>
</aside>

#3 Right now as you can see its showing /#/home shouldn't that be index.html/home?

enter image description here

Thanks in advance

Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141

2 Answers2

2

You need to know how AngularJs works, typically you need to know the life cycle of Angular's component. I am giving it a try:

Q1. Most of the time, Angular does not work well with other non-angular javascript files. The main reason why your flexi code failed to work after you click back(or refresh) to another page is because AngularJs does not know the existence of the flexi code.

How Angular work is when your HTML file gets loaded (together with its necessary JS files), Angular will starts to kick off, appending necessary watchers and then RERENDER the entire HTML file. So why your flexi code failed to work? Because Angular never watches it, hence never digest it, and hence, it completely ignored your flexi code. It works for the first time, but not the second.

To solve that problem, either you find a angular-friendly alternative for flexi(I am pretty sure there are plenty out there) or you need to write your own global variables to sync resources across your flexi and your angular.

This post helps me a lot, hopefully to you too.

Q2. Do not know what is the exact problem here. But from what I see here, maybe you need to explicitly write the close canvas code in your controller? If there is no controller responsible, then you need to handle it in your ngRoute, i.e. close the nav bar before transit to the next state.

Q3. Add $locationProvider.html5Mode(true); into your module config file and you are good to go.

Hope these helps :D

Community
  • 1
  • 1
CozyAzure
  • 8,280
  • 7
  • 34
  • 52
  • Going to read the post.. Don't know if the following will work, but I am sure like your post it's pointing towards the right track. https://github.com/thenikso/angular-flexslider and http://pineconellc.github.io/angular-foundation/ Thanks for the feedback, great help in making me think about the problem in a Angular way! – Antonio Pavicevac-Ortiz Oct 04 '14 at 20:00
  • That's good news! Now all you need to do is inject that module and start using it like a magic charm! :) – CozyAzure Oct 04 '14 at 20:03
0

AnJS is an single page approach. So there are no real page reloads. The /#/home is correct, it's just an AnJS way to express navigation through anchors.

Usually, if you want to communicate with AnJS "world"/scope you have to do this through $apply function:

$rootScope.$apply(function() { /* your code here */)});

because otherwise AnJS won't notice your changes.

Hope that this will help a bit.

Kamil R
  • 447
  • 5
  • 11