├── LICENSE.md
├── README.md
├── assets
├── app
│ ├── beans
│ │ └── render-context.js
│ ├── controllers
│ │ ├── app-controller.js
│ │ ├── contact
│ │ │ └── contact-controller.js
│ │ ├── home
│ │ │ └── home-controller.js
│ │ ├── layouts
│ │ │ ├── splash-controller.js
│ │ │ └── standard-controller.js
│ │ └── pets
│ │ │ ├── categories-controller.js
│ │ │ ├── detail
│ │ │ ├── detail-controller.js
│ │ │ └── random-controller.js
│ │ │ ├── list-controller.js
│ │ │ └── pets-controller.js
│ ├── css
│ │ └── main.css
│ ├── img
│ │ ├── header-splash.jpg
│ │ └── header-standard.jpg
│ ├── less
│ │ ├── category-list.less
│ │ ├── core.less
│ │ ├── home-nav.less
│ │ ├── loading.less
│ │ ├── main.less
│ │ ├── mixins.less
│ │ ├── pet-header.less
│ │ ├── pet-list-header.less
│ │ ├── pet-properties.less
│ │ ├── random-pet.less
│ │ ├── splash.less
│ │ ├── standard.less
│ │ └── tabs.less
│ ├── main.js
│ ├── services
│ │ ├── category-service.js
│ │ ├── lodash.js
│ │ ├── pet-service.js
│ │ └── request-context.js
│ └── views
│ │ ├── contact
│ │ └── index.htm
│ │ ├── home
│ │ └── index.htm
│ │ ├── layouts
│ │ ├── splash.htm
│ │ └── standard.htm
│ │ └── pets
│ │ ├── categories.htm
│ │ ├── detail
│ │ ├── background.htm
│ │ ├── diet.htm
│ │ ├── index.htm
│ │ ├── medical-history.htm
│ │ └── random.htm
│ │ ├── index.htm
│ │ └── list.htm
└── vendor
│ ├── angularjs
│ └── angular.min.js
│ ├── jquery
│ └── jquery-1.8.3.min.js
│ └── lodash
│ └── lodash.min.js
└── index.htm
/LICENSE.md:
--------------------------------------------------------------------------------
1 |
2 | # The MIT License (MIT)
3 |
4 | Copyright (c) 2013 [Ben Nadel][1]
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy of
7 | this software and associated documentation files (the "Software"), to deal in
8 | the Software without restriction, including without limitation the rights to
9 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
10 | the Software, and to permit persons to whom the Software is furnished to do so,
11 | subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
18 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
19 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
20 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
21 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22 |
23 | [1]: http://www.bennadel.com
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # AngularJS - Deep Routing Example
2 |
3 | See demo at http://bennadel.github.io/AngularJS-Routing
4 |
--------------------------------------------------------------------------------
/assets/app/beans/render-context.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ) {
2 |
3 | "use strict";
4 |
5 | // I provide information about the current route request, local to the given render path.
6 | app.value(
7 | "RenderContext",
8 | function( requestContext, actionPrefix, paramNames ) {
9 |
10 |
11 | // I return the next section after the location being watched.
12 | function getNextSection() {
13 |
14 | return(
15 | requestContext.getNextSection( actionPrefix )
16 | );
17 |
18 | }
19 |
20 |
21 | // I check to see if the action has changed (and is local to the current location).
22 | function isChangeLocal() {
23 |
24 | return(
25 | requestContext.startsWith( actionPrefix )
26 | );
27 |
28 | }
29 |
30 |
31 | // I determine if the last change in the request context is relevant to
32 | // the action and route params being observed in this render context.
33 | function isChangeRelevant() {
34 |
35 | // If the action is not local to the action prefix, then we don't even
36 | // want to bother checking the params.
37 | if ( ! requestContext.startsWith( actionPrefix ) ) {
38 |
39 | return( false );
40 |
41 | }
42 |
43 | // If the action has changed, we don't need to bother checking the params.
44 | if ( requestContext.hasActionChanged() ) {
45 |
46 | return( true ) ;
47 |
48 | }
49 |
50 | // If we made it this far, we know that the action has not changed. As such, we''ll
51 | // have to make the change determination based on the observed parameters.
52 | return(
53 | paramNames.length &&
54 | requestContext.haveParamsChanged( paramNames )
55 | );
56 |
57 | }
58 |
59 |
60 | // ---------------------------------------------- //
61 | // ---------------------------------------------- //
62 |
63 |
64 | // Private variables...
65 |
66 |
67 | // ---------------------------------------------- //
68 | // ---------------------------------------------- //
69 |
70 |
71 | // Return the public API.
72 | return({
73 | getNextSection: getNextSection,
74 | isChangeLocal: isChangeLocal,
75 | isChangeRelevant: isChangeRelevant
76 | });
77 |
78 |
79 | }
80 | );
81 |
82 | })( angular, Demo );
83 |
--------------------------------------------------------------------------------
/assets/app/controllers/app-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "AppController",
7 | function( $scope, $route, $routeParams, $location, requestContext, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // I check to see if the given route is a valid route; or, is the route being
14 | // re-directed to the default route (due to failure to match pattern).
15 | function isRouteRedirect( route ) {
16 |
17 | // If there is no action, then the route is redirection from an unknown
18 | // route to a known route.
19 | return( ! route.current.action );
20 |
21 | }
22 |
23 |
24 | // --- Define Scope Methods. ------------------------ //
25 |
26 |
27 | // I get the current time for use when display the time a controller was rendered.
28 | // This way, we can see the difference between when a controller was instantiated
29 | // and when it was re-populated with data.
30 | $scope.getInstanceTime = function() {
31 |
32 | var now = new Date();
33 | var timeString = now.toTimeString();
34 | var instanceTime = timeString.match( /\d+:\d+:\d+/i );
35 |
36 | return( instanceTime[ 0 ] );
37 |
38 | };
39 |
40 |
41 | // TODO: Flesh this out - for now, just trying to create a wrapper for alert().
42 | $scope.openModalWindow = function( modalType ) {
43 |
44 | alert( arguments[ 1 ] || "Opps: Something went wrong." );
45 |
46 | };
47 |
48 |
49 | // I update the title tag.
50 | $scope.setWindowTitle = function( title ) {
51 |
52 | $scope.windowTitle = title;
53 |
54 | };
55 |
56 |
57 | // --- Define Controller Variables. ----------------- //
58 |
59 |
60 | // Get the render context local to this controller (and relevant params).
61 | var renderContext = requestContext.getRenderContext();
62 |
63 |
64 | // --- Define Scope Variables. ---------------------- //
65 |
66 |
67 | // Set up the default window title.
68 | $scope.windowTitle = "Adopt-A-Pet";
69 |
70 | // The subview indicates which view is going to be rendered on the page.
71 | $scope.subview = renderContext.getNextSection();
72 |
73 |
74 | // --- Bind To Scope Events. ------------------------ //
75 |
76 |
77 | // I handle changes to the request context.
78 | $scope.$on(
79 | "requestContextChanged",
80 | function() {
81 |
82 | // Make sure this change is relevant to this controller.
83 | if ( ! renderContext.isChangeRelevant() ) {
84 |
85 | return;
86 |
87 | }
88 |
89 | // Update the view that is being rendered.
90 | $scope.subview = renderContext.getNextSection();
91 |
92 | }
93 | );
94 |
95 |
96 | // Listen for route changes so that we can trigger request-context change events.
97 | $scope.$on(
98 | "$routeChangeSuccess",
99 | function( event ) {
100 |
101 | // If this is a redirect directive, then there's no taction to be taken.
102 | if ( isRouteRedirect( $route ) ) {
103 |
104 | return;
105 |
106 | }
107 |
108 | // Update the current request action change.
109 | requestContext.setContext( $route.current.action, $routeParams );
110 |
111 | // Announce the change in render conditions.
112 | $scope.$broadcast( "requestContextChanged", requestContext );
113 |
114 | }
115 | );
116 |
117 |
118 | // --- Initialize. ---------------------------------- //
119 |
120 |
121 | // ...
122 |
123 |
124 | }
125 | );
126 |
127 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/controllers/contact/contact-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "contact.ContactController",
7 | function( $scope, requestContext, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // ...
14 |
15 |
16 | // --- Define Scope Methods. ------------------------ //
17 |
18 |
19 | // ...
20 |
21 |
22 | // --- Define Controller Variables. ----------------- //
23 |
24 |
25 | // Get the render context local to this controller (and relevant params).
26 | var renderContext = requestContext.getRenderContext( "standard.contact" );
27 |
28 |
29 | // --- Define Scope Variables. ---------------------- //
30 |
31 |
32 | // The subview indicates which view is going to be rendered on the page.
33 | $scope.subview = renderContext.getNextSection();
34 |
35 |
36 | // --- Bind To Scope Events. ------------------------ //
37 |
38 |
39 | // I handle changes to the request context.
40 | $scope.$on(
41 | "requestContextChanged",
42 | function() {
43 |
44 | // Make sure this change is relevant to this controller.
45 | if ( ! renderContext.isChangeRelevant() ) {
46 |
47 | return;
48 |
49 | }
50 |
51 | // Update the view that is being rendered.
52 | $scope.subview = renderContext.getNextSection();
53 |
54 | }
55 | );
56 |
57 |
58 | // --- Initialize. ---------------------------------- //
59 |
60 |
61 | $scope.setWindowTitle( "Contact Us" );
62 |
63 |
64 | }
65 | );
66 |
67 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/controllers/home/home-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "home.HomeController",
7 | function( $scope, requestContext, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // ...
14 |
15 |
16 | // --- Define Scope Methods. ------------------------ //
17 |
18 |
19 | // ...
20 |
21 |
22 | // --- Define Controller Variables. ----------------- //
23 |
24 |
25 | // Get the render context local to this controller (and relevant params).
26 | var renderContext = requestContext.getRenderContext( "splash.home" )
27 |
28 |
29 | // --- Define Scope Variables. ---------------------- //
30 |
31 |
32 | // The subview indicates which view is going to be rendered on the page.
33 | $scope.subview = renderContext.getNextSection();
34 |
35 |
36 | // --- Bind To Scope Events. ------------------------ //
37 |
38 |
39 | // I handle changes to the request context.
40 | $scope.$on(
41 | "requestContextChanged",
42 | function() {
43 |
44 | // Make sure this change is relevant to this controller.
45 | if ( ! renderContext.isChangeRelevant() ) {
46 |
47 | return;
48 |
49 | }
50 |
51 | // Update the view that is being rendered.
52 | $scope.subview = renderContext.getNextSection();
53 |
54 | }
55 | );
56 |
57 |
58 | // --- Initialize. ---------------------------------- //
59 |
60 |
61 | $scope.setWindowTitle( "Welcome to Adopt-A-Pet" );
62 |
63 |
64 | }
65 | );
66 |
67 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/controllers/layouts/splash-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "layouts.SplashController",
7 | function( $scope, requestContext, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // ...
14 |
15 |
16 | // --- Define Scope Methods. ------------------------ //
17 |
18 |
19 | // ...
20 |
21 |
22 | // --- Define Controller Variables. ----------------- //
23 |
24 |
25 | // Get the render context local to this controller (and relevant params).
26 | var renderContext = requestContext.getRenderContext( "splash" );
27 |
28 |
29 | // --- Define Scope Variables. ---------------------- //
30 |
31 |
32 | // The subview indicates which view is going to be rendered on the page.
33 | $scope.subview = renderContext.getNextSection();
34 |
35 | // Get the current year for copyright output.
36 | $scope.copyrightYear = ( new Date() ).getFullYear();
37 |
38 |
39 | // --- Bind To Scope Events. ------------------------ //
40 |
41 |
42 | // I handle changes to the request context.
43 | $scope.$on(
44 | "requestContextChanged",
45 | function() {
46 |
47 | // Make sure this change is relevant to this controller.
48 | if ( ! renderContext.isChangeRelevant() ) {
49 |
50 | return;
51 |
52 | }
53 |
54 | // Update the view that is being rendered.
55 | $scope.subview = renderContext.getNextSection();
56 |
57 | }
58 | );
59 |
60 |
61 | // --- Initialize. ---------------------------------- //
62 |
63 |
64 | // ...
65 |
66 |
67 | }
68 | );
69 |
70 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/controllers/layouts/standard-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "layouts.StandardController",
7 | function( $scope, requestContext, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // ...
14 |
15 |
16 | // --- Define Scope Methods. ------------------------ //
17 |
18 |
19 | // ...
20 |
21 |
22 | // --- Define Controller Variables. ----------------- //
23 |
24 |
25 | // Get the render context local to this controller (and relevant params).
26 | var renderContext = requestContext.getRenderContext( "standard" );
27 |
28 |
29 | // --- Define Scope Variables. ---------------------- //
30 |
31 |
32 | // The subview indicates which view is going to be rendered on the page.
33 | $scope.subview = renderContext.getNextSection();
34 |
35 | // Get the current year for copyright output.
36 | $scope.copyrightYear = ( new Date() ).getFullYear();
37 |
38 |
39 | // --- Bind To Scope Events. ------------------------ //
40 |
41 |
42 | // I handle changes to the request context.
43 | $scope.$on(
44 | "requestContextChanged",
45 | function() {
46 |
47 | // Make sure this change is relevant to this controller.
48 | if ( ! renderContext.isChangeRelevant() ) {
49 |
50 | return;
51 |
52 | }
53 |
54 | // Update the view that is being rendered.
55 | $scope.subview = renderContext.getNextSection();
56 |
57 | }
58 | );
59 |
60 |
61 | // --- Initialize. ---------------------------------- //
62 |
63 |
64 | // ...
65 |
66 |
67 | }
68 | );
69 |
70 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/controllers/pets/categories-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "pets.CategoriesController",
7 | function( $scope, requestContext, categoryService, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // I apply the remote data to the local view model.
14 | function applyRemoteData( categories ) {
15 |
16 | $scope.categories = _.sortOnProperty( categories, "name", "asc" );
17 |
18 | }
19 |
20 |
21 | // I load the "remote" data from the server.
22 | function loadRemoteData() {
23 |
24 | $scope.isLoading = true;
25 |
26 | var promise = categoryService.getCategories();
27 |
28 | promise.then(
29 | function( response ) {
30 |
31 | $scope.isLoading = false;
32 |
33 | applyRemoteData( response );
34 |
35 | },
36 | function( response ) {
37 |
38 | $scope.openModalWindow( "error", "For some reason we couldn't load the categories. Try refreshing your browser." );
39 |
40 | }
41 | );
42 |
43 | }
44 |
45 |
46 | // --- Define Scope Methods. ------------------------ //
47 |
48 |
49 | // ...
50 |
51 |
52 | // --- Define Controller Variables. ----------------- //
53 |
54 |
55 | // Get the render context local to this controller (and relevant params).
56 | var renderContext = requestContext.getRenderContext( "standard.pets.categories" );
57 |
58 |
59 | // --- Define Scope Variables. ---------------------- //
60 |
61 |
62 | // I flag that data is being loaded.
63 | $scope.isLoading = true;
64 |
65 | // I hold the categories to render.
66 | $scope.categories = [];
67 |
68 | // The subview indicates which view is going to be rendered on the page.
69 | $scope.subview = renderContext.getNextSection();
70 |
71 |
72 | // --- Bind To Scope Events. ------------------------ //
73 |
74 |
75 | // I handle changes to the request context.
76 | $scope.$on(
77 | "requestContextChanged",
78 | function() {
79 |
80 | // Make sure this change is relevant to this controller.
81 | if ( ! renderContext.isChangeRelevant() ) {
82 |
83 | return;
84 |
85 | }
86 |
87 | // Update the view that is being rendered.
88 | $scope.subview = renderContext.getNextSection();
89 |
90 | }
91 | );
92 |
93 |
94 | // --- Initialize. ---------------------------------- //
95 |
96 |
97 | // Set the window title.
98 | $scope.setWindowTitle( "Pets" );
99 |
100 | // Load the "remote" data.
101 | loadRemoteData();
102 |
103 |
104 | }
105 | );
106 |
107 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/controllers/pets/detail/detail-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "pets.detail.DetailController",
7 | function( $scope, $location, $q, requestContext, categoryService, petService, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // I apply the remote data to the local view model.
14 | function applyRemoteData( category, pet ) {
15 |
16 | $scope.category = category;
17 | $scope.pet = pet;
18 |
19 | $scope.setWindowTitle( pet.name + " - " + pet.breed );
20 |
21 | }
22 |
23 |
24 | // I load the "remote" data from the server.
25 | function loadRemoteData() {
26 |
27 | $scope.isLoading = true;
28 |
29 | var promise = $q.all(
30 | [
31 | categoryService.getCategoryByID( $scope.categoryID ),
32 | petService.getPetByID( $scope.petID )
33 | ]
34 | );
35 |
36 | promise.then(
37 | function( response ) {
38 |
39 | $scope.isLoading = false;
40 |
41 | applyRemoteData( response[ 0 ], response[ 1 ] );
42 |
43 | },
44 | function( response ) {
45 |
46 | // The pet couldn't be loaded for some reason - possibly someone hacking with the URL.
47 | $location.path( "/pets/" + $scope.categoryID );
48 |
49 | }
50 | );
51 |
52 | }
53 |
54 |
55 | // --- Define Scope Methods. ------------------------ //
56 |
57 |
58 | // ...
59 |
60 |
61 | // --- Define Controller Variables. ----------------- //
62 |
63 |
64 | // Get the render context local to this controller (and relevant params).
65 | var renderContext = requestContext.getRenderContext( "standard.pets.detail", "petID" );
66 |
67 |
68 | // --- Define Scope Variables. ---------------------- //
69 |
70 |
71 | // Get the relevant route IDs.
72 | $scope.categoryID = requestContext.getParam( "categoryID" );
73 | $scope.petID = requestContext.getParamAsInt( "petID" );
74 |
75 | // I flag that data is being loaded.
76 | $scope.isLoading = true;
77 |
78 | // I hold the category and pet to render.
79 | $scope.category = null;
80 | $scope.pet = null;
81 |
82 | // The subview indicates which view is going to be rendered on the page.
83 | $scope.subview = renderContext.getNextSection();
84 |
85 |
86 | // --- Bind To Scope Events. ------------------------ //
87 |
88 |
89 | // I handle changes to the request context.
90 | $scope.$on(
91 | "requestContextChanged",
92 | function() {
93 |
94 | // Make sure this change is relevant to this controller.
95 | if ( ! renderContext.isChangeRelevant() ) {
96 |
97 | return;
98 |
99 | }
100 |
101 | // Get the relevant route IDs.
102 | $scope.categoryID = requestContext.getParam( "categoryID" );
103 | $scope.petID = requestContext.getParamAsInt( "petID" );
104 |
105 | // Update the view that is being rendered.
106 | $scope.subview = renderContext.getNextSection();
107 |
108 | // If the relevant ID has changed, refresh the view.
109 | if ( requestContext.haveParamsChanged( [ "categoryID", "petID" ] ) ) {
110 |
111 | loadRemoteData();
112 |
113 | }
114 |
115 | }
116 | );
117 |
118 |
119 | // --- Initialize. ---------------------------------- //
120 |
121 |
122 | // Set the window title.
123 | $scope.setWindowTitle( "Loading Pet" );
124 |
125 | // Load the "remote" data.
126 | loadRemoteData();
127 |
128 |
129 | }
130 | );
131 |
132 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/controllers/pets/detail/random-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "pets.detail.RandomController",
7 | function( $scope, requestContext, petService, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // I apply the remote data to the local view model.
14 | function applyRemoteData( pet ) {
15 |
16 | $scope.pet = pet;
17 |
18 | }
19 |
20 |
21 | // I load the "remote" data from the server.
22 | function loadRemoteData() {
23 |
24 | $scope.isLoading = true;
25 |
26 | var promise = petService.getRandomPetExcluding( $scope.categoryID, $scope.petID );
27 |
28 | promise.then(
29 | function( response ) {
30 |
31 | $scope.isLoading = false;
32 |
33 | applyRemoteData( response );
34 |
35 | },
36 | function( response ) {
37 |
38 | $scope.openModalWindow( "error", "For some reason we couldn't load a random pet. Try refreshing your browser." );
39 |
40 | }
41 | );
42 |
43 | }
44 |
45 |
46 | // --- Define Scope Methods. ------------------------ //
47 |
48 |
49 | // ...
50 |
51 |
52 | // --- Define Controller Variables. ----------------- //
53 |
54 |
55 | // Get the render context local to this controller (and relevant params).
56 | var renderContext = requestContext.getRenderContext( "standard.pets.detail", [ "categoryID", "petID" ] );
57 |
58 |
59 | // --- Define Scope Variables. ---------------------- //
60 |
61 |
62 | // Get the relevant route IDs.
63 | $scope.categoryID = requestContext.getParam( "categoryID" );
64 | $scope.petID = requestContext.getParamAsInt( "petID" );
65 |
66 | // I flag that data is being loaded.
67 | $scope.isLoading = true;
68 |
69 | // I hold the pet to render.
70 | $scope.pet = null;
71 |
72 |
73 | // --- Bind To Scope Events. ------------------------ //
74 |
75 |
76 | // I handle changes to the request context.
77 | $scope.$on(
78 | "requestContextChanged",
79 | function() {
80 |
81 | // Make sure this change is relevant to this controller.
82 | if ( ! renderContext.isChangeRelevant() ) {
83 |
84 | return;
85 |
86 | }
87 |
88 | // Get the relevant route IDs.
89 | $scope.categoryID = requestContext.getParam( "categoryID" );
90 | $scope.petID = requestContext.getParamAsInt( "petID" );
91 |
92 | // If the relevant ID has changed, refresh the view.
93 | if ( requestContext.haveParamsChanged( [ "categoryID", "petID" ] ) ) {
94 |
95 | loadRemoteData();
96 |
97 | }
98 |
99 | }
100 | );
101 |
102 |
103 | // --- Initialize. ---------------------------------- //
104 |
105 |
106 | // Load the "remote" data.
107 | loadRemoteData();
108 |
109 |
110 | }
111 | );
112 |
113 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/controllers/pets/list-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "pets.ListController",
7 | function( $scope, $location, $q, requestContext, categoryService, petService, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // I apply the remote data to the local view model.
14 | function applyRemoteData( category, pets ) {
15 |
16 | $scope.category = category;
17 | $scope.pets = _.sortOnProperty( pets, "name", "asc" );
18 |
19 | $scope.setWindowTitle( category.name );
20 |
21 | }
22 |
23 |
24 | // I load the remote data from the server.
25 | function loadRemoteData() {
26 |
27 | $scope.isLoading = true;
28 |
29 | var promise = $q.all(
30 | [
31 | categoryService.getCategoryByID( $scope.categoryID ),
32 | petService.getPetsByCategoryID( $scope.categoryID )
33 | ]
34 | );
35 |
36 | promise.then(
37 | function( response ) {
38 |
39 | $scope.isLoading = false;
40 |
41 | applyRemoteData( response[ 0 ], response[ 1 ] );
42 |
43 | },
44 | function( response ) {
45 |
46 | // The category couldn't be loaded for some reason - possibly someone hacking with the URL.
47 | $location.path( "/pets" );
48 |
49 | }
50 | );
51 |
52 | }
53 |
54 |
55 | // --- Define Scope Methods. ------------------------ //
56 |
57 |
58 | // ...
59 |
60 |
61 | // --- Define Controller Variables. ----------------- //
62 |
63 |
64 | // Get the render context local to this controller (and relevant params).
65 | var renderContext = requestContext.getRenderContext( "standard.pets.list", "categoryID" );
66 |
67 |
68 | // --- Define Scope Variables. ---------------------- //
69 |
70 |
71 | // Get the ID of the category.
72 | $scope.categoryID = requestContext.getParam( "categoryID" );
73 |
74 | // I flag that data is being loaded.
75 | $scope.isLoading = true;
76 |
77 | // I am the category and the list of pets that are being viewed.
78 | $scope.category = null;
79 | $scope.pets = null;
80 |
81 | // The subview indicates which view is going to be rendered on the page.
82 | $scope.subview = renderContext.getNextSection();
83 |
84 |
85 | // --- Bind To Scope Events. ------------------------ //
86 |
87 |
88 | // I handle changes to the request context.
89 | $scope.$on(
90 | "requestContextChanged",
91 | function() {
92 |
93 | // Make sure this change is relevant to this controller.
94 | if ( ! renderContext.isChangeRelevant() ) {
95 |
96 | return;
97 |
98 | }
99 |
100 | // Get the relevant route IDs.
101 | $scope.categoryID = requestContext.getParam( "categoryID" );
102 |
103 | // Update the view that is being rendered.
104 | $scope.subview = renderContext.getNextSection();
105 |
106 | // If the relevant IDs have changed, refresh the view.
107 | if ( requestContext.hasParamChanged( "categoryID" ) ) {
108 |
109 | loadRemoteData();
110 |
111 | }
112 |
113 | }
114 | );
115 |
116 |
117 | // --- Initialize. ---------------------------------- //
118 |
119 |
120 | // Set the interim title.
121 | $scope.setWindowTitle( "Loading Category" );
122 |
123 | // Load the "remote" data.
124 | loadRemoteData();
125 |
126 |
127 | }
128 | );
129 |
130 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/controllers/pets/pets-controller.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ){
2 |
3 | "use strict";
4 |
5 | app.controller(
6 | "pets.PetsController",
7 | function( $scope, requestContext, _ ) {
8 |
9 |
10 | // --- Define Controller Methods. ------------------- //
11 |
12 |
13 | // ...
14 |
15 |
16 | // --- Define Scope Methods. ------------------------ //
17 |
18 |
19 | // ...
20 |
21 |
22 | // --- Define Controller Variables. ----------------- //
23 |
24 |
25 | // Get the render context local to this controller (and relevant params).
26 | var renderContext = requestContext.getRenderContext( "standard.pets" );
27 |
28 |
29 | // --- Define Scope Variables. ---------------------- //
30 |
31 |
32 | // The subview indicates which view is going to be rendered on the page.
33 | $scope.subview = renderContext.getNextSection();
34 |
35 |
36 | // --- Bind To Scope Events. ------------------------ //
37 |
38 |
39 | // I handle changes to the request context.
40 | $scope.$on(
41 | "requestContextChanged",
42 | function() {
43 |
44 | // Make sure this change is relevant to this controller.
45 | if ( ! renderContext.isChangeRelevant() ) {
46 |
47 | return;
48 |
49 | }
50 |
51 | // Update the view that is being rendered.
52 | $scope.subview = renderContext.getNextSection();
53 |
54 | }
55 | );
56 |
57 |
58 | // --- Initialize. ---------------------------------- //
59 |
60 |
61 | $scope.setWindowTitle( "Pets" );
62 |
63 |
64 | }
65 | );
66 |
67 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/css/main.css:
--------------------------------------------------------------------------------
1 | .clearfix {
2 | *zoom: 1;
3 | }
4 | .clearfix:before,
5 | .clearfix:after {
6 | display: table;
7 | content: "";
8 | }
9 | .clearfix:after {
10 | clear: both;
11 | }
12 | body {
13 | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
14 | font-size: 16px ;
15 | line-height: 1.6em ;
16 | }
17 | h1,
18 | h2,
19 | h3,
20 | h4 {
21 | font-family: Georgia, serif ;
22 | }
23 | h1 {
24 | font-size: 28px ;
25 | }
26 | h2 {
27 | font-size: 24px ;
28 | }
29 | h3 {
30 | font-size: 20px ;
31 | }
32 | h4 {
33 | font-size: 16px ;
34 | }
35 | a {
36 | color: #333333 ;
37 | }
38 | div.l-loading {
39 | background-color: #262626 ;
40 | bottom: 0px ;
41 | left: 0px ;
42 | position: fixed ;
43 | right: 0px ;
44 | top: 0px ;
45 | }
46 | div.l-loading p {
47 | color: #F0F0F0 ;
48 | font-size: 12px ;
49 | font-style: italic ;
50 | left: 0px ;
51 | position: absolute ;
52 | text-align: center ;
53 | top: 48% ;
54 | width: 100% ;
55 | }
56 | div.l-splash {
57 | margin: 30px auto 50px auto ;
58 | width: 600px ;
59 | }
60 | div.l-splash div.l-container {
61 | -webkit-border-radius: 7px 7px 7px 7px;
62 | -moz-border-radius: 7px 7px 7px 7px;
63 | border-radius: 7px 7px 7px 7px;
64 | -webkit-box-shadow: 0px 0px 5px 1px #666666;
65 | -moz-box-shadow: 0px 0px 5px 1px #666666;
66 | box-shadow: 0px 0px 5px 1px #666666;
67 | padding: 0px 0px 1px 0px ;
68 | }
69 | div.l-splash div.l-header {
70 | background: url("../img/header-splash.jpg") 0px 0px no-repeat;
71 | -webkit-border-radius: 6px 6px 0px 0px;
72 | -moz-border-radius: 6px 6px 0px 0px;
73 | border-radius: 6px 6px 0px 0px;
74 | height: 305px ;
75 | position: relative ;
76 | }
77 | div.l-splash div.l-header span.title {
78 | color: #FFFFFF ;
79 | font-family: Georgia, serif ;
80 | font-size: 50px ;
81 | font-weight: bold ;
82 | line-height: 65px ;
83 | position: absolute ;
84 | right: 0px ;
85 | text-align: center ;
86 | text-shadow: 1px 1px #000000 ;
87 | top: 53px ;
88 | width: 275px ;
89 | }
90 | div.l-splash div.l-body {
91 | margin: 20px 20px 20px 20px ;
92 | }
93 | div.l-splash div.l-footer {
94 | color: #999999 ;
95 | font-size: 11px ;
96 | line-height: 16px ;
97 | margin: 20px 20px 20px 20px ;
98 | }
99 | div.l-splash div.l-footer div.description {
100 | margin-bottom: 5px ;
101 | }
102 | div.l-splash div.l-footer div.author a {
103 | color: #999999 ;
104 | text-decoration: none ;
105 | }
106 | div.l-splash div.l-footer div.author a:hover {
107 | color: #333333 ;
108 | text-decoration: underline ;
109 | }
110 | div.l-standard {
111 | margin: 30px auto 50px auto ;
112 | width: 600px ;
113 | }
114 | div.l-standard div.l-container {
115 | -webkit-border-radius: 7px 7px 7px 7px;
116 | -moz-border-radius: 7px 7px 7px 7px;
117 | border-radius: 7px 7px 7px 7px;
118 | -webkit-box-shadow: 0px 0px 5px 1px #666666;
119 | -moz-box-shadow: 0px 0px 5px 1px #666666;
120 | box-shadow: 0px 0px 5px 1px #666666;
121 | padding: 0px 0px 1px 0px ;
122 | }
123 | div.l-standard div.l-header {
124 | background: url("../img/header-standard.jpg") 0px -30px no-repeat;
125 | -webkit-border-radius: 6px 6px 0px 0px;
126 | -moz-border-radius: 6px 6px 0px 0px;
127 | border-radius: 6px 6px 0px 0px;
128 | height: 157px ;
129 | position: relative ;
130 | }
131 | div.l-standard div.l-header span.title {
132 | color: #262626 ;
133 | font-family: Georgia, serif ;
134 | font-size: 46px ;
135 | font-weight: bold ;
136 | left: 20px ;
137 | line-height: 52px ;
138 | position: absolute ;
139 | text-shadow: 1px 1px rgba(255, 255, 255, 0.8);
140 | top: 28px ;
141 | }
142 | div.l-standard div.l-header ul {
143 | background-color: #F0F0F0 ;
144 | border: 1px solid #333333 ;
145 | border-width: 1px 0px 1px 0px ;
146 | bottom: 0px ;
147 | font-size: 16px ;
148 | height: 35px ;
149 | left: 0px ;
150 | list-style-type: none ;
151 | margin: 0px 0px 0px 0px ;
152 | padding: 0px 0px 0px 0px ;
153 | position: absolute ;
154 | right: 0px ;
155 | }
156 | div.l-standard div.l-header ul li {
157 | border-right: 1px dotted #CCCCCC ;
158 | float: left ;
159 | margin: 0px 0px 0px 0px ;
160 | padding: 0px 0px 0px 0px ;
161 | }
162 | div.l-standard div.l-header ul li a {
163 | color: #666666 ;
164 | display: block ;
165 | height: 35px ;
166 | line-height: 35px ;
167 | text-align: center ;
168 | text-decoration: none ;
169 | width: 100px ;
170 | }
171 | div.l-standard div.l-header ul li a:hover {
172 | text-decoration: underline ;
173 | }
174 | div.l-standard div.l-header ul li.on a {
175 | background-color: #262626 ;
176 | color: #FFFFFF ;
177 | font-weight: bold ;
178 | }
179 | div.l-standard div.l-header ul li.on a:hover {
180 | text-decoration: none ;
181 | }
182 | div.l-standard div.l-body {
183 | margin: 25px 20px 25px 20px ;
184 | }
185 | div.l-standard div.l-footer {
186 | color: #999999 ;
187 | font-size: 11px ;
188 | line-height: 16px ;
189 | margin: 20px 20px 20px 20px ;
190 | }
191 | div.l-standard div.l-footer div.description {
192 | margin-bottom: 5px ;
193 | }
194 | div.l-standard div.l-footer div.author a {
195 | color: #999999 ;
196 | text-decoration: none ;
197 | }
198 | div.l-standard div.l-footer div.author a:hover {
199 | color: #333333 ;
200 | text-decoration: underline ;
201 | }
202 | ul.m-category-list {
203 | list-style-type: none ;
204 | margin: 20px 0px 20px 0px ;
205 | padding: 0px 0px 0px 0px ;
206 | }
207 | ul.m-category-list li {
208 | margin: 0px 0px 13px 0px ;
209 | padding: 0px 0px 0px 0px ;
210 | }
211 | ul.m-category-list li a {
212 | background-color: #F0F0F0 ;
213 | border: 1px solid #CCCCCC ;
214 | -webkit-border-radius: 4px 4px 4px 4px;
215 | -moz-border-radius: 4px 4px 4px 4px;
216 | border-radius: 4px 4px 4px 4px;
217 | display: block ;
218 | height: 70px ;
219 | position: relative ;
220 | text-decoration: none ;
221 | }
222 | ul.m-category-list li a::after {
223 | background-color: #FFFFFF ;
224 | -webkit-border-radius: 40px 40px 40px 40px;
225 | -moz-border-radius: 40px 40px 40px 40px;
226 | border-radius: 40px 40px 40px 40px;
227 | color: #333333 ;
228 | content: "\00BB";
229 | display: none ;
230 | font-family: Tahoma, Geneva, sans-serif;
231 | font-size: 30px ;
232 | height: 40px ;
233 | line-height: 35px ;
234 | margin-top: -20px;
235 | position: absolute ;
236 | right: 15px ;
237 | text-align: center ;
238 | text-index: 3px ;
239 | top: 50% ;
240 | width: 40px ;
241 | }
242 | ul.m-category-list li a span.name {
243 | display: block ;
244 | font-size: 18px ;
245 | font-weight: bold ;
246 | line-height: 23px ;
247 | padding: 12px 0px 3px 15px ;
248 | text-decoration: underline ;
249 | }
250 | ul.m-category-list li a span.description {
251 | display: block ;
252 | padding: 0px 0px 0px 15px ;
253 | }
254 | ul.m-category-list li a:hover::after {
255 | display: block ;
256 | }
257 | ul.m-home-nav {
258 | height: 102px ;
259 | list-style-type: none ;
260 | margin: 30px 0px 30px 0px ;
261 | padding: 0px 0px 0px 0px ;
262 | position: relative ;
263 | }
264 | ul.m-home-nav li {
265 | background-color: #F0F0F0 ;
266 | border: 1px solid #CCCCCC ;
267 | -webkit-border-radius: 4px 4px 4px 4px;
268 | -moz-border-radius: 4px 4px 4px 4px;
269 | border-radius: 4px 4px 4px 4px;
270 | float: left ;
271 | height: 100px ;
272 | position: absolute ;
273 | text-align: center ;
274 | top: 0px ;
275 | width: 140px ;
276 | }
277 | ul.m-home-nav li a {
278 | bottom: 0px ;
279 | color: #333333 ;
280 | left: 0px ;
281 | position: absolute ;
282 | right: 0px ;
283 | text-decoration: none ;
284 | top: 0px ;
285 | }
286 | ul.m-home-nav li span.declaration {
287 | display: block ;
288 | font-size: 12px ;
289 | line-height: 17px ;
290 | padding: 18px 0px 5px 0px ;
291 | text-transform: uppercase ;
292 | }
293 | ul.m-home-nav li span.category {
294 | display: block ;
295 | font-size: 32px ;
296 | line-height: 38px ;
297 | text-decoration: underline ;
298 | }
299 | ul.m-home-nav li.cats {
300 | left: 100px ;
301 | }
302 | ul.m-home-nav li.dogs {
303 | right: 100px ;
304 | }
305 | div.m-pet-header {
306 | position: relative ;
307 | }
308 | div.m-pet-header span.back {
309 | color: #999999 ;
310 | font-size: 16px ;
311 | line-height: 27px ;
312 | position: absolute ;
313 | right: 0px ;
314 | top: 0px ;
315 | }
316 | div.m-pet-header span.back a {
317 | border-bottom: 1px dotted #999999 ;
318 | color: #999999 ;
319 | text-decoration: none ;
320 | }
321 | div.m-pet-header span.back a:hover {
322 | border-color: #333333 ;
323 | color: #333333 ;
324 | }
325 | div.m-pet-list-header {
326 | position: relative ;
327 | }
328 | div.m-pet-list-header span.back {
329 | color: #999999 ;
330 | font-size: 16px ;
331 | line-height: 27px ;
332 | position: absolute ;
333 | right: 0px ;
334 | top: 0px ;
335 | }
336 | div.m-pet-list-header span.back a {
337 | border-bottom: 1px dotted #999999 ;
338 | color: #999999 ;
339 | text-decoration: none ;
340 | }
341 | div.m-pet-list-header span.back a:hover {
342 | border-color: #333333 ;
343 | color: #333333 ;
344 | }
345 | ul.m-pet-properties {
346 | *zoom: 1;
347 | margin-bottom: 30px ;
348 | }
349 | ul.m-pet-properties:before,
350 | ul.m-pet-properties:after {
351 | display: table;
352 | content: "";
353 | }
354 | ul.m-pet-properties:after {
355 | clear: both;
356 | }
357 | ul.m-pet-properties li {
358 | float: left ;
359 | width: 50% ;
360 | }
361 | div.m-random-pet {
362 | border-top: 1px dashed #CCCCCC ;
363 | color: #999999 ;
364 | font-size: 12px ;
365 | font-style: italic ;
366 | line-height: 17px ;
367 | padding: 15px 0px 0px 0px ;
368 | }
369 | div.m-random-pet a {
370 | color: #999999 ;
371 | }
372 | div.m-random-pet a:hover {
373 | color: #333333 ;
374 | }
375 | div.m-tabs {
376 | border-bottom: 1px solid #999999 ;
377 | *zoom: 1;
378 | margin-bottom: 15px ;
379 | padding-left: 4px ;
380 | }
381 | div.m-tabs:before,
382 | div.m-tabs:after {
383 | display: table;
384 | content: "";
385 | }
386 | div.m-tabs:after {
387 | clear: both;
388 | }
389 | div.m-tabs a {
390 | background-color: #FFFFFF ;
391 | border: 1px solid #CCCCCC ;
392 | border-bottom-width: 0px ;
393 | -webkit-border-radius: 3px 3px 0px 0px;
394 | -moz-border-radius: 3px 3px 0px 0px;
395 | border-radius: 3px 3px 0px 0px;
396 | color: #666666 ;
397 | float: left ;
398 | margin-right: 7px ;
399 | padding: 4px 15px 4px 15px ;
400 | position: relative ;
401 | text-decoration: none ;
402 | }
403 | div.m-tabs a:hover {
404 | text-decoration: underline ;
405 | }
406 | div.m-tabs a.on {
407 | border-color: #999999 ;
408 | color: #333333 ;
409 | font-weight: bold ;
410 | padding-bottom: 5px ;
411 | margin-top: -1px;
412 | top: 1px ;
413 | }
414 | div.m-tabs a.on:hover {
415 | text-decoration: none ;
416 | }
417 |
--------------------------------------------------------------------------------
/assets/app/img/header-splash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bennadel/AngularJS-Routing/50056c74f908b419cb618ea48fa09fae894ed9c3/assets/app/img/header-splash.jpg
--------------------------------------------------------------------------------
/assets/app/img/header-standard.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bennadel/AngularJS-Routing/50056c74f908b419cb618ea48fa09fae894ed9c3/assets/app/img/header-standard.jpg
--------------------------------------------------------------------------------
/assets/app/less/category-list.less:
--------------------------------------------------------------------------------
1 |
2 | ul.m-category-list {
3 | list-style-type: none ;
4 | margin: 20px 0px 20px 0px ;
5 | padding: 0px 0px 0px 0px ;
6 |
7 | li {
8 | margin: 0px 0px 13px 0px ;
9 | padding: 0px 0px 0px 0px ;
10 |
11 | a {
12 | background-color: #F0F0F0 ;
13 | border: 1px solid #CCCCCC ;
14 | .border-radius( 4px 4px 4px 4px ) ;
15 | display: block ;
16 | height: 70px ;
17 | position: relative ;
18 | text-decoration: none ;
19 |
20 | &::after {
21 | background-color: #FFFFFF ;
22 | .border-radius( 40px 40px 40px 40px ) ;
23 | color: #333333 ;
24 | content: "\00BB" ;
25 | display: none ;
26 | font-family: Tahoma, Geneva, sans-serif ;
27 | font-size: 30px ;
28 | height: 40px ;
29 | line-height: 35px ;
30 | margin-top: -20px ;
31 | position: absolute ;
32 | right: 15px ;
33 | text-align: center ;
34 | text-index: 3px ;
35 | top: 50% ;
36 | width: 40px ;
37 | }
38 |
39 | span.name {
40 | display: block ;
41 | font-size: 18px ;
42 | font-weight: bold ;
43 | line-height: 23px ;
44 | padding: 12px 0px 3px 15px ;
45 | text-decoration: underline ;
46 | }
47 |
48 | span.description {
49 | display: block ;
50 | padding: 0px 0px 0px 15px ;
51 | }
52 |
53 | // a -- variations.
54 |
55 | &:hover {
56 | &::after {
57 | display: block ;
58 | }
59 | }
60 | }
61 | }
62 | }
--------------------------------------------------------------------------------
/assets/app/less/core.less:
--------------------------------------------------------------------------------
1 |
2 | body {
3 | font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif ;
4 | font-size: 16px ;
5 | line-height: 1.6em ;
6 | }
7 |
8 | h1,
9 | h2,
10 | h3,
11 | h4 {
12 | font-family: Georgia, serif ;
13 | }
14 |
15 | h1 {
16 | font-size: 28px ;
17 | }
18 |
19 | h2 {
20 | font-size: 24px ;
21 | }
22 |
23 | h3 {
24 | font-size: 20px ;
25 | }
26 |
27 | h4 {
28 | font-size: 16px ;
29 | }
30 |
31 | a {
32 | color: #333333 ;
33 | }
--------------------------------------------------------------------------------
/assets/app/less/home-nav.less:
--------------------------------------------------------------------------------
1 |
2 | ul.m-home-nav {
3 | height: 102px ;
4 | list-style-type: none ;
5 | margin: 30px 0px 30px 0px ;
6 | padding: 0px 0px 0px 0px ;
7 | position: relative ;
8 |
9 | li {
10 | background-color: #F0F0F0 ;
11 | border: 1px solid #CCCCCC ;
12 | .border-radius( 4px 4px 4px 4px ) ;
13 | float: left ;
14 | height: 100px ;
15 | position: absolute ;
16 | text-align: center ;
17 | top: 0px ;
18 | width: 140px ;
19 |
20 | a {
21 | bottom: 0px ;
22 | color: #333333 ;
23 | left: 0px ;
24 | position: absolute ;
25 | right: 0px ;
26 | text-decoration: none ;
27 | top: 0px ;
28 | }
29 |
30 | span.declaration {
31 | display: block ;
32 | font-size: 12px ;
33 | line-height: 17px ;
34 | padding: 18px 0px 5px 0px ;
35 | text-transform: uppercase ;
36 | }
37 |
38 | span.category {
39 | display: block ;
40 | font-size: 32px ;
41 | line-height: 38px ;
42 | text-decoration: underline ;
43 | }
44 |
45 | // li -- variations
46 |
47 | &.cats {
48 | left: 100px ;
49 | }
50 |
51 | &.dogs {
52 | right: 100px ;
53 | }
54 | }
55 | }
--------------------------------------------------------------------------------
/assets/app/less/loading.less:
--------------------------------------------------------------------------------
1 |
2 | div.l-loading {
3 | background-color: #262626 ;
4 | bottom: 0px ;
5 | left: 0px ;
6 | position: fixed ;
7 | right: 0px ;
8 | top: 0px ;
9 |
10 | p {
11 | color: #F0F0F0 ;
12 | font-size: 12px ;
13 | font-style: italic ;
14 | left: 0px ;
15 | position: absolute ;
16 | text-align: center ;
17 | top: 48% ;
18 | width: 100% ;
19 | }
20 | }
--------------------------------------------------------------------------------
/assets/app/less/main.less:
--------------------------------------------------------------------------------
1 |
2 | @import "mixins.less" ;
3 |
4 | // Reset.
5 | @import "core.less" ;
6 |
7 | // Layouts.
8 | @import "loading.less" ;
9 | @import "splash.less" ;
10 | @import "standard.less" ;
11 |
12 | // Modules.
13 | @import "category-list.less" ;
14 | @import "home-nav.less" ;
15 | @import "pet-header.less" ;
16 | @import "pet-list-header.less" ;
17 | @import "pet-properties.less" ;
18 | @import "random-pet.less" ;
19 | @import "tabs.less" ;
20 |
--------------------------------------------------------------------------------
/assets/app/less/mixins.less:
--------------------------------------------------------------------------------
1 |
2 | // --
3 | // Borrowed from Twitter Bootstrap.
4 | // --
5 |
6 | // Clearfix
7 | .clearfix {
8 | *zoom: 1;
9 | &:before,
10 | &:after {
11 | display: table;
12 | content: "";
13 | }
14 | &:after {
15 | clear: both;
16 | }
17 | }
18 |
19 | // Border Radius
20 | .border-radius(@radius) {
21 | -webkit-border-radius: @radius;
22 | -moz-border-radius: @radius;
23 | border-radius: @radius;
24 | }
25 |
26 | // Drop shadows
27 | .box-shadow(@shadow) {
28 | -webkit-box-shadow: @shadow;
29 | -moz-box-shadow: @shadow;
30 | box-shadow: @shadow;
31 | }
32 |
33 | // Transitions
34 | .transition(@transition) {
35 | -webkit-transition: @transition;
36 | -moz-transition: @transition;
37 | -ms-transition: @transition;
38 | -o-transition: @transition;
39 | transition: @transition;
40 | }
41 |
42 | // User select
43 | // For selecting text on the page
44 | .user-select(@select) {
45 | -webkit-user-select: @select;
46 | -moz-user-select: @select;
47 | -ms-user-select: @select;
48 | -o-user-select: @select;
49 | user-select: @select;
50 | }
51 |
52 | // Opacity
53 | .opacity(@opacity) {
54 | opacity: @opacity / 100;
55 | filter: ~"alpha(opacity=@{opacity})";
56 | }
57 |
58 |
--------------------------------------------------------------------------------
/assets/app/less/pet-header.less:
--------------------------------------------------------------------------------
1 |
2 | div.m-pet-header {
3 | position: relative ;
4 |
5 | h1 {}
6 |
7 | span.back {
8 | color: #999999 ;
9 | font-size: 16px ;
10 | line-height: 27px ;
11 | position: absolute ;
12 | right: 0px ;
13 | top: 0px ;
14 |
15 | a {
16 | border-bottom: 1px dotted #999999 ;
17 | color: #999999 ;
18 | text-decoration: none ;
19 |
20 | // a -- variations.
21 |
22 | &:hover {
23 | border-color: #333333 ;
24 | color: #333333 ;
25 | }
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/assets/app/less/pet-list-header.less:
--------------------------------------------------------------------------------
1 |
2 | div.m-pet-list-header {
3 | position: relative ;
4 |
5 | h1 {}
6 |
7 | span.back {
8 | color: #999999 ;
9 | font-size: 16px ;
10 | line-height: 27px ;
11 | position: absolute ;
12 | right: 0px ;
13 | top: 0px ;
14 |
15 | a {
16 | border-bottom: 1px dotted #999999 ;
17 | color: #999999 ;
18 | text-decoration: none ;
19 |
20 | // a -- variations.
21 |
22 | &:hover {
23 | border-color: #333333 ;
24 | color: #333333 ;
25 | }
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/assets/app/less/pet-properties.less:
--------------------------------------------------------------------------------
1 |
2 | ul.m-pet-properties {
3 | .clearfix ;
4 | margin-bottom: 30px ;
5 |
6 | li {
7 | float: left ;
8 | width: 50% ;
9 | }
10 | }
--------------------------------------------------------------------------------
/assets/app/less/random-pet.less:
--------------------------------------------------------------------------------
1 |
2 | div.m-random-pet {
3 | border-top: 1px dashed #CCCCCC ;
4 | color: #999999 ;
5 | font-size: 12px ;
6 | font-style: italic ;
7 | line-height: 17px ;
8 | padding: 15px 0px 0px 0px ;
9 |
10 | a {
11 | color: #999999 ;
12 |
13 | // a -- variations.
14 |
15 | &:hover {
16 | color: #333333 ;
17 | }
18 | }
19 | }
--------------------------------------------------------------------------------
/assets/app/less/splash.less:
--------------------------------------------------------------------------------
1 |
2 | div.l-splash {
3 | margin: 30px auto 50px auto ;
4 | width: 600px ;
5 |
6 | div.l-container {
7 | .border-radius( 7px 7px 7px 7px );
8 | .box-shadow( 0px 0px 5px 1px #666666 ) ;
9 | padding: 0px 0px 1px 0px ;
10 | }
11 |
12 | div.l-header {
13 | background: url( "../img/header-splash.jpg" ) 0px 0px no-repeat ;
14 | .border-radius( 6px 6px 0px 0px ) ;
15 | height: 305px ;
16 | position: relative ;
17 |
18 | span.title {
19 | color: #FFFFFF ;
20 | font-family: Georgia, serif ;
21 | font-size: 50px ;
22 | font-weight: bold ;
23 | line-height: 65px ;
24 | position: absolute ;
25 | right: 0px ;
26 | text-align: center ;
27 | text-shadow: 1px 1px #000000 ;
28 | top: 53px ;
29 | width: 275px ;
30 | }
31 | }
32 |
33 | div.l-body {
34 | margin: 20px 20px 20px 20px ;
35 | }
36 |
37 | div.l-footer {
38 | color: #999999 ;
39 | font-size: 11px ;
40 | line-height: 16px ;
41 | margin: 20px 20px 20px 20px ;
42 |
43 | div.description {
44 | margin-bottom: 5px ;
45 | }
46 |
47 | div.author {
48 | a {
49 | color: #999999 ;
50 | text-decoration: none ;
51 |
52 | &:hover {
53 | color: #333333 ;
54 | text-decoration: underline ;
55 | }
56 | }
57 | }
58 | }
59 | }
--------------------------------------------------------------------------------
/assets/app/less/standard.less:
--------------------------------------------------------------------------------
1 |
2 | div.l-standard {
3 | margin: 30px auto 50px auto ;
4 | width: 600px ;
5 |
6 | div.l-container {
7 | .border-radius( 7px 7px 7px 7px );
8 | .box-shadow( 0px 0px 5px 1px #666666 ) ;
9 | padding: 0px 0px 1px 0px ;
10 | }
11 |
12 | div.l-header {
13 | background: url( "../img/header-standard.jpg" ) 0px -30px no-repeat ;
14 | .border-radius( 6px 6px 0px 0px ) ;
15 | height: 157px ;
16 | position: relative ;
17 |
18 | span.title {
19 | color: #262626 ;
20 | font-family: Georgia, serif ;
21 | font-size: 46px ;
22 | font-weight: bold ;
23 | left: 20px ;
24 | line-height: 52px ;
25 | position: absolute ;
26 | text-shadow: 1px 1px rgba( 255, 255, 255, .8 ) ;
27 | top: 28px ;
28 | }
29 |
30 | ul {
31 | background-color: #F0F0F0 ;
32 | border: 1px solid #333333 ;
33 | border-width: 1px 0px 1px 0px ;
34 | bottom: 0px ;
35 | font-size: 16px ;
36 | height: 35px ;
37 | left: 0px ;
38 | list-style-type: none ;
39 | margin: 0px 0px 0px 0px ;
40 | padding: 0px 0px 0px 0px ;
41 | position: absolute ;
42 | right: 0px ;
43 |
44 | li {
45 | border-right: 1px dotted #CCCCCC ;
46 | float: left ;
47 | margin: 0px 0px 0px 0px ;
48 | padding: 0px 0px 0px 0px ;
49 |
50 | a {
51 | color: #666666 ;
52 | display: block ;
53 | height: 35px ;
54 | line-height: 35px ;
55 | text-align: center ;
56 | text-decoration: none ;
57 | width: 100px ;
58 |
59 | // a -- variations.
60 |
61 | &:hover {
62 | text-decoration: underline ;
63 | }
64 | }
65 |
66 | // li -- variations.
67 |
68 | &.on {
69 | a {
70 | background-color: #262626 ;
71 | color: #FFFFFF ;
72 | font-weight: bold ;
73 |
74 | // a -- variations.
75 |
76 | &:hover {
77 | text-decoration: none ;
78 | }
79 | }
80 | }
81 | }
82 | }
83 | }
84 |
85 | div.l-body {
86 | margin: 25px 20px 25px 20px ;
87 | }
88 |
89 | div.l-footer {
90 | color: #999999 ;
91 | font-size: 11px ;
92 | line-height: 16px ;
93 | margin: 20px 20px 20px 20px ;
94 |
95 | div.description {
96 | margin-bottom: 5px ;
97 | }
98 |
99 | div.author {
100 | a {
101 | color: #999999 ;
102 | text-decoration: none ;
103 |
104 | &:hover {
105 | color: #333333 ;
106 | text-decoration: underline ;
107 | }
108 | }
109 | }
110 | }
111 | }
--------------------------------------------------------------------------------
/assets/app/less/tabs.less:
--------------------------------------------------------------------------------
1 |
2 | div.m-tabs {
3 | border-bottom: 1px solid #999999 ;
4 | .clearfix ;
5 | margin-bottom: 15px ;
6 | padding-left: 4px ;
7 |
8 | a {
9 | background-color: #FFFFFF ;
10 | border: 1px solid #CCCCCC ;
11 | border-bottom-width: 0px ;
12 | .border-radius( 3px 3px 0px 0px ) ;
13 | color: #666666 ;
14 | float: left ;
15 | margin-right: 7px ;
16 | padding: 4px 15px 4px 15px ;
17 | position: relative ;
18 | text-decoration: none ;
19 |
20 | // a -- variations.
21 |
22 | &:hover {
23 | text-decoration: underline ;
24 | }
25 |
26 | &.on {
27 | border-color: #999999 ;
28 | color: #333333 ;
29 | font-weight: bold ;
30 | padding-bottom: 5px ;
31 | margin-top: -1px ;
32 | top: 1px ;
33 |
34 | // a.on -- variations.
35 |
36 | &:hover {
37 | text-decoration: none ;
38 | }
39 | }
40 | }
41 | }
42 |
43 | div.m-tab-pane {}
--------------------------------------------------------------------------------
/assets/app/main.js:
--------------------------------------------------------------------------------
1 |
2 | // Create an application module for our demo.
3 | var Demo = angular.module( "Demo", [] );
4 |
5 | // Configure the routing. The $routeProvider will be automatically injected into
6 | // the configurator.
7 | Demo.config(
8 | function( $routeProvider ){
9 |
10 | // Typically, when defining routes, you will map the route to a Template to be
11 | // rendered; however, this only makes sense for simple web sites. When you are
12 | // building more complex applications, with nested navigation, you probably need
13 | // something more complex. In this case, we are mapping routes to render "Actions"
14 | // rather than a template.
15 | $routeProvider
16 | .when(
17 | "/home",
18 | {
19 | action: "splash.home"
20 | }
21 | )
22 | .when(
23 | "/pets",
24 | {
25 | action: "standard.pets.categories"
26 | }
27 | )
28 | .when(
29 | "/pets/:categoryID",
30 | {
31 | action: "standard.pets.list"
32 | }
33 | )
34 | .when(
35 | "/pets/:categoryID/:petID",
36 | {
37 | action: "standard.pets.detail.background"
38 | }
39 | )
40 | .when(
41 | "/pets/:categoryID/:petID/diet",
42 | {
43 | action: "standard.pets.detail.diet"
44 | }
45 | )
46 | .when(
47 | "/pets/:categoryID/:petID/medical-history",
48 | {
49 | action: "standard.pets.detail.medicalHistory"
50 | }
51 | )
52 | .when(
53 | "/contact",
54 | {
55 | action: "standard.contact"
56 | }
57 | )
58 | .otherwise(
59 | {
60 | redirectTo: "/home"
61 | }
62 | )
63 | ;
64 |
65 | }
66 | );
67 |
--------------------------------------------------------------------------------
/assets/app/services/category-service.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ) {
2 |
3 | "use strict";
4 |
5 | // I provide a repository for the categories.
6 | app.service(
7 | "categoryService",
8 | function( $q, _ ) {
9 |
10 |
11 | // I get all of the categories.
12 | function getCategories() {
13 |
14 | var deferred = $q.defer();
15 |
16 | deferred.resolve( ng.copy( cache ) );
17 |
18 | return( deferred.promise );
19 |
20 | }
21 |
22 |
23 | // I get the category with the given ID.
24 | function getCategoryByID( id ) {
25 |
26 | var deferred = $q.defer();
27 | var category = _.findWithProperty( cache, "id", id );
28 |
29 | if ( category ) {
30 |
31 | deferred.resolve( ng.copy( category ) );
32 |
33 | } else {
34 |
35 | deferred.reject();
36 |
37 | }
38 |
39 | return( deferred.promise );
40 |
41 | }
42 |
43 |
44 | // ---------------------------------------------- //
45 | // ---------------------------------------------- //
46 |
47 |
48 | // Set up the categories data cache. For this demo, we'll just use static data.
49 | var cache = [
50 | {
51 | id: "cats",
52 | name: "Cats",
53 | description: "Cats are graceful and cunning."
54 | },
55 | {
56 | id: "dogs",
57 | name: "Dogs",
58 | description: "Dogs are super awesome and adorable."
59 | }
60 | ];
61 |
62 |
63 | // ---------------------------------------------- //
64 | // ---------------------------------------------- //
65 |
66 |
67 | // Return the public API.
68 | return({
69 | getCategories: getCategories,
70 | getCategoryByID: getCategoryByID
71 | });
72 |
73 |
74 | }
75 | );
76 |
77 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/services/lodash.js:
--------------------------------------------------------------------------------
1 | (function( ng, app, _ ) {
2 |
3 | "use strict";
4 |
5 | // I provide an augmented lodash library.
6 | app.factory(
7 | "_",
8 | function() {
9 |
10 |
11 | // I filter the collection down to items with the given property value.
12 | _.filterWithProperty = function( collection, name, value ) {
13 |
14 | var result = _.filter(
15 | collection,
16 | function( item ) {
17 |
18 | return( item[ name ] === value );
19 |
20 | }
21 | );
22 |
23 | return( result );
24 |
25 | };
26 |
27 |
28 | // I find the first collection item with the given property value.
29 | _.findWithProperty = function( collection, name, value ) {
30 |
31 | var result = _.find(
32 | collection,
33 | function( item ) {
34 |
35 | return( item[ name ] === value );
36 |
37 | }
38 | );
39 |
40 | return( result );
41 |
42 | };
43 |
44 |
45 | // I sort the collection on the given property.
46 | _.sortOnProperty = function( collection, name, direction ) {
47 |
48 | var indicator = ( ( direction.toLowerCase() === "asc" ) ? -1 : 1 );
49 |
50 | collection.sort(
51 | function( a, b ) {
52 |
53 | if ( a[ name ] < b[ name ] ) {
54 |
55 | return( indicator );
56 |
57 | } else if ( a[ name ] > b[ name ] ) {
58 |
59 | return( - indicator );
60 |
61 | }
62 |
63 | return( 0 );
64 |
65 | }
66 | );
67 |
68 | return( collection );
69 |
70 | };
71 |
72 |
73 | // ---------------------------------------------- //
74 | // ---------------------------------------------- //
75 |
76 |
77 | // Return the public API.
78 | return( _ );
79 |
80 |
81 | }
82 | );
83 |
84 | })( angular, Demo, _.noConflict() );
85 | // Release the global reference to the lodash library. This way, we make sure that everyone goes
86 | // through our service object in order to get to the utility library.
--------------------------------------------------------------------------------
/assets/app/services/pet-service.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ) {
2 |
3 | "use strict";
4 |
5 | // I provide a repository for the pets.
6 | app.service(
7 | "petService",
8 | function( $q, _ ) {
9 |
10 |
11 | // I get the pet with the given ID.
12 | function getPetByID( id ) {
13 |
14 | var deferred = $q.defer();
15 | var pet = _.findWithProperty( cache, "id", id );
16 |
17 | if ( pet ) {
18 |
19 | deferred.resolve( ng.copy( pet ) );
20 |
21 | } else {
22 |
23 | deferred.reject();
24 |
25 | }
26 |
27 | return( deferred.promise );
28 |
29 | }
30 |
31 |
32 | // I get the pets in the given category.
33 | function getPetsByCategoryID( categoryID ) {
34 |
35 | var deferred = $q.defer();
36 | var pets = _.filterWithProperty( cache, "categoryID", categoryID );
37 |
38 | if ( pets ) {
39 |
40 | deferred.resolve( ng.copy( pets ) );
41 |
42 | } else {
43 |
44 | deferred.reject();
45 |
46 | }
47 |
48 | return( deferred.promise );
49 |
50 | }
51 |
52 |
53 | // I get a random pet in the given category, less the given pet.
54 | function getRandomPetExcluding( categoryID, excludePetID ) {
55 |
56 | var deferred = $q.defer();
57 | var pets = _.filterWithProperty( cache, "categoryID", categoryID );
58 |
59 | if ( pets ) {
60 |
61 | var index = _.random( 0, ( pets.length - 1 ) );
62 |
63 | while ( pets[ index ].id === excludePetID ) {
64 |
65 | index = _.random( 0, ( pets.length - 1 ) );
66 |
67 | }
68 |
69 | deferred.resolve( ng.copy( pets[ index ] ) );
70 |
71 | } else {
72 |
73 | deferred.reject();
74 |
75 | }
76 |
77 | return( deferred.promise );
78 |
79 | }
80 |
81 |
82 | // ---------------------------------------------- //
83 | // ---------------------------------------------- //
84 |
85 |
86 | // Set up a collection of constants for our pet categories. Normally, this would be managed
87 | // by the server-side relational database; but, since we're using static data, this will
88 | // just make the code easier to read.
89 | var categories = {
90 | cats: "cats",
91 | dogs: "dogs"
92 | };
93 |
94 | // Set up a collection of size constants.
95 | var sizes = {
96 | small: "Small, 25 lbs or less",
97 | medium: "Medium, 26 - 60 lbs",
98 | large: "Large, 61 - 100 lbs",
99 | huge: "Huge, more than 100 lbs"
100 | };
101 |
102 | // Set up the pets data cache. For this demo, we'll just use static data.
103 | var cache = [
104 | {
105 | id: 1,
106 | categoryID: categories.dogs,
107 | name: "Annie",
108 | breed: "Pit Bull Terrier",
109 | color: "Tricolor",
110 | sex: "F",
111 | size: sizes.small,
112 | description: "I love chewing on shoes.",
113 | background: "Annie was found in an abandoned house in Brooklyn.",
114 | diet: "Annie loves raw chicken necks.",
115 | medicalHistory: "Annie has all of her shots."
116 | },
117 | {
118 | id: 2,
119 | categoryID: categories.dogs,
120 | name: "Voodoo",
121 | breed: "Chihuahua",
122 | color: "White With Black",
123 | sex: "F",
124 | size: sizes.small,
125 | description: "I am house-trained, but when I get excited, I sometimes tinkle.",
126 | background: "Voodoo was one of 17 dogs found in a hoarder's house.",
127 | diet: "Voodoo will eat just about anything.",
128 | medicalHistory: "Voodoo has all of his shots and is spayed."
129 | },
130 | {
131 | id: 3,
132 | categoryID: categories.dogs,
133 | name: "Frodo",
134 | breed: "Yorkie",
135 | color: "Silver With Blue",
136 | sex: "F",
137 | size: sizes.small,
138 | description: "I want to lick your face ... a lot.",
139 | background: "Frodo went on a great adventure!",
140 | diet: "Frodo loves chicken and fish and peanut butter.",
141 | medicalHistory: "Frodo has all of his shots."
142 | },
143 | {
144 | id: 4,
145 | categoryID: categories.dogs,
146 | name: "Brook",
147 | breed: "Labrador Retriever",
148 | color: "Yellow",
149 | sex: "M",
150 | size: sizes.large,
151 | description: "I'll eat anything, but newspaper makes me gassy.",
152 | background: "Brook was found walking along George Washington Bridge.",
153 | diet: "Brook loves any duck-based food.",
154 | medicalHistory: "Brook has all of her shots."
155 | },
156 | {
157 | id: 5,
158 | categoryID: categories.dogs,
159 | name: "Henry",
160 | breed: "Bulldog",
161 | color: "Tricolor",
162 | sex: "M",
163 | size: sizes.medium,
164 | description: "I'm surprisingly active and can jump!",
165 | background: "Henry's owner recently passed and was left with no family.",
166 | diet: "Henry prefers dry food.",
167 | medicalHistory: "Henry has all of his shots and is fixed."
168 | },
169 | {
170 | id: 6,
171 | categoryID: categories.cats,
172 | name: "Marley",
173 | breed: "Scottish Fold",
174 | color: "White",
175 | sex: "F",
176 | size: sizes.small,
177 | description: "I can climb walls like a ninja!",
178 | background: "Marley was found in an abandoned lot in Brooklyn.",
179 | diet: "Marley prefers wet food.",
180 | medicalHistory: "Marley has all of her shots and is spayed."
181 | },
182 | {
183 | id: 7,
184 | categoryID: categories.cats,
185 | name: "Jamie",
186 | breed: "Calico",
187 | color: "Tricolor",
188 | sex: "F",
189 | size: sizes.small,
190 | description: "I'm extremely people friend, for a cat.",
191 | background: "Jamie was found under the porch.",
192 | diet: "Jamie can't stand wet food.",
193 | medicalHistory: "Jamie has all of her shots and need to be spayed."
194 | },
195 | {
196 | id: 8,
197 | categoryID: categories.cats,
198 | name: "Bruno",
199 | breed: "Uknown",
200 | color: "Black",
201 | sex: "M",
202 | size: sizes.small,
203 | description: "I'm an escape artist.",
204 | background: "When found, Bruno was under-nourished.",
205 | diet: "Bruno loves milk and anything chicken-based.",
206 | medicalHistory: "Bruno has all of his shots and is fixed."
207 | },
208 | {
209 | id: 9,
210 | categoryID: categories.cats,
211 | name: "Wiggles",
212 | breed: "Burmese",
213 | color: "Gray",
214 | sex: "M",
215 | size: sizes.small,
216 | description: "I love lasers and chasing my own tail.",
217 | background: "Wiggles was a feral cat known for his jumping.",
218 | diet: "Wiggles has no specific dietary information.",
219 | medicalHistory: "Wiggles has all of his shots."
220 | },
221 | {
222 | id: 10,
223 | categoryID: categories.cats,
224 | name: "Cotton",
225 | breed: "Himalayan",
226 | color: "Tan With Black",
227 | sex: "F",
228 | size: sizes.small,
229 | description: "I love to cuddle at night.",
230 | background: "Cotton's owner recently passed.",
231 | diet: "Cotton will eat just about anything.",
232 | medicalHistory: "Cotton has all of her shots and needs to be fixed."
233 | }
234 | ];
235 |
236 |
237 | // ---------------------------------------------- //
238 | // ---------------------------------------------- //
239 |
240 |
241 | // Return the public API.
242 | return({
243 | getPetByID: getPetByID,
244 | getPetsByCategoryID: getPetsByCategoryID,
245 | getRandomPetExcluding: getRandomPetExcluding
246 | });
247 |
248 |
249 | }
250 | );
251 |
252 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/services/request-context.js:
--------------------------------------------------------------------------------
1 | (function( ng, app ) {
2 |
3 | "use strict";
4 |
5 | // I provide information about the current route request.
6 | app.service(
7 | "requestContext",
8 | function( RenderContext ) {
9 |
10 |
11 | // I get the current action.
12 | function getAction() {
13 |
14 | return( action );
15 |
16 | }
17 |
18 |
19 | // I get the next section at the given location on the action path.
20 | function getNextSection( prefix ) {
21 |
22 | // Make sure the prefix is actually in the current action.
23 | if ( ! startsWith( prefix ) ) {
24 |
25 | return( null );
26 |
27 | }
28 |
29 | // If the prefix is empty, return the first section.
30 | if ( prefix === "" ) {
31 |
32 | return( sections[ 0 ] );
33 |
34 | }
35 |
36 | // Now that we know the prefix is valid, lets figure out the depth
37 | // of the current path.
38 | var depth = prefix.split( "." ).length;
39 |
40 | // If the depth is out of bounds, meaning the current action doesn't
41 | // define sections to that path (they are equal), then return null.
42 | if ( depth === sections.length ) {
43 |
44 | return( null );
45 |
46 | }
47 |
48 | // Return the section.
49 | return( sections[ depth ] );
50 |
51 | }
52 |
53 |
54 | // I return the param with the given name, or the default value (or null).
55 | function getParam( name, defaultValue ) {
56 |
57 | if ( ng.isUndefined( defaultValue ) ) {
58 |
59 | defaultValue = null;
60 |
61 | }
62 |
63 | return( params[ name ] || defaultValue );
64 |
65 | }
66 |
67 |
68 | // I return the param as an int. If the param cannot be returned as an
69 | // int, the given default value is returned. If no default value is
70 | // defined, the return will be zero.
71 | function getParamAsInt( name, defaultValue ) {
72 |
73 | // Try to parse the number.
74 | var valueAsInt = ( this.getParam( name, defaultValue || 0 ) * 1 );
75 |
76 | // Check to see if the coersion failed. If so, return the default.
77 | if ( isNaN( valueAsInt ) ) {
78 |
79 | return( defaultValue || 0 );
80 |
81 | } else {
82 |
83 | return( valueAsInt );
84 |
85 | }
86 |
87 | }
88 |
89 |
90 | // I return the render context for the given action prefix and sub-set of
91 | // route params.
92 | function getRenderContext( requestActionLocation, paramNames ) {
93 |
94 | // Default the requestion action.
95 | requestActionLocation = ( requestActionLocation || "" );
96 |
97 | // Default the param names.
98 | paramNames = ( paramNames || [] );
99 |
100 | // The param names can be passed in as a single name; or, as an array
101 | // of names. If a single name was provided, let's convert it to the array.
102 | if ( ! ng.isArray( paramNames ) ) {
103 |
104 | paramNames = [ paramNames ];
105 |
106 | }
107 |
108 | return(
109 | new RenderContext( this, requestActionLocation, paramNames )
110 | );
111 |
112 | }
113 |
114 |
115 | // I determine if the action has changed in this particular request context.
116 | function hasActionChanged() {
117 |
118 | return( action !== previousAction );
119 |
120 | }
121 |
122 |
123 | // I determine if the given param has changed in this particular request
124 | // context. This change comparison can be made against a specific value
125 | // (paramValue); or, if only the param name is defined, the comparison will
126 | // be made agains the previous snapshot.
127 | function hasParamChanged( paramName, paramValue ) {
128 |
129 | // If the param value exists, then we simply want to use that to compare
130 | // against the current snapshot.
131 | if ( ! ng.isUndefined( paramValue ) ) {
132 |
133 | return( ! isParam( paramName, paramValue ) );
134 |
135 | }
136 |
137 | // If the param was NOT in the previous snapshot, then we'll consider
138 | // it changing.
139 | if (
140 | ! previousParams.hasOwnProperty( paramName ) &&
141 | params.hasOwnProperty( paramName )
142 | ) {
143 |
144 | return( true );
145 |
146 | // If the param was in the previous snapshot, but NOT in the current,
147 | // we'll consider it to be changing.
148 | } else if (
149 | previousParams.hasOwnProperty( paramName ) &&
150 | ! params.hasOwnProperty( paramName )
151 | ) {
152 |
153 | return( true );
154 |
155 | }
156 |
157 | // If we made it this far, the param existence has not change; as such,
158 | // let's compare their actual values.
159 | return( previousParams[ paramName ] !== params[ paramName ] );
160 |
161 | }
162 |
163 |
164 | // I determine if any of the given params have changed in this particular
165 | // request context.
166 | function haveParamsChanged( paramNames ) {
167 |
168 | for ( var i = 0, length = paramNames.length ; i < length ; i++ ) {
169 |
170 | if ( hasParamChanged( paramNames[ i ] ) ) {
171 |
172 | // If one of the params has changed, return true - no need to
173 | // continue checking the other parameters.
174 | return( true );
175 |
176 | }
177 |
178 | }
179 |
180 | // If we made it this far then none of the params have changed.
181 | return( false );
182 |
183 | }
184 |
185 |
186 | // I check to see if the given param is still the given value.
187 | function isParam( paramName, paramValue ) {
188 |
189 | // When comparing, using the coersive equals since we may be comparing
190 | // parsed value against non-parsed values.
191 | if (
192 | params.hasOwnProperty( paramName ) &&
193 | ( params[ paramName ] == paramValue )
194 | ) {
195 |
196 | return( true );
197 |
198 | }
199 |
200 | // If we made it this far then param is either a different value; or,
201 | // is no longer available in the route.
202 | return( false );
203 |
204 | }
205 |
206 |
207 | // I set the new request context conditions.
208 | function setContext( newAction, newRouteParams ) {
209 |
210 | // Copy the current action and params into the previous snapshots.
211 | previousAction = action;
212 | previousParams = params;
213 |
214 | // Set the action.
215 | action = newAction;
216 |
217 | // Split the action to determine the sections.
218 | sections = action.split( "." );
219 |
220 | // Update the params collection.
221 | params = ng.copy( newRouteParams );
222 |
223 | }
224 |
225 |
226 | // I determine if the current action starts with the given path.
227 | function startsWith( prefix ) {
228 |
229 | // When checking, we want to make sure we don't match partial sections for false
230 | // positives. So, either it matches in entirety; or, it matches with an additional
231 | // dot at the end.
232 | if (
233 | ! prefix.length ||
234 | ( action === prefix ) ||
235 | ( action.indexOf( prefix + "." ) === 0 )
236 | ) {
237 |
238 | return( true );
239 |
240 | }
241 |
242 | return( false );
243 |
244 | }
245 |
246 |
247 | // ---------------------------------------------- //
248 | // ---------------------------------------------- //
249 |
250 |
251 | // Store the current action path.
252 | var action = "";
253 |
254 | // Store the action as an array of parts so we can more easily examine
255 | // parts of it.
256 | var sections = [];
257 |
258 | // Store the current route params.
259 | var params = {};
260 |
261 | // Store the previous action and route params. We'll use these to make
262 | // a comparison from one route change to the next.
263 | var previousAction = "";
264 | var previousParams = {};
265 |
266 |
267 | // ---------------------------------------------- //
268 | // ---------------------------------------------- //
269 |
270 |
271 | // Return the public API.
272 | return({
273 | getNextSection: getNextSection,
274 | getParam: getParam,
275 | getParamAsInt: getParamAsInt,
276 | getRenderContext: getRenderContext,
277 | hasActionChanged: hasActionChanged,
278 | hasParamChanged: hasParamChanged,
279 | haveParamsChanged: haveParamsChanged,
280 | isParam: isParam,
281 | setContext: setContext,
282 | startsWith: startsWith
283 | });
284 |
285 |
286 | }
287 | );
288 |
289 | })( angular, Demo );
--------------------------------------------------------------------------------
/assets/app/views/contact/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Contact Us
7 |
8 |
9 |
10 | Praesent imperdiet nibh a tellus pharetra vitae blandit dui euismod. Donec arcu mauris,
11 | porta non lobortis id, ultrices eget metus. Curabitur pretium diam eget dui iaculis
12 | ullamcorper. Ut vitae tortor ligula. Morbi hendrerit arcu tempor mauris aliquam tincidunt.
13 | Nam vestibulum malesuada leo a rhoncus. Integer metus risus, accumsan eget congue quis,
14 | porttitor a sem. Quisque mollis elit eu nisi mollis ac porta nunc elementum.
15 |
10 | We place needy, abused, and abandoned animals in safe homes with loving people. Some of
11 | these guys need a little extra love and a little extra care. But, in the end, you're
12 | guaranteed to find yourself with a brand-new best friend!
13 |
6 | {{ pet.diet }}
7 |
8 | Nunc sapien neque, adipiscing eu tincidunt sit amet, venenatis sed libero. Cras dictum lacus
9 | in augue blandit hendrerit. Nulla quam mauris, viverra quis rhoncus aliquet, dapibus vitae
10 | orci. Pellentesque odio massa, scelerisque eu viverra nec, vulputate eget massa.
11 |