added foundation-angular

README.md

@@ -9,6 +9,7 @@ An angularjs, requirejs, coffeescript, zurb-foundation, gulp  seed project for m
 *  [coffee script](http://coffeescript.org/) all the way
 *  [gulp](http://gulpjs.com/) for build system
 *  [zurb foundation ](http://foundation.zurb.com/) and libsass for css framework
+*  [angular-foundation](http://pineconellc.github.io/angular-foundation/)
 
 ### why
 

static/bower.json

@@ -20,6 +20,7 @@
     "requirejs-text": "~2.0.10",
     "foundation": "zurb/bower-foundation",
     "html5-boilerplate": "~4.3.0",
-    "angularAMD": "~0.2.1"
+    "angularAMD": "~0.2.1",
+    "angular-foundation": "~0.5.1"
   }
 }

static/coffee/app.coffee

@@ -1,8 +1,9 @@
 define [
     "angularAMD"
     "angular-route"
+    "foundation"
 ], (angularAMD) ->
-    app = angular.module("webapp", ["ngRoute"])
+    app = angular.module("webapp", ["ngRoute", "mm.foundation"]) # "['mm.foundation']"
     app.config ($routeProvider) ->
         $routeProvider.when("/view1", angularAMD.route(
             templateUrl: "partials/partial1.html"

static/coffee/controllers/myctrl2.coffee

@@ -1,6 +1,30 @@
 define ["app"], (app) ->
     app.controller "MyCtrl2", ($scope) ->
         $scope.message = "Message from MyCtrl2"
-        return
+        $scope.oneAtATime = true
+        $scope.groups = [
+            {
+                title: "Dynamic Group Header - 1"
+                content: "Dynamic Group Body - 1"
+            }
+            {
+                title: "Dynamic Group Header - 2"
+                content: "Dynamic Group Body - 2"
+            }
+        ]
 
-    return
+        $scope.message = "Message from MyCtrl2"
+
+        $scope.items = [
+            "Item 1"
+            "Item 2"
+            "Item 3"
+        ]
+
+        $scope.addItem = ->
+            newItemNo = $scope.items.length + 1
+            $scope.items.push("Item " + newItemNo)
+            return
+
+
+        return

static/coffee/main.coffee

@@ -6,12 +6,14 @@ require.config
         "angular"      : "/bower_components/angular/angular.min"
         "angular-route": "/bower_components/angular-route/angular-route.min"
         "angularAMD"   : "/bower_components/angularAMD/angularAMD.min"
+        "foundation"   : "/bower_components/angular-foundation/mm-foundation-tpls"
 
 
     # Add angular modules that does not support AMD out of the box, put it in a shim
     shim:
-        angularAMD: ["angular"]
+        "angularAMD": ["angular"]
         "angular-route": ["angular"]
+        "foundation" : ["angular"]
 
 
     # kick start application

static/index.html

@@ -1,45 +1,16 @@
-
-<!--
-<!DOCTYPE html>
-<html lang="en" ng-app="myApp" class="no-js">
-	<head>
-		<meta charset="utf-8">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<title>Angular-RequireJS sample app</title>
-		<meta name="description" content="">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<link rel="stylesheet" href="/css/style.css"/>
-		<script src="/bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
-	</head>
-	<body>
-		<h1>AngularJS + RequireJS</h1>
-		<ul class="menu">
-			<li><a href="#/view1">view1</a></li>
-			<li><a href="#/view2">view2</a></li>
-		</ul>
-
-
-		<div ng-view></div>
-
-		<div>AngularJS + RequireJS seed app: v<span app-version></span></div>
-		<script data-main="/js/main" src="/bower_components/requirejs/require.js"></script>
-	</body>
-</html>
-
--->
-
-
 <!DOCTYPE html>
 <html>
 
-  <head>
+    <head>
-    <link rel="stylesheet" href="css/style.css">
+        <title>seed project</title>
-    <script data-main="/js/main" src="/bower_components/requirejs/require.js"></script>
+        <link rel="stylesheet" href="css/style.css">
-  </head>
+        <script data-main="/js/main" src="/bower_components/requirejs/require.js"></script>
+    </head>
 
-  <body>
+    <body>
-    <h1>Sample for <a href="http://marcoslin.github.io/angularAMD/" target="_blank">angularAMD</a></a></h1>
+        <h1>My seed project</h1>
-    <div ng-view></div>
+
-  </body>
+        <div ng-view></div>
+    </body>
 
 </html>

static/partials/partial2.html

@@ -5,3 +5,29 @@
 <hr>
 
 <a href="#/view1">view 1</a>
+
+<label class="checkbox">
+
+<input type="checkbox" ng-model="oneAtATime">
+Open only one at a time
+</label>
+
+<accordion close-others="oneAtATime">
+<accordion-group heading="Static Header, initially expanded" is-open="true">
+  This content is straight in the template.
+</accordion-group>
+<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
+  {{group.content}}
+</accordion-group>
+<accordion-group heading="Dynamic Body Content">
+  <p>The body of the accordion group grows to fit the contents</p>
+    <button class="button small" ng-click="addItem()">Add Item</button>
+    <div ng-repeat="item in items">{{item}}</div>
+</accordion-group>
+<accordion-group is-open="isopen">
+    <accordion-heading>
+        I can have markup, too! <i class="right" ng-class="{'fa fa-chevron-down': isopen, 'fa fa-chevron-right': !isopen}"></i>
+    </accordion-heading>
+    This is just some content to illustrate fancy headings.
+</accordion-group>
+</accordion>