Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit eb45aec

Browse filesBrowse files
bennadelbennadel
committed
Add the requirejs service demo.
1 parent 17f03c4 commit eb45aec
Copy full SHA for eb45aec

File tree

Expand file treeCollapse file tree

4 files changed

+223
-0
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

4 files changed

+223
-0
lines changed
Open diff view settings
Collapse file

‎demos/requirejs-service-angularjs/friends.js‎

Copy file name to clipboard
+26Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Define the friends data using the RequireJS global utility.
2+
define(
3+
[ /* No dependencies. */ ],
4+
[
5+
{
6+
id: 1,
7+
name: "Sarah",
8+
catchPhrase: "Awesome sauce!"
9+
},
10+
{
11+
id: 2,
12+
name: "Tricia",
13+
catchPhrase: "Blam!"
14+
},
15+
{
16+
id: 3,
17+
name: "Joanna",
18+
catchPhrase: "That's what I'm talking about!"
19+
},
20+
{
21+
id: 4,
22+
name: "Heather",
23+
catchPhrase: "Yeah, boy!"
24+
}
25+
]
26+
);
Collapse file

‎demos/requirejs-service-angularjs/index.htm‎

Copy file name to clipboard
+158Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Creating A RequireJS Service For AngularJS
8+
</title>
9+
10+
<style type="text/css">
11+
12+
a[ ng-click ] {
13+
cursor: pointer ;
14+
text-decoration: underline ;
15+
}
16+
17+
</style>
18+
</head>
19+
<body ng-controller="AppController">
20+
21+
<h1>
22+
Creating A RequireJS Service For AngularJS
23+
</h1>
24+
25+
<p>
26+
<a ng-click="loadData()">Load Remote Data with RequireJS</a>
27+
</p>
28+
29+
<!-- BEGIN: Friends List. -->
30+
<ul ng-show="friends.length">
31+
32+
<li ng-repeat="friend in friends">
33+
34+
{{ friend.name }} &mdash; <em>"{{ friend.catchPhrase }}"</em>
35+
36+
</li>
37+
38+
</ul>
39+
<!-- END: Friends List. -->
40+
41+
42+
<!-- Load scripts. -->
43+
<script type="text/javascript" src="../../vendor/jquery/jquery-2.0.3.min.js"></script>
44+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.0.7.min.js"></script>
45+
<script type="text/javascript" src="../../vendor/require/require-2.1.9.min.js"></script>
46+
<script type="text/javascript">
47+
48+
49+
// Create an application module for our demo.
50+
var app = angular.module( "Demo", [] );
51+
52+
53+
// -------------------------------------------------- //
54+
// -------------------------------------------------- //
55+
56+
57+
// I control the root of the application.
58+
app.controller(
59+
"AppController",
60+
function( $scope, require ) {
61+
62+
// Default to an empty list of friends - this data
63+
// will be loaded from the remote data module using
64+
// require.
65+
$scope.friends = [];
66+
67+
68+
// ---
69+
// PUBLIC METHODS.
70+
// ---
71+
72+
73+
// I load the remote friends data.
74+
$scope.loadData = function() {
75+
76+
require(
77+
[ "friends" ],
78+
function( newFriends ) {
79+
80+
$scope.friends = newFriends;
81+
82+
}
83+
);
84+
85+
};
86+
87+
}
88+
);
89+
90+
91+
// -------------------------------------------------- //
92+
// -------------------------------------------------- //
93+
94+
95+
// I am the Require service that proxies the global RequireJS
96+
// reference and helps it integrate into the AngularJS workflow.
97+
app.factory(
98+
"require",
99+
function( $rootScope ) {
100+
101+
// Since the callbacks in the RequireJS module will
102+
// take the control-flow outside of the normal
103+
// AngularJS context, we need to create a proxy that
104+
// will automatically alert AngularJS to the execution
105+
// of the callback. Plus, this gives us an opportunity
106+
// to add some error handling.
107+
function requireProxy( dependencies, successCallback, errorCallback ) {
108+
109+
// Make sure the callbacks are defined - this makes
110+
// the logic easier down below.
111+
successCallback = ( successCallback || angular.noop );
112+
errorCallback = ( errorCallback || angular.noop );
113+
114+
// NOTE: This "require" reference is the core,
115+
// global reference to RequireJS.
116+
require(
117+
( dependencies || [] ),
118+
function successCallbackProxy() {
119+
120+
var args = arguments;
121+
122+
$rootScope.$apply(
123+
function() {
124+
125+
successCallback.apply( this, args );
126+
127+
}
128+
);
129+
130+
},
131+
function errorCallbackProxy() {
132+
133+
var args = arguments;
134+
135+
$rootScope.$apply(
136+
function() {
137+
138+
errorCallback.apply( this, args );
139+
140+
}
141+
);
142+
143+
}
144+
);
145+
146+
}
147+
148+
149+
return( requireProxy );
150+
151+
}
152+
);
153+
154+
155+
</script>
156+
157+
</body>
158+
</html>
Collapse file

‎index.htm‎

Copy file name to clipboardExpand all lines: index.htm
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ <h1>
1313
</h1>
1414

1515
<ol>
16+
<li>
17+
<a href="./demos/requirejs-service-angularjs/">Creating a RequireJS Service For AngularJS</a>
18+
</li>
1619
<li>
1720
<a href="./demos/cancel-timeout-angularjs/">Don't Forget To Cancel $timeout Timers In Your $destroy Events In AngularJS</a>
1821
</li>
Collapse file

‎vendor/require/require-2.1.9.min.js‎

Copy file name to clipboardExpand all lines: vendor/require/require-2.1.9.min.js
+36Lines changed: 36 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.