Menu icon Foundation
Using foundationApps angular components

Here goes

Love foundation for apps but im a php developer and have an MVC backend in php already working for me

It was currently using foundation for sites, but after seing foundation for apps I wanted the grid and some other components to update foundation for sites. All went well for the grid and other SCSS components the problem has come when I try using for example panels or notifications for this lets say notifications fi you want to see my actual code look here >> https://github.com/jjdemitriUk/foundationRemix

Now heres what i understand . .
- Angular.js is jquery MVC with animations etc in it
- Foundation.js from foundationApps extends angular.js in an OOP fasion ?
- Foundation angualr components are broken into 3 main parts
- core . . .the base of foundation angular
- ui router for application routing based on the uri
- ui animation router - im guessing animations based on url and navigations links but not sure

either way knowing what i know I have included the following into my project from foundation-apps added via bower as im not using angular for uri routing im unsuer weather i need all of this or not

        <!-- Include Dependencies -->
        <script src="js/vendor/modernizr.js"></script>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/vendor/fastclick.js"></script>
            
        <!-- Include Angular -->
        <script src="js/angular/angular.js"></script>
        <script src="js/angular/angular-ui-router.js"></script>
        <script src="js/angular/angular-animate.js"></script>
        <script src="js/angular/angular-touch.js"></script>
        
        <!-- Services -->
        <script src="js/angular/services/foundation.core.js"></script>
        <script src="js/angular/services/foundation.dynamicRouting.js"></script>
        <script src="js/angular/services/foundation.dynamicRouting.animations.js"></script>
       
        <!-- Foundation Components -->
        <script src="js/angular/components/accordion/accordion.js"></script>
        <script src="js/angular/components/actionsheet/actionsheet.js"></script>
        <script src="js/angular/components/common/common.js"></script>
        <script src="js/angular/components/iconic/iconic.js"></script>
        <script src="js/angular/components/interchange/interchange.js"></script>
        <script src="js/angular/components/modal/modal.js"></script>
        <script src="js/angular/components/notification/notification.js"></script>
        <script src="js/angular/components/offcanvas/offcanvas.js"></script>
        <script src="js/angular/components/panel/panel.js"></script>
        <script src="js/angular/components/popup/popup.js"></script>
        <script src="js/angular/components/tabs/tabs.js"></script>
        
        <!-- FOundation angular scripts-->
        <script src="js/angular/foundation.js"></script>
        <script src="js/angular/routes.js"></script>
        <script src="js/angular/app.js"></script>
         

Now the thought behind this is logical to me but im still having no luck getting the elements to work

- First i included the basic dependencies like modernizer and faskclick
- Then all the angular.js and modules requires agular-animate and such
- Then the foundation scripts im guessing extend angulars scripts such as foundation.core and routing
- Then each of the components js sheets as all the css is already there
- and finally the js sheet included into the view when you create a new project

NOw i had to go through a whole host of errors to get to this point which im guessing owes tot he fact im not using angular.js for the routing and so it willnot be able to automatically find the componenets and load the, hense the independant includes.

THE PROBLEM / QUESTION

Below is the code I am using for a simple notification yet when i click on the button i get nothing . . no click no callback nothing . . . .

WHAT AM I MISSING ?!?!?!?!

IS THERE ANY WAY TO USE THE JS ELEMENTS OF THE NEW foudnationApps within the original foundationSites or an independant project without using angular for the application routing ??

any help welcome this is litterally the last thing im trying to work out before merging into my php framework

Ive also tried removing unwanted modules as follows in the code below

 <zf-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
</zf-notification-static>      

from foundation.js
angular.module('foundation', [
    'foundation.core',
   // 'foundation.accordion',
   // 'foundation.actionsheet',
   // 'foundation.common',
   // 'foundation.iconic',
   // 'foundation.interchange',
   // 'foundation.modal',
    'foundation.notification',
   // 'foundation.offcanvas',
   // 'foundation.panel',
   // 'foundation.popup',
   // 'foundation.tabs'
  ]);

