Merge branch 'master' of github.com:angular/angular.js into future

author: Andres Ornelas 2010-07-27 10:44:46 -0700
committer: Andres Ornelas 2010-07-27 10:44:46 -0700
commit: b42072733c3afd03a49457d88ffed28ebe55655e (patch)
tree: 2fa2b8703cdc75fe19a204d2c9677e27d33c8176 /example
parent: 2f7c538628929888ce7c99b9577e34f8c87211f7 (diff)
parent: 8ddee9bb25ade2bbe7d57db6353b29867606c184 (diff)
download: angular.js-b42072733c3afd03a49457d88ffed28ebe55655e.tar.bz2
7 files changed, 213 insertions, 31 deletions
diff --git a/example/buzz/buzz.css b/example/buzz/buzz.css
new file mode 100644
index 00000000..5fd5763d
--- /dev/null
+++ b/example/buzz/buzz.css
@@ -0,0 +1,89 @@
+body {
+  background: -webkit-gradient(linear, left top, left 100, from(#bbb), to(#fff));
+  background-repeat: no-repeat;
+  margin: 0px;
+  font-family: sans-serif;
+  font-size: 12px;
+}
+
+body > div {
+  border-top: 1px solid white;
+  border-bottom: 1px solid black;
+  text-align: center;
+  background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#888));
+  -webkit-background-origin: padding; -webkit-background-clip: content;
+}
+body > div button {
+  margin: 5px;
+}
+
+body > div span:FIRST-CHILD {
+  float: left;
+  font-family: monospace;
+  font-size: 1.5em;
+  color: black;
+  padding: 2px 5px;
+}
+
+body > div span:last-child {
+  float: right;
+}
+
+ul {
+  list-style: none;
+  padding: 10px;
+  margin: 0;
+}
+
+body > ul > li {
+  border: 1px solid black;
+  margin: 15px 5px;
+  padding: 0;
+  -webkit-box-shadow: 5px 5px 5px #888;
+}
+
+body > ul > li > h1 {
+  margin: 0;
+  background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999));
+  font-size: 13px;
+  border-bottom: 1px solid black;
+}
+
+h1 > img,
+li > img {
+  max-height: 30px;
+  max-width: 30px;
+  vertical-align: middle;
+  padding: 3px;
+}
+
+a > img {
+  margin-right: 5px;
+  margin-top: 5px;
+}
+
+body > ul > li > h1 > a:last-child {
+  float: right;
+  margin: 10px;
+}
+
+body > ul > li > div {
+  background-color: white;
+  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
+  margin: 0;
+  padding: 10px;
+}
+
+body > ul > li ul {
+  margin: 0;
+  padding: 0;
+  margin-left: 5px;
+  border-left: 5px solid lightgray;
+}
+
+body > ul > li ul > li {
+  margin: 0;
+  padding: 10px;
+  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
+}
+
diff --git a/example/buzz/buzz.html b/example/buzz/buzz.html
new file mode 100644
index 00000000..a6777ff8
--- /dev/null
+++ b/example/buzz/buzz.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html xmlns:ng="http://angularjs.org">
+  <head>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
+    <script type="text/javascript" src="http://angularjs.org/ng/js/angular-debug.js#autobind"></script>
+    <script type="text/javascript" src="buzz.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://angularjs.org/ng/css/angular.css"/>
+    <link rel="stylesheet" type="text/css" href="buzz.css"/>
+  </head>
+  <body ng:init="$window.$root = this" ng:controller="BuzzController">
+  <div>
+    <span>&lt;angular/&gt; Buzz</span>
+    <span>
+      filter:
+      <input type="text" name="filterText"/>
+    </span>
+    <span>
+      user:
+      <input type="text" name="userId" ng:required/>
+      <button ng:click="$location.hashPath = userId">fetch</button>
+    </span>
+  </div>
+  <ul>
+    <li ng:repeat="item in activities.data.items.$filter(filterText)">
+      <h1>
+        <img src="{{item.actor.thumbnailUrl}}"/>
+        <a href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
+        <a href="#" ng:click="expandReplies(item)">Replies: {{item.links.replies[0].count}}</a>
+      </h1>
+      <div>
+        {{item.object.content | html}}
+        <div>
+          <a href="{{attachment.links.enclosure[0].href}}" ng:repeat="attachment in item.object.attachments">
+            <img src="{{attachment.links.preview[0].href}}"/>
+          </a>
+        </div>
+      </div>
+      <my:expand expand="item.replies.show">
+        <ul>
+          <li ng:repeat="reply in item.replies.data.items">
+            <img src="{{reply.actor.thumbnailUrl}}"/>
+            <a href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
+            {{reply.content | html}}
+          </li>
+        </ul>
+      </my:expand>
+    </li>
+  </ul>
+  </body>
+</html>
diff --git a/example/buzz/buzz.js b/example/buzz/buzz.js
new file mode 100644
index 00000000..40813d16
--- /dev/null
+++ b/example/buzz/buzz.js
@@ -0,0 +1,46 @@
+angular.service('myApplication', function($resource){
+  this.Activity = $resource(
+      'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activityId/:comments',
+      {alt:'json', callback:'JSON_CALLBACK'},
+      {
+        get:     {method:'JSON', params:{visibility:'@self'}},
+        replies: {method:'JSON', params:{visibility:'@self', comments:'@comments'}}
+      });
+}, {inject:['$resource']});
+
+function BuzzController(){
+  this.$watch('$location.hashPath', this.userChange);
+}
+BuzzController.prototype = {
+  userChange: function(){
+    this.userId = this.$location.hashPath;
+    this.activities = this.Activity.get({userId:this.userId});
+  },
+
+  expandReplies: function(activity) {
+    var self = this;
+    if (activity.replies) {
+      activity.replies.show = !activity.replies.show;
+    } else {
+      activity.replies = this.Activity.replies({userId:this.userId, activityId:activity.id}, function(){
+        activity.replies.show = true;
+      });
+    }
+  }
+};
+
+angular.widget('my:expand', function(element){
+  element.css('display', 'block');
+  this.descend(true);
+  return function(element) {
+    element.hide();
+    var watch = element.attr('expand');
+    this.$watch(watch, function(value){
+      if (value) {
+        element.delay(0).slideDown('slow');
+      } else {
+        element.slideUp('slow');
+      }
+    });
+  };
+});
diff --git a/example/memoryLeak.html b/example/memoryLeak.html
index 9e5f512d..19b0d45d 100644
--- a/example/memoryLeak.html
+++ b/example/memoryLeak.html
@@ -48,8 +48,8 @@
     <link rel="StyleSheet" type="text/css" href="../css/angular.css"/>
   </head>
   <body>
