aboutsummaryrefslogtreecommitdiffstats
path: root/example
diff options
context:
space:
mode:
Diffstat (limited to 'example')
-rw-r--r--example/calculator-bootstrap.html21
-rw-r--r--example/calculator-minified_init.html21
-rw-r--r--example/calculator.html21
-rw-r--r--example/index.html11
-rw-r--r--example/memoryLeak.html55
-rw-r--r--example/temp.html13
-rw-r--r--example/tweeter/style.css98
-rw-r--r--example/tweeter/tweeter_addressbook.html80
-rw-r--r--example/tweeter/tweeter_demo.html34
-rw-r--r--example/tweeter/tweeterclient.js36
10 files changed, 390 insertions, 0 deletions
diff --git a/example/calculator-bootstrap.html b/example/calculator-bootstrap.html
new file mode 100644
index 00000000..c72837dc
--- /dev/null
+++ b/example/calculator-bootstrap.html
@@ -0,0 +1,21 @@
+<!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">
+ <head>
+ <script type="text/javascript" src="../lib/underscore/underscore.js"></script>
+ <script type="text/javascript" src="../lib/jquery/jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../src/angular-bootstrap.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function(){
+ var scope = angular.compile(document);
+ scope.set('a', 3);
+ scope.updateView();
+ });
+ </script>
+ </head>
+ <body>
+ Quantity: <input type="text" name="a" value="2">
+ *
+ Cost: <input type="text" name="b" value="3.4">
+ = {{a * b | currency}}
+ </body>
+</html>
diff --git a/example/calculator-minified_init.html b/example/calculator-minified_init.html
new file mode 100644
index 00000000..4f113f87
--- /dev/null
+++ b/example/calculator-minified_init.html
@@ -0,0 +1,21 @@
+<!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">
+ <head>
+ <script type="text/javascript" src="../lib/underscore/underscore.js"></script>
+ <script type="text/javascript" src="../lib/jquery/jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../angular-minified.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function(){
+ scope = angular.compile(document);
+ scope.set('a', 3);
+ scope.updateView();
+ });
+ </script>
+ </head>
+ <body>
+ Quantity: <input type="text" name="a" value="2">
+ *
+ Cost: <input type="text" name="b" value="3.4">
+ = {{a * b | currency}}
+ </body>
+</html>
diff --git a/example/calculator.html b/example/calculator.html
new file mode 100644
index 00000000..43d013fc
--- /dev/null
+++ b/example/calculator.html
@@ -0,0 +1,21 @@
+<!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">
+ <head>
+ <script type="text/javascript" src="../lib/underscore/underscore.js"></script>
+ <script type="text/javascript" src="../lib/jquery/jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../angular.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function(){
+ var scope = angular.compile(document);
+ scope.set('a', 3);
+ scope.updateView();
+ });
+ </script>
+ </head>
+ <body>
+ Quantity: <input type="text" name="a" value="2">
+ *
+ Cost: <input type="text" name="b" value="3.4">
+ = {{a * b | currency}}
+ </body>
+</html>
diff --git a/example/index.html b/example/index.html
new file mode 100644
index 00000000..12f88ccc
--- /dev/null
+++ b/example/index.html
@@ -0,0 +1,11 @@
+<!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">
+ <head>
+ </head>
+ <body>
+ <ul>
+ <li><a href="calculator-bootstrap.html">Calculator: Auto Init</a></li>
+ <li><a href="calculator.html">Calculator: Manual Init</a></li>
+ </ul>
+ </body>
+</html>
diff --git a/example/memoryLeak.html b/example/memoryLeak.html
new file mode 100644
index 00000000..9e5f512d
--- /dev/null
+++ b/example/memoryLeak.html
@@ -0,0 +1,55 @@
+<!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">
+ <head>
+ <script type="text/javascript" src="../lib/underscore/underscore.js"></script>
+ <script type="text/javascript" src="../lib/jquery/jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../src/angular-bootstrap.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function(){
+ var scope = angular.compile(document);
+ scope.init();
+ scope.set("add", function(){
+ var partial = $("#partial");
+ //id++;
+ partial.html('<div>{{ error() }}<br/></div>');
+ var scope = angular.compile(partial);
+ scope.set("hello", function (){
+ return 'who dat?';
+ });
+ scope.set("error", function (){
+ this.misko.length;
+ });
+ function XXXXXXXXX(){};
+ scope.set('xxx', new XXXXXXXXX());
+ scope.set("names", ["adam", "misko", "shyam"]);
+ scope.init();
+ });
+ scope.set("remove", function(){
+ var partial = $("#partial");
+ /*
+ partial.find('*').andSelf().each(function(){
+ var scope = $(this).data('scope');
+ if (scope) {
+ delete scope.state;
+ delete scope.widgets;
+ }
+ var cntl = $(this).data('controller');
+ if (cntl) {
+ delete cntl.view;
+ }
+ $(this).removeData();
+ });
+ */
+ partial.removeData('scope');
+ partial.children().remove();
+ });
+ });
+ </script>
+ <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()"/>
+ <div id="partial"></div>
+ </body>
+</html>
diff --git a/example/temp.html b/example/temp.html
new file mode 100644
index 00000000..d07a6948
--- /dev/null
+++ b/example/temp.html
@@ -0,0 +1,13 @@
+<!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">
+ <head>
+ <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>
+</html>
diff --git a/example/tweeter/style.css b/example/tweeter/style.css
new file mode 100644
index 00000000..e8468b6b
--- /dev/null
+++ b/example/tweeter/style.css
@@ -0,0 +1,98 @@
+.loading {display: none;}
+.fetching .loading {display: block;}
+
+a {
+ color: blue;
+}
+
+h1 {
+ background-color: black;
+ margin: 0;
+ padding: .25em;
+ color: white;
+ border-bottom: 5px solid gray;
+}
+
+.box {
+ border: 2px solid gray;
+}
+
+.tweeter {
+ margin-right: 360px;
+}
+
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ margin: .25em;
+ padding: 2px;
+}
+
+li img {
+ float: left;
+ margin: 2px;
+ margin-right: .5em;
+ max-height: 48px;
+ min-height: 48px;
+}
+
+li.even {
+ background-color: lightgray;
+}
+
+
+.addressbook {
+ float: right;
+ width: 350px;
+}
+
+.addressbook li {
+ font-size: .9em;
+}
+
+.clrleft {
+ clear: left;
+}
+
+.notes {
+ font-size: .8em;
+ color: gray;
+}
+
+.username, .nickname {
+ font-weight: bold;
+}
+
+.editor {
+ padding: 4px;
+}
+
+label {
+ color: gray;
+ display: inline-block;
+ width: 75px;
+ text-align: right;
+ padding: 2px;
+ margin-top: 10px;
+}
+
+.editor input[type=text],
+.editor textarea {
+ width: 230px;
+ vertical-align: text-top;
+}
+
+.editor TEXTAREA {
+ height: 50px;
+}
+
+.debug{
+ font-size: .7em;
+ white-space: pre;
+ padding: 0;
+ margin: 0;
+} \ No newline at end of file
diff --git a/example/tweeter/tweeter_addressbook.html b/example/tweeter/tweeter_addressbook.html
new file mode 100644
index 00000000..4844c035
--- /dev/null
+++ b/example/tweeter/tweeter_addressbook.html
@@ -0,0 +1,80 @@
+<!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">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <link rel="stylesheet" type="text/css" href="../../css/angular.css">
+ <script type="text/javascript" src="../../lib/underscore/underscore.js"></script>
+ <script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.min.js"></script>
+ <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)">
+ <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>
+ 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>
+ ]
+ <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 class="editor">
+ <label>Username:</label>
+ <input type="text" name="user.screen_name" disabled="disabled"/>
+ <label>Name:</label>
+ <input type="text" name="user.name"/>
+ <label>Image:</label>
+ <input type="text" name="user.profile_image_url"/>
+ <label>Notes:</label>
+ <textarea type="text" name="user.notes"></textarea>
+
+ <input type="button" ng-click="$anchor.edituser=undefined" value="Close"/>
+ </div>
+ </div>
+ <hr/>
+ <div class="debug">
+mute={{mute|json}}
+
+userFilter={{userFilter|json}}
+
+tweetFilter={{tweetFilter|json}}
+
+$anchor={{$anchor}}
+
+users={{users}}
+
+tweets={{tweets}}
+ </div>
+ </div>
+ <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>
+ ]
+ <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">
+ <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>
+ ]:
+ {{tweet.text | linky}}
+ <span class="notes">{{tweet.created_at}}</span>
+ <span class="notes">{{user.notes}}</span>
+ <div class="clrleft"></div>
+ </li>
+ </ul>
+ </div>
+ </body>
+</html>
diff --git a/example/tweeter/tweeter_demo.html b/example/tweeter/tweeter_demo.html
new file mode 100644
index 00000000..138d4e2b
--- /dev/null
+++ b/example/tweeter/tweeter_demo.html
@@ -0,0 +1,34 @@
+<!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">
+ <head>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <link rel="stylesheet" type="text/css" href="../../css/angular.css">
+ <script type="text/javascript" src="../../lib/underscore/underscore.js"></script>
+ <script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.min.js"></script>
+ <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()">
+ (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>
+ ]
+ <div class="loading">Loading...</div>
+ <ul>
+ <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>
+ ]:
+ {{tweet.text}} (TODO: I want urls as links)
+ <span class="notes">{{tweet.created_at}}</span>
+ <span class="notes">{{tweet.user.notes}}</span>
+ <div class="clrleft"></div>
+ </li>
+ </ul>
+ </div>
+ <pre>tweets=(TODO: display me!!!)</pre>
+ </body>
+</html>
diff --git a/example/tweeter/tweeterclient.js b/example/tweeter/tweeterclient.js
new file mode 100644
index 00000000..84fc5ef7
--- /dev/null
+++ b/example/tweeter/tweeterclient.js
@@ -0,0 +1,36 @@
+function noop(){}
+$(document).ready(function(){
+ function xhr(method, url, data, callback){
+ jQuery.getJSON(url, function(){
+ callback.apply(this, arguments);
+ scope.updateView();
+ });
+ }
+
+ var resourceFactory = new ResourceFactory(xhr);
+
+ var Tweeter = resourceFactory.route("http://twitter.com/statuses/:service:username.json", {}, {
+ home: {method:'GET', params: {service:'home_timeline'}, isArray:true },
+ user: {method:'GET', params: {service:'user_timeline/'}, isArray:true }
+ });
+
+
+ var scope = window.scope = angular.compile(document, {
+ location:angular.startUrlWatcher()
+ });
+
+ function fetchTweets(username){
+ return username ? Tweeter.user({username: username}) : Tweeter.home();
+ }
+
+ scope.set('fetchTweets', fetchTweets);
+ scope.set('users', [
+ {screen_name:'mhevery', name:'Mi\u0161ko Hevery',
+ notes:'Author of <angular/> http://www.getangular.com.',
+ profile_image_url:'http://a3.twimg.com/profile_images/54360179/Me_-_Small_Banner_normal.jpg'},
+ {screen_name:'abrons', name:'Adam Abrons',
+ notes:'Author of <angular/> & Ruby guru see: http://www.angularjs.org.',
+ profile_image_url:'http://media.linkedin.com/mpr/mpr/shrink_80_80/p/2/000/005/0a8/044278d.jpg'}
+ ]);
+ scope.init();
+});
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-01 17:48:30 +0000