from app.js
angular.module('application', [
    //'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    //'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
    //.config(config)
    .run(run)

         

angularsitesuri-routinganimations

Here goes

Love foundation for apps but im a php developer and have an MVC backend in php already working for me

It was currently using foundation for sites, but after seing foundation for apps I wanted the grid and some other components to update foundation for sites. All went well for the grid and other SCSS components the problem has come when I try using for example panels or notifications for this lets say notifications fi you want to see my actual code look here >> https://github.com/jjdemitriUk/foundationRemix

Now heres what i understand . .
- Angular.js is jquery MVC with animations etc in it
- Foundation.js from foundationApps extends angular.js in an OOP fasion ?
- Foundation angualr components are broken into 3 main parts
- core . . .the base of foundation angular
- ui router for application routing based on the uri
- ui animation router - im guessing animations based on url and navigations links but not sure

either way knowing what i know I have included the following into my project from foundation-apps added via bower as im not using angular for uri routing im unsuer weather i need all of this or not

        <!-- Include Dependencies -->
        <script src="js/vendor/modernizr.js"></script>
        <script src="js/vendor/jquery.js"></script>
        <script src="js/vendor/fastclick.js"></script>
            
        <!-- Include Angular -->
        <script src="js/angular/angular.js"></script>
        <script src="js/angular/angular-ui-router.js"></script>
        <script src="js/angular/angular-animate.js"></script>
        <script src="js/angular/angular-touch.js"></script>
        
        <!-- Services -->
        <script src="js/angular/services/foundation.core.js"></script>
        <script src="js/angular/services/foundation.dynamicRouting.js"></script>
        <script src="js/angular/services/foundation.dynamicRouting.animations.js"></script>
       
        <!-- Foundation Components -->
        <script src="js/angular/components/accordion/accordion.js"></script>
        <script src="js/angular/components/actionsheet/actionsheet.js"></script>
        <script src="js/angular/components/common/common.js"></script>
        <script src="js/angular/components/iconic/iconic.js"></script>
        <script src="js/angular/components/interchange/interchange.js"></script>
        <script src="js/angular/components/modal/modal.js"></script>
        <script src="js/angular/components/notification/notification.js"></script>
        <script src="js/angular/components/offcanvas/offcanvas.js"></script>
        <script src="js/angular/components/panel/panel.js"></script>
        <script src="js/angular/components/popup/popup.js"></script>
        <script src="js/angular/components/tabs/tabs.js"></script>
        
        <!-- FOundation angular scripts-->
        <script src="js/angular/foundation.js"></script>
        <script src="js/angular/routes.js"></script>
        <script src="js/angular/app.js"></script>
         

Now the thought behind this is logical to me but im still having no luck getting the elements to work

- First i included the basic dependencies like modernizer and faskclick
- Then all the angular.js and modules requires agular-animate and such
- Then the foundation scripts im guessing extend angulars scripts such as foundation.core and routing
- Then each of the components js sheets as all the css is already there
- and finally the js sheet included into the view when you create a new project

NOw i had to go through a whole host of errors to get to this point which im guessing owes tot he fact im not using angular.js for the routing and so it willnot be able to automatically find the componenets and load the, hense the independant includes.

THE PROBLEM / QUESTION

Below is the code I am using for a simple notification yet when i click on the button i get nothing . . no click no callback nothing . . . .

WHAT AM I MISSING ?!?!?!?!

IS THERE ANY WAY TO USE THE JS ELEMENTS OF THE NEW foudnationApps within the original foundationSites or an independant project without using angular for the application routing ??

any help welcome this is litterally the last thing im trying to work out before merging into my php framework

Ive also tried removing unwanted modules as follows in the code below

 <zf-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
</zf-notification-static>      

from foundation.js
angular.module('foundation', [
    'foundation.core',
   // 'foundation.accordion',
   // 'foundation.actionsheet',
   // 'foundation.common',
   // 'foundation.iconic',
   // 'foundation.interchange',
   // 'foundation.modal',
    'foundation.notification',
   // 'foundation.offcanvas',
   // 'foundation.panel',
   // 'foundation.popup',
   // 'foundation.tabs'
  ]);

from app.js
angular.module('application', [
    //'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    //'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
    //.config(config)
    .run(run)