24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/src/orders.json:
--------------------------------------------------------------------------------
1 | [
2 | { "product": "Golf Balls", "total": 19.99},
3 | { "product": "Driver", "total": 219.99}
4 | ]
--------------------------------------------------------------------------------
/src/styles/animations.css:
--------------------------------------------------------------------------------
1 | /* Animations */
2 | .slide-animation-container {
3 | position:relative;
4 | }
5 |
6 | .slide-animation.ng-enter, .slide-animation.ng-leave {
7 | -webkit-transition: 0.5s linear all;
8 | -moz-transition: 0.5s linear all;
9 | -o-transition: 0.5s linear all;
10 | transition: 0.5s linear all;
11 | position:relative;
12 | /*top: 0;
13 | left: 0;
14 | right: 0;*/
15 | height: 1000px;
16 | }
17 |
18 | .slide-animation.ng-enter {
19 | z-index:100;
20 | left:100px;
21 | opacity:0;
22 | }
23 |
24 | .slide-animation.ng-enter.ng-enter-active {
25 | left:0;
26 | opacity:1;
27 | }
28 |
29 | .slide-animation.ng-leave {
30 | z-index:101;
31 | opacity:1;
32 | left:0;
33 | }
34 |
35 | .slide-animation.ng-leave.ng-leave-active {
36 | left:-100px;
37 | opacity:0;
38 | }
39 |
40 | body.skip-animations * {
41 | -webkit-transition:none!important;
42 | -moz-transition:none!important;
43 | -o-transition:none!important;
44 | transition:none!important;
45 | }
46 |
47 | .show-hide-animation.ng-hide-add,
48 | .show-hide-animation.ng-hide-remove {
49 | -webkit-transition:all linear 0.3s;
50 | -moz-transition:all linear 0.3s;
51 | -o-transition:all linear 0.3s;
52 | transition:all linear 0.3s;
53 | display:block!important;
54 | height: 1000px;
55 | }
56 |
57 | .show-hide-animation.ng-hide-remove {
58 | opacity:0;
59 | }
60 | .show-hide-animation.ng-hide-remove.ng-hide-remove-active {
61 | opacity:1;
62 | }
63 | .show-hide-animation.ng-hide-add {
64 | opacity:1;
65 | }
66 | .show-hide-animation.ng-hide-add.ng-hide-add-active {
67 | opacity:0;
68 | }
69 |
70 | .repeat-animation.ng-enter,
71 | .repeat-animation.ng-leave,
72 | .repeat-animation.ng-move {
73 | -webkit-transition: 0.5s linear all;
74 | -moz-transition: 0.5s linear all;
75 | -o-transition: 0.5s linear all;
76 | transition: 0.5s linear all;
77 | position:relative;
78 | }
79 |
80 | .repeat-animation.ng-enter {
81 | left:10px;
82 | opacity:0;
83 | }
84 | .repeat-animation.ng-enter.ng-enter-active {
85 | left:0;
86 | opacity:1;
87 | }
88 |
89 | .repeat-animation.ng-leave {
90 | left:10px;
91 | opacity:1;
92 | }
93 | .repeat-animation.ng-leave.ng-leave-active {
94 | left:-10px;
95 | opacity:0;
96 | }
97 |
98 | .repeat-animation.ng-move {
99 | opacity:0.5;
100 | }
101 | .repeat-animation.ng-move.ng-move-active {
102 | opacity:1;
103 | }
104 |
105 | body {
106 | margin-left: 20px;
107 | }
108 |
109 | table {
110 | width: 300px;
111 | }
--------------------------------------------------------------------------------
/superstatic.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": "src"
3 | }
4 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "sourceMap": true
5 | }
6 | }
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "class-name": true,
4 | "curly": true,
5 | "eofline": false,
6 | "forin": true,
7 | "indent": [true, 4],
8 | "label-position": true,
9 | "label-undefined": true,
10 | "max-line-length": [true, 140],
11 | "no-arg": true,
12 | "no-bitwise": true,
13 | "no-console": [true,
14 | "debug",
15 | "info",
16 | "time",
17 | "timeEnd",
18 | "trace"
19 | ],
20 | "no-construct": true,
21 | "no-debugger": true,
22 | "no-duplicate-key": true,
23 | "no-duplicate-variable": true,
24 | "no-empty": true,
25 | "no-eval": true,
26 | "no-string-literal": false,
27 | "no-trailing-whitespace": true,
28 | "no-unused-variable": false,
29 | "no-unreachable": true,
30 | "no-use-before-declare": true,
31 | "one-line": [true,
32 | "check-open-brace",
33 | "check-catch",
34 | "check-else",
35 | "check-whitespace"
36 | ],
37 | "quotemark": [true, "single"],
38 | "radix": true,
39 | "semicolon": true,
40 | "triple-equals": [true, "allow-null-check"],
41 | "variable-name": false,
42 | "whitespace": [true,
43 | "check-branch",
44 | "check-decl",
45 | "check-operator",
46 | "check-separator"
47 | ]
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "ambientDependencies": {
3 | "angular": "registry:dt/angular#1.5.0+20160412133217",
4 | "angular-animate": "registry:dt/angular-animate#1.5.0+20160407085121",
5 | "angular-route": "registry:dt/angular-route#1.3.0+20160317120654",
6 | "jquery": "registry:dt/jquery#1.10.0+20160417213236"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/typings/browser.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 | ///
4 | ///
5 |
--------------------------------------------------------------------------------
/typings/browser/ambient/angular-animate/index.d.ts:
--------------------------------------------------------------------------------
1 | // Generated by typings
2 | // Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/f0b2681b481397d0c03557ac2ac4d70c1c61c464/angularjs/angular-animate.d.ts
3 | // Type definitions for Angular JS 1.5 (ngAnimate module)
4 | // Project: http://angularjs.org
5 | // Definitions by: Michel Salib , Adi Dahiya , Raphael Schweizer , Cody Schaaf
6 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
7 |
8 |
9 | declare module "angular-animate" {
10 | var _: string;
11 | export = _;
12 | }
13 |
14 | /**
15 | * ngAnimate module (angular-animate.js)
16 | */
17 | declare namespace angular.animate {
18 | interface IAnimateFactory {
19 | (...args: any[]): IAnimateCallbackObject;
20 | }
21 |
22 | interface IAnimateCallbackObject {
23 | eventFn?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
24 | setClass?: (element: IAugmentedJQuery, addedClasses: string, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;
25 | addClass?: (element: IAugmentedJQuery, addedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;
26 | removeClass?: (element: IAugmentedJQuery, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;
27 | enter?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
28 | leave?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
29 | move?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
30 | animate?: (element: IAugmentedJQuery, fromStyles: string, toStyles: string, doneFunction: Function, options: IAnimationOptions) => any;
31 | }
32 |
33 | interface IAnimationPromise extends IPromise {}
34 |
35 | /**
36 | * AnimateService
37 | * see http://docs.angularjs.org/api/ngAnimate/service/$animate
38 | */
39 | interface IAnimateService {
40 | /**
41 | * Sets up an event listener to fire whenever the animation event has fired on the given element or among any of its children.
42 | *
43 | * @param event the animation event that will be captured (e.g. enter, leave, move, addClass, removeClass, etc...)
44 | * @param container the container element that will capture each of the animation events that are fired on itself as well as among its children
45 | * @param callback the callback function that will be fired when the listener is triggered
46 | */
47 | on(event: string, container: JQuery, callback: Function): void;
48 |
49 | /**
50 | * Deregisters an event listener based on the event which has been associated with the provided element.
51 | *
52 | * @param event the animation event (e.g. enter, leave, move, addClass, removeClass, etc...)
53 | * @param container the container element the event listener was placed on
54 | * @param callback the callback function that was registered as the listener
55 | */
56 | off(event: string, container?: JQuery, callback?: Function): void;
57 |
58 | /**
59 | * Associates the provided element with a host parent element to allow the element to be animated even if it exists outside of the DOM structure of the Angular application.
60 | *
61 | * @param element the external element that will be pinned
62 | * @param parentElement the host parent element that will be associated with the external element
63 | */
64 | pin(element: JQuery, parentElement: JQuery): void;
65 |
66 | /**
67 | * Globally enables / disables animations.
68 | *
69 | * @param element If provided then the element will be used to represent the enable/disable operation.
70 | * @param value If provided then set the animation on or off.
71 | * @returns current animation state
72 | */
73 | enabled(element: JQuery, value?: boolean): boolean;
74 | enabled(value: boolean): boolean;
75 |
76 | /**
77 | * Cancels the provided animation.
78 | */
79 | cancel(animationPromise: IAnimationPromise): void;
80 |
81 | /**
82 | * Performs an inline animation on the element.
83 | *
84 | * @param element the element that will be the focus of the animation
85 | * @param from a collection of CSS styles that will be applied to the element at the start of the animation
86 | * @param to a collection of CSS styles that the element will animate towards
87 | * @param className an optional CSS class that will be added to the element for the duration of the animation (the default class is 'ng-inline-animate')
88 | * @param options an optional collection of styles that will be picked up by the CSS transition/animation
89 | * @returns the animation callback promise
90 | */
91 | animate(element: JQuery, from: any, to: any, className?: string, options?: IAnimationOptions): IAnimationPromise;
92 |
93 | /**
94 | * Appends the element to the parentElement element that resides in the document and then runs the enter animation.
95 | *
96 | * @param element the element that will be the focus of the enter animation
97 | * @param parentElement the parent element of the element that will be the focus of the enter animation
98 | * @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation
99 | * @param options an optional collection of styles that will be picked up by the CSS transition/animation
100 | * @returns the animation callback promise
101 | */
102 | enter(element: JQuery, parentElement: JQuery, afterElement?: JQuery, options?: IAnimationOptions): IAnimationPromise;
103 |
104 | /**
105 | * Runs the leave animation operation and, upon completion, removes the element from the DOM.
106 | *
107 | * @param element the element that will be the focus of the leave animation
108 | * @param options an optional collection of styles that will be picked up by the CSS transition/animation
109 | * @returns the animation callback promise
110 | */
111 | leave(element: JQuery, options?: IAnimationOptions): IAnimationPromise;
112 |
113 | /**
114 | * Fires the move DOM operation. Just before the animation starts, the animate service will either append
115 | * it into the parentElement container or add the element directly after the afterElement element if present.
116 | * Then the move animation will be run.
117 | *
118 | * @param element the element that will be the focus of the move animation
119 | * @param parentElement the parent element of the element that will be the focus of the move animation
120 | * @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation
121 | * @returns the animation callback promise
122 | */
123 | move(element: JQuery, parentElement: JQuery, afterElement?: JQuery): IAnimationPromise;
124 |
125 | /**
126 | * Triggers a custom animation event based off the className variable and then attaches the className
127 | * value to the element as a CSS class.
128 | *
129 | * @param element the element that will be animated
130 | * @param className the CSS class that will be added to the element and then animated
131 | * @param options an optional collection of styles that will be picked up by the CSS transition/animation
132 | * @returns the animation callback promise
133 | */
134 | addClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;
135 |
136 | /**
137 | * Triggers a custom animation event based off the className variable and then removes the CSS class
138 | * provided by the className value from the element.
139 | *
140 | * @param element the element that will be animated
141 | * @param className the CSS class that will be animated and then removed from the element
142 | * @param options an optional collection of styles that will be picked up by the CSS transition/animation
143 | * @returns the animation callback promise
144 | */
145 | removeClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;
146 |
147 | /**
148 | * Adds and/or removes the given CSS classes to and from the element. Once complete, the done() callback
149 | * will be fired (if provided).
150 | *
151 | * @param element the element which will have its CSS classes changed removed from it
152 | * @param add the CSS classes which will be added to the element
153 | * @param remove the CSS class which will be removed from the element CSS classes have been set on the element
154 | * @param options an optional collection of styles that will be picked up by the CSS transition/animation
155 | * @returns the animation callback promise
156 | */
157 | setClass(element: JQuery, add: string, remove: string, options?: IAnimationOptions): IAnimationPromise;
158 | }
159 |
160 | /**
161 | * AnimateProvider
162 | * see http://docs.angularjs.org/api/ngAnimate/provider/$animateProvider
163 | */
164 | interface IAnimateProvider {
165 | /**
166 | * Registers a new injectable animation factory function.
167 | *
168 | * @param name The name of the animation.
169 | * @param factory The factory function that will be executed to return the animation object.
170 | */
171 | register(name: string, factory: IAnimateFactory): void;
172 |
173 | /**
174 | * Gets and/or sets the CSS class expression that is checked when performing an animation.
175 | *
176 | * @param expression The className expression which will be checked against all animations.
177 | * @returns The current CSS className expression value. If null then there is no expression value.
178 | */
179 | classNameFilter(expression?: RegExp): RegExp;
180 | }
181 |
182 | /**
183 | * Angular Animation Options
184 | * see https://docs.angularjs.org/api/ngAnimate/#applying-directive-specific-styles-to-an-animation
185 | */
186 | interface IAnimationOptions {
187 | /**
188 | * The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.
189 | */
190 | to?: Object;
191 |
192 | /**
193 | * The starting CSS styles (a key/value object) that will be applied at the start of the animation.
194 | */
195 | from?: Object;
196 |
197 | /**
198 | * The DOM event (e.g. enter, leave, move). When used, a generated CSS class of ng-EVENT and
199 | * ng-EVENT-active will be applied to the element during the animation. Multiple events can be provided when
200 | * spaces are used as a separator. (Note that this will not perform any DOM operation.)
201 | */
202 | event?: string;
203 |
204 | /**
205 | * The CSS easing value that will be applied to the transition or keyframe animation (or both).
206 | */
207 | easing?: string;
208 |
209 | /**
210 | * The raw CSS transition style that will be used (e.g. 1s linear all).
211 | */
212 | transition?: string;
213 |
214 | /**
215 | * The raw CSS keyframe animation style that will be used (e.g. 1s my_animation linear).
216 | */
217 | keyframe?: string;
218 |
219 | /**
220 | * A space separated list of CSS classes that will be added to the element and spread across the animation.
221 | */
222 | addClass?: string;
223 |
224 | /**
225 | * A space separated list of CSS classes that will be removed from the element and spread across
226 | * the animation.
227 | */
228 | removeClass?: string;
229 |
230 | /**
231 | * A number value representing the total duration of the transition and/or keyframe (note that a value
232 | * of 1 is 1000ms). If a value of 0 is provided then the animation will be skipped entirely.
233 | */
234 | duration?: number;
235 |
236 | /**
237 | * A number value representing the total delay of the transition and/or keyframe (note that a value of
238 | * 1 is 1000ms). If a value of true is used then whatever delay value is detected from the CSS classes will be
239 | * mirrored on the elements styles (e.g. by setting delay true then the style value of the element will be
240 | * transition-delay: DETECTED_VALUE). Using true is useful when you want the CSS classes and inline styles to
241 | * all share the same CSS delay value.
242 | */
243 | delay?: number;
244 |
245 | /**
246 | * A numeric time value representing the delay between successively animated elements (Click here to
247 | * learn how CSS-based staggering works in ngAnimate.)
248 | */
249 | stagger?: number;
250 |
251 | /**
252 | * The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item
253 | * in the stagger; therefore when a stagger option value of 0.1 is used then there will be a stagger delay of 600ms)
254 | * applyClassesEarly - Whether or not the classes being added or removed will be used when detecting the animation.
255 | * This is set by $animate when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time.
256 | * (Note that this will prevent any transitions from occuring on the classes being added and removed.)
257 | */
258 | staggerIndex?: number;
259 | }
260 |
261 | interface IAnimateCssRunner {
262 | /**
263 | * Starts the animation
264 | *
265 | * @returns The animation runner with a done function for supplying a callback.
266 | */
267 | start(): IAnimateCssRunnerStart;
268 |
269 | /**
270 | * Ends (aborts) the animation
271 | */
272 | end(): void;
273 | }
274 |
275 | interface IAnimateCssRunnerStart extends IPromise {
276 | /**
277 | * Allows you to add done callbacks to the running animation
278 | *
279 | * @param callbackFn: the callback function to be run
280 | */
281 | done(callbackFn: (animationFinished: boolean) => void): void;
282 | }
283 |
284 | /**
285 | * AnimateCssService
286 | * see http://docs.angularjs.org/api/ngAnimate/service/$animateCss
287 | */
288 | interface IAnimateCssService {
289 | (element: JQuery, animateCssOptions: IAnimationOptions): IAnimateCssRunner;
290 | }
291 | }
292 |
293 | declare module angular {
294 | interface IModule {
295 | animation(name: string, animationFactory: angular.animate.IAnimateFactory): IModule;
296 | animation(name: string, inlineAnnotatedFunction: any[]): IModule;
297 | animation(object: Object): IModule;
298 | }
299 |
300 | }
--------------------------------------------------------------------------------
/typings/browser/ambient/angular-route/index.d.ts:
--------------------------------------------------------------------------------
1 | // Generated by typings
2 | // Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/angularjs/angular-route.d.ts
3 | // Type definitions for Angular JS 1.3 (ngRoute module)
4 | // Project: http://angularjs.org
5 | // Definitions by: Jonathan Park
6 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
7 |
8 |
9 | declare module "angular-route" {
10 | var _: string;
11 | export = _;
12 | }
13 |
14 | ///////////////////////////////////////////////////////////////////////////////
15 | // ngRoute module (angular-route.js)
16 | ///////////////////////////////////////////////////////////////////////////////
17 | declare namespace angular.route {
18 |
19 | ///////////////////////////////////////////////////////////////////////////
20 | // RouteParamsService
21 | // see http://docs.angularjs.org/api/ngRoute.$routeParams
22 | ///////////////////////////////////////////////////////////////////////////
23 | interface IRouteParamsService {
24 | [key: string]: any;
25 | }
26 |
27 | ///////////////////////////////////////////////////////////////////////////
28 | // RouteService
29 | // see http://docs.angularjs.org/api/ngRoute.$route
30 | // see http://docs.angularjs.org/api/ngRoute.$routeProvider
31 | ///////////////////////////////////////////////////////////////////////////
32 | interface IRouteService {
33 | reload(): void;
34 | routes: any;
35 |
36 | // May not always be available. For instance, current will not be available
37 | // to a controller that was not initialized as a result of a route maching.
38 | current?: ICurrentRoute;
39 |
40 | /**
41 | * Causes $route service to update the current URL, replacing current route parameters with those specified in newParams.
42 | * Provided property names that match the route's path segment definitions will be interpolated into the
43 | * location's path, while remaining properties will be treated as query params.
44 | *
45 | * @param newParams Object. mapping of URL parameter names to values
46 | */
47 | updateParams(newParams:{[key:string]:string}): void;
48 |
49 | }
50 |
51 | type InlineAnnotatedFunction = Function|Array
52 |
53 | /**
54 | * see http://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when for API documentation
55 | */
56 | interface IRoute {
57 | /**
58 | * {(string|function()=}
59 | * Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.
60 | */
61 | controller?: string|InlineAnnotatedFunction;
62 | /**
63 | * A controller alias name. If present the controller will be published to scope under the controllerAs name.
64 | */
65 | controllerAs?: string;
66 | /**
67 | * Undocumented?
68 | */
69 | name?: string;
70 | /**
71 | * {string=|function()=}
72 | * Html template as a string or a function that returns an html template as a string which should be used by ngView or ngInclude directives. This property takes precedence over templateUrl.
73 | *
74 | * If template is a function, it will be called with the following parameters:
75 | *
76 | * {Array.