Merge pull request #347 from angular-ui/update-sample

Issue #345. Update sample.

Author: nateabele

Gruntfile.js

@@ -70,7 +70,13 @@ module.exports = function (grunt) {
       tasks: ['build', 'karma:background:run']
     },
     connect: {
-      server: {}
+      server: {},
+      sample: {
+        options:{
+          port: 5555,
+          keepalive: true
+        }
+      }
     },
   karma: {
     options: {
@@ -91,6 +97,7 @@ module.exports = function (grunt) {
   grunt.registerTask('dist', 'Perform a clean build and generate documentation', ['clean', 'build', 'jsdoc']);
   grunt.registerTask('release', 'Tag and perform a release', ['prepare-release', 'dist', 'perform-release']);
   grunt.registerTask('dev', 'Run dev server and watch for changes', ['build', 'connect', 'karma:background', 'watch']);
+  grunt.registerTask('sample', 'Run connect server with keepalive:true for sample app development', ['connect:sample']);
 
   grunt.registerTask('jsdoc', 'Generate documentation', function () {
     promising(this,

package.json

@@ -38,6 +38,15 @@
     "grunt-karma": "~0.4.3",
     "jsdoc": "git://github.com/jsdoc3/jsdoc.git#v3.1.1",
     "shelljs": "~0.1.4",
-    "faithful-exec": "~0.1.0"
+    "faithful-exec": "~0.1.0",
+    "karma-firefox-launcher": "~0.1.0",
+    "karma-chrome-launcher": "~0.1.0",
+    "karma-html2js-preprocessor": "~0.1.0",
+    "karma-jasmine": "~0.1.0",
+    "karma-requirejs": "~0.1.0",
+    "karma-script-launcher": "~0.1.0",
+    "karma-coffee-preprocessor": "~0.1.0",
+    "karma": "~0.10.1",
+    "karma-phantomjs-launcher": "~0.1.0"
   }
 }

sample/contacts.detail.html

@@ -1,10 +1,13 @@
 <div>
   <h2>{{contact.name}}</h2>
-  <p class="muted">{{something}}</p>
   <ul>
     <li ng-repeat="item in contact.items">
-      <a href="#/contacts/{{contact.id}}/item/{{item.id}}">{{item.type}}</a>
+      <a ui-sref="contacts.detail.item({contactId:contact.id, itemId:item.id})">{{item.type}}</a>
     </li>
   </ul>
-  <div ui-view ng-animate="{enter:'fade-enter'}"></div>
+  <div ui-view ng-animate="{enter:'fade-enter'}">
+    <!-- Example of default content. This content will be replace as soon as
+         this ui-view is populate with a template -->
+    <small class="muted">Click on a contact item to view and/or edit it.</small>
+  </div>
 </div>

sample/contacts.html

@@ -2,16 +2,16 @@
   <div class="span3">
     <div class="pa-sidebar well well-small">
       <ul class="nav nav-list">
-        <li ng-class="{ active: $state.includes('contacts.list') }"><a href="#/contacts">All Contacts</a></li>
+        <li ng-class="{ active: $state.includes('contacts.list') }"><a ui-sref="contacts.list">All Contacts</a></li>
         <li class="nav-header">Top Contacts</li>
         <li ng-repeat="contact in contacts | limitTo:2"
             ng-class="{ active: $state.includes('contacts.detail') && $stateParams.contactId == contact.id }">
-          <a href="#/contacts/{{contact.id}}" >{{contact.name}}</a>
+          <a ui-sref="contacts.detail({contactId:contact.id})">{{contact.name}}</a>
         </li>
       </ul>
       <hr>
       <button class="btn" ng-click="goToRandom()">Show random contact</button>
-      <div ui-view="menu"></div>
+      <div ui-view="menuTip"></div>
     </div>
   </div>
   <div class="span9" ui-view ng-animate="{enter:'fade-enter'}"></div>

sample/contacts.json

@@ -0,0 +1,47 @@
+{
+  "contacts":[
+    {
+      "id": 1,
+      "name": "Alice",
+      "items": [
+        {
+          "id": "a",
+          "type": "phone number",
+          "value": "555-1234-1234"
+        },
+        {
+          "id": "b",
+          "type": "email",
+          "value": "[email protected]"
+        }
+      ]
+    },
+    {
+      "id": 42,
+      "name": "Bob",
+      "items": [
+        {
+          "id": "a",
+          "type": "blog",
+          "value": "http://bob.blogger.com"
+        },
+        {
+          "id": "b",
+          "type": "fax",
+          "value": "555-999-9999"
+        }
+      ]
+    },
+    {
+      "id": 123,
+      "name": "Eve",
+      "items": [
+        {
+          "id": "a",
+          "type": "full name",
+          "value": "Eve Adamsdottir"
+        }
+      ]
+    }
+  ]
+}

sample/contacts.list.html

@@ -1,6 +1,6 @@
 <h2>All Contacts</h2>
 <ul>
   <li ng-repeat="contact in contacts">
-    <a href="#/contacts/{{contact.id}}">{{contact.name}}</a>
+    <a ui-sref="contacts.detail({contactId:contact.id})">{{contact.name}}</a>
   </li>
 </ul>    

sample/empty.content.html

@@ -0,0 +1,45 @@
+angular.module('uiRouterSample')
+
+    // A RESTful factory for retreiving contacts from 'contacts.json'
+  .factory('contacts', ['$http', function ($http, utils) {
+    var path = 'contacts.json';
+    var contacts = $http.get(path).then(function (resp) {
+      return resp.data.contacts;
+    });
+
+    var factory = {};
+    factory.all = function () {
+      return contacts;
+    };
+    factory.get = function (id) {
+      return contacts.then(function(){
+        return utils.findById(contacts, id);
+      })
+    };
+    return factory;
+  }])
+
+  .factory('utils', function () {
+
+    return {
+
+      // Util for finding an object by its 'id' property among an array
+      findById: function findById(a, id) {
+        for (var i = 0; i < a.length; i++) {
+          if (a[i].id == id) return a[i];
+        }
+        return null;
+      },
+
+      // Util for returning a randomKey from a collection that also isn't the current key
+      newRandomKey: function newRandomKey(coll, key, currentKey){
+        var randKey;
+        do {
+          randKey = coll[Math.floor(coll.length * Math.random())][key];
+        } while (randKey == currentKey);
+        return randKey;
+      }
+
+    };
+
+  });