-  <input type="button" value="add" ng-click="add()"/>
-  <input type="button" value="remove" ng-click="remove()"/>
+  <input type="button" value="add" ng:click="add()"/>
+  <input type="button" value="remove" ng:click="remove()"/>
   <div id="partial"></div>
   </body>
 </html>
diff --git a/example/temp.html b/example/temp.html
index d07a6948..337f7fba 100644
--- a/example/temp.html
+++ b/example/temp.html
@@ -1,13 +1,10 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
   <head>
-    <script type="text/javascript" src="../src/angular-bootstrap.js#autobind"></script>
+    <script type="text/javascript"
+         src="../src/angular-bootstrap.js#autobind"></script>
   </head>
-  <body>
-    {{$location.hashSearch.order}} <br/>
-    <input type="radio" name="$location.hashSearch.order" value="A"/> A <br/>
-    <input type="radio" name="$location.hashSearch.order" checked value="B"/> B <br/>
-    <input type="radio" name="$location.hashSearch.order" value="C"/> C <br/>
-    {{$location.hashSearch.order}} <br/>
+  <body ng:init="$window.$root = this">
+    Hello {{'World'}}!
   </body>
 </html>
diff --git a/example/tweeter/tweeter_addressbook.html b/example/tweeter/tweeter_addressbook.html
index 4844c035..ba915cb1 100644
--- a/example/tweeter/tweeter_addressbook.html
+++ b/example/tweeter/tweeter_addressbook.html
@@ -8,25 +8,25 @@
     <script type="text/javascript" src="../../src/angular-bootstrap.js"></script>
     <script type="text/javascript" src="tweeterclient.js"></script>
   </head>
-  <body ng-class="status" ng-init="mute={}" ng-watch="$anchor.user: tweets = fetchTweets($anchor.user)">
+  <body ng:class="status" ng:init="mute={}" ng:watch="$anchor.user: tweets = fetchTweets($anchor.user)">
     <div class="addressbook box">
       <h1>Address Book</h1>
       [ Filter: <input type="text" name="userFilter"/>]
       <ul>
-        <li ng-repeat="user in users.$filter(userFilter).$orderBy('screen_name')" ng-class-even="'even'" ng-class-odd="'odd'">
-          <a href="" ng-click="$anchor.user=user.screen_name"><img src="{{user.profile_image_url}}"/></a>
-          <a href="" ng-click="$anchor.user=user.screen_name">{{user.screen_name}}</a>
+        <li ng:repeat="user in users.$filter(userFilter).$orderBy('screen_name')" ng:class-even="'even'" ng:class-odd="'odd'">
+          <a href="" ng:click="$anchor.user=user.screen_name"><img src="{{user.profile_image_url}}"/></a>
+          <a href="" ng:click="$anchor.user=user.screen_name">{{user.screen_name}}</a>
           as <span class="nickname">{{user.name}}</span>
-          [ <a href="#" ng-click="$anchor.edituser=user.screen_name">edit</a>
-          | <a href="#" ng-click="users.$remove(user)">X</a>
-          | <a href="#" ng-click="mute[user.screen_name] = ! mute[user.screen_name]">mute</a>
+          [ <a href="#" ng:click="$anchor.edituser=user.screen_name">edit</a>
+          | <a href="#" ng:click="users.$remove(user)">X</a>
+          | <a href="#" ng:click="mute[user.screen_name] = ! mute[user.screen_name]">mute</a>
           ]
           <div class="notes">{{user.notes|linky}}</div>
           <div class="clrleft"></div>
         </li>
       </ul>
       <hr/>
-      <div ng-show="$anchor.edituser" ng-eval="user = users.$find({:$.screen_name == $anchor.edituser})">
+      <div ng:show="$anchor.edituser" ng:eval="user = users.$find({:$.screen_name == $anchor.edituser})">
         <div class="editor">
           <label>Username:</label>
           <input type="text" name="user.screen_name" disabled="disabled"/>
@@ -37,7 +37,7 @@
           <label>Notes:</label>
           <textarea type="text" name="user.notes"></textarea>
 
-          <input type="button" ng-click="$anchor.edituser=undefined" value="Close"/>
+          <input type="button" ng:click="$anchor.edituser=undefined" value="Close"/>
         </div>
       </div>
       <hr/>
@@ -58,16 +58,16 @@ tweets={{tweets}}
     <div class="tweeter box">
       <h1>Tweets: {{$anchor.user}}</h1>
       [ Filter: <input type="text" name="tweetFilter"/>
-        <span ng-show="$anchor.user">| <a href="#user=">&lt;&lt; All</a></span>
+        <span ng:show="$anchor.user">| <a href="#user=">&lt;&lt; All</a></span>
       ]
       <div class="loading">Loading...</div>
       <ul>
-       <li ng-repeat="tweet in tweets.$filter(tweetFilter).$filter({:!mute[$.user.screen_name]})"
-           ng-class-even="'even'" ng-class-odd="'odd'"
-           ng-eval="user = users.$find({: $.screen_name == tweet.user.screen_name}) || tweet.user">
+       <li ng:repeat="tweet in tweets.$filter(tweetFilter).$filter({:!mute[$.user.screen_name]})"
+           ng:class-even="'even'" ng:class-odd="'odd'"
+           ng:eval="user = users.$find({: $.screen_name == tweet.user.screen_name}) || tweet.user">
          <img src="{{user.profile_image_url}}"/>
-         [ <a href="" ng-click="$anchor.user=user.screen_name">{{user.nickname || user.name || user.screen_name }}</a>
-         | <a href="" ng-click="users.$includeIf(user, true)">+</a>
+         [ <a href="" ng:click="$anchor.user=user.screen_name">{{user.nickname || user.name || user.screen_name }}</a>
+         | <a href="" ng:click="users.$includeIf(user, true)">+</a>
          ]:
          {{tweet.text | linky}}
          <span class="notes">{{tweet.created_at}}</span>
diff --git a/example/tweeter/tweeter_demo.html b/example/tweeter/tweeter_demo.html
index 138d4e2b..a5ba95ba 100644
--- a/example/tweeter/tweeter_demo.html
+++ b/example/tweeter/tweeter_demo.html
@@ -8,19 +8,19 @@
     <script type="text/javascript" src="../../src/angular-bootstrap.js"></script>
     <script type="text/javascript" src="tweeterclient.js"></script>
   </head>
-  <body ng-class="status" Xng-init="tweets = fetchTweets()">
+  <body ng:class="status" Xng:init="tweets = fetchTweets()">
      (TODO: I should fetch current tweets)
     <div class="tweeter box">
       <h1>Tweets: {{$anchor.user}}</h1>
       [ Filter: <input type="text" name="tweetFilter"/> (TODO: this should act as search box)
-        <span ng-show="$anchor.user">| <a href="#user=">&lt;&lt; All</a></span>
+        <span ng:show="$anchor.user">| <a href="#user=">&lt;&lt; All</a></span>
       ]
       <div class="loading">Loading...</div>
       <ul>
-       <li Xng-repeat="tweet in tweets"
-           ng-class-even="'even'" ng-class-odd="'odd'">
+       <li Xng:repeat="tweet in tweets"
+           ng:class-even="'even'" ng:class-odd="'odd'">
          <img src="{{tweet.user.profile_image_url}}"/>
-         [ <a href="" Xng-click="$anchor.user=tweet.user.screen_name">{{tweet.user.nickname || tweet.user.name || tweet.user.screen_name }}</a>
+         [ <a href="" Xng:click="$anchor.user=tweet.user.screen_name">{{tweet.user.nickname || tweet.user.name || tweet.user.screen_name }}</a>
          ]:
          {{tweet.text}} (TODO: I want urls as links)
          <span class="notes">{{tweet.created_at}}</span>
author	Andres Ornelas	2010-07-27 10:44:46 -0700
committer	Andres Ornelas	2010-07-27 10:44:46 -0700
commit	b42072733c3afd03a49457d88ffed28ebe55655e (patch)
tree	2fa2b8703cdc75fe19a204d2c9677e27d33c8176 /example
parent	2f7c538628929888ce7c99b9577e34f8c87211f7 (diff)
parent	8ddee9bb25ade2bbe7d57db6353b29867606c184 (diff)
download	angular.js-b42072733c3afd03a49457d88ffed28ebe55655e.tar.bz2