Once the generator runs, you have an application which allows the developer to use Browsersync for live development, the ability to use Gulp to run several types of builds, Bower to manage the front end assets, and has both unit testing and end to end testing built-in.<\/p>\n
Running the generator is straightforward and produces a runnable application pretty quickly. I did take the time to clean out many of the default examples items in the application and added in some client-specific features, such as the SASS styles, and a single required feature for example purposes.<\/p>\n
I was impressed at how well the generator followed John Papa\u2019s Angular 1.x style guide<\/a>. I also found that VS Code snippets for Angular 1.x<\/a> worked well with the generated code right out of the box. We quickly had a child application developed in just a handful of hours.<\/p>\n angular service example<\/strong><\/p>\n The single-page application used Gulp for managing all of its build and run tasks. I took advantage of this and was able to build an optimized production version of the application. What happened is that it took all of the SASS files and compiled them down into a single file.<\/p>\n Gulp also condensed all of its vendor-specific files and created one each for the styles and for the scripts. Lastly, Gulp took all of the HTML templates and application-specific scripts and compiled them down also into a single file. The build scripts also created an optimized HTML index file and packaged all of the assets into a distribution folder.<\/p>\n Okay, step one is completed. We now have a working single-page application that has been optimized for production and is ready to placed into a shell application.<\/p>\n So the initial problem was with the integration of the child SPA and the containing shell.<\/p>\n While it\u2019s easy to have hyperlinks just bring up an HTML page in an iFrame, it\u2019s really pretty difficult to have the parent and the iFrame work well together. My thought was, why not have the SPA just be a page in the shell in the first place and avoid the iFrame all together.<\/p>\n I had worked with NodeJS quite a bit at a former client. There, we had actually used the power of templating to render a single-page application which combined a header and footer from external sources. From this experience I felt that it would be easy to integrate additional single-page applications into a larger parent shell application.<\/p>\n I used the default ExpressJS application generator<\/a> to get a simple application up and running. I had chosen Handlebars as my default templating engine during the scaffolding phase because of its similarity to the client-side markup used with AngularJS.<\/p>\n The layout for the shell came from startbootstrap.com<\/a> where I used one of the templates that looked fairly close to what was needed by the client.<\/p>\n A couple of the design decisions that I made was to keep a separation between the single-page applications that will be imported into the shell and any pages which are created with ExpressJS and Handlebars. I did this by breaking out the routes with separate JavaScript files; one for the single-page applications and one for the internal routes which could be used by Express.<\/p>\n I also added a JavaScript file for API calls which might be made. My former client had used Node to marshall quite a bit of the data coming from third-party APIs and I figured this would be a nice example to place in the shell application.<\/p>\n In the view\u2019s folder I broke out the Express Now here is where it gets a little hairy. Since this was a prototype, I went ahead and left it this way since it worked, but it could definitely be enhanced some with some creative Gulp scripting.<\/p>\n Each page in the exported index page<\/strong><\/p>\n Now by default, this won\u2019t \u201cjust work\u201d out of the box. Here are the steps I used to correct this:<\/p>\n I copied the entire exported single-page application folder into the shell\u2019s Next I created a Handlebars template in the Like I said before, we\u2019re making the single-page applications index page here, but we didn\u2019t need the spa handlebars index page<\/strong><\/p>\n In the What we\u2019re given here by the design is the ability to pass data from Node into our single-page application before it is rendered to the browser. At this point we have all the power of having a server-rendered page available for us to use if needed.<\/p>\n spa route added<\/strong><\/p>\n Last thing done, opened up the shell\u2019s layout template and added a hyperlink to the navigation. At this point we should be done adding a single-page application to the shell.<\/p>\n hyperlink added to layout page<\/strong><\/p>\n Using the ExpressJS NPM scripts, I fired up the shell and navigated to our localhost instance in the browser. The prototype only has a handful of pages because I wanted to keep it lean for the moment. The landing page and Handlebars pages work exactly as expected.<\/p>\n Opening up the single-page application section, we see our hyperlink for the child SPA that we imported and yes, it does work. The page renders, and the single-page application is displaying data and works as it did in its own development environment.<\/p>\n So I learned a few things from this prototype that, while not painful, were quite annoying. The child application was developed using a completely different stylesheet setup and when the child and the parent were combined together, the shell\u2019s styles and the SPA\u2019s styles clashed and several things\/styles on both sides were lost. Taking more time to design a site-wide style would probably alleviate this pain point.<\/p>\n Secondly, while it isn\u2019t difficult to manually add code from the generated index page, it can be very error prone. On a review of this application with a fellow developer, we thought that having Gulp script out a Handlebars page from within the SPA\u2019s build step would be helpful to avoid the copying part. And doing additional research we thought that the hyperlink and routing steps could be somewhat more dynamic if the information came from a database.<\/p>\n And while I said that the application pulled data just fine, that\u2019s only after I went and adjusted where the folder containing my static data was located at. Paths from within the SPA are localized to the So the prototype worked as expected. I successfully took a single-page application built 100% outside of the shell application, imported it into the shell and was able to bring it up within the shell at runtime. We avoided the iFrame issues of not being able to talk to the shell. And we gave the entire application the ability to render data both from the server and across sections, as all items were now rendered together.<\/p>\n We inherited a few advantages of being able to secure the SPAs at the server-level by completely blocking a user\u2019s access at runtime. We avoided having a single SPA with hundreds of views and potentially having large memory leaks happen over time by rendering only the necessary single-page application and dropping it out of memory on a navigation change.<\/p>\n All in all, I feel that this was a successful prototype.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/Singlepageapplication1.png\")
<\/a><\/p>\n(function () {\r\n 'use strict';\r\n\r\n angular\r\n .module('gulpAngular')\r\n .service('apiService', Service)\r\n\r\n \/** @ngInject *\/\r\n function Service($http) {\r\n\r\n var getAll = function () {\r\n return $http.get('data\/users.get.json');\r\n },\r\n getById = function (userId) {\r\n return $http.get('data\/' + userId + '.get.json');\r\n }\r\n\r\n return {\r\n GetAll: getAll,\r\n GetById: getById\r\n };\r\n }\r\n}());<\/pre>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/Singlepageapplication2.png\")
<\/a><\/p>\n![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/Singlepageapplication3.png\")
<\/a><\/p>\nStep Two: The Shell<\/h2>\n
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/Singlepageapplication4.png\")
<\/a><\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/Singlepageapplication5.png\")
<\/a><\/p>\npartials<\/code> (internal page templates using Handlebars) and where the single-page application pages would live at, the apps<\/code> folder.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/Singlepageapplication6.png\")
<\/a><\/p>\napps<\/code> folder is essentially the index page of our exported child SPA. But the child SPA wasn\u2019t scripted to live inside of another application, it generated a full HTML page with the head and body tags along with all of the script tags added.<\/p>\n<!doctype html><html ng-app=gulpAngular><head><meta charset=utf-8><title>KCS - Angular Reference<\/title><meta name=description content=\"\"><meta name=viewport content=\"width=device-width\"><link href=https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css rel=stylesheet><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel=stylesheet href=styles\/vendor-04c8db0ab4.css><link rel=stylesheet href=styles\/app-fbcced86b7.css><\/head><body><!--[if lt IE 10]>\r\n \r\n\r\nYou are using an <strong>outdated<\/strong> browser. Please <a href=\"http:\/\/browsehappy.com\/\">upgrade your browser<\/a> to improve your experience.\r\n\r\n <![endif]-->\r\n\r\n<div ui-view><\/div>\r\n\r\n\r\n<img src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-wp-preserve=\"%3Cscript%20src%3Dscripts%2Fvendor-5b6b3f5db1.js%3E%3C%2Fscript%3E\" data-mce-resize=\"false\" data-mce-placeholder=\"1\" class=\"mce-object\" width=\"20\" height=\"20\" alt=\"<script>\" title=\"<script>\" \/><img src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-wp-preserve=\"%3Cscript%20src%3Dscripts%2Fapp-9bd529611d.js%3E%3C%2Fscript%3E\" data-mce-resize=\"false\" data-mce-placeholder=\"1\" class=\"mce-object\" width=\"20\" height=\"20\" alt=\"<script>\" title=\"<script>\" \/><\/body><\/html><\/pre>\n
public<\/code> folder. From here, all of the assets are accessible when a rendered page is sent to the browser.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/Singlepageapplication7.png\")
<\/a><\/p>\napps<\/code> folder and named it the same as the folder found in the public<\/code> folder. I opened up the index.html<\/code> from the public<\/code> folder and I copied only the script tags and the items necessary for Angular to work. Then I pasted those items into the Handlebars template.<\/p>\nbody<\/code> tags and head<\/code> tags. After adjusting the paths of the scripts and styles, I saved that file.<\/p>\n{{!--<link rel=stylesheet href=\"..\/app_puu\/styles\/vendor-04c8db0ab4.css\" \/>--}}\r\n <link rel=stylesheet href=\"..\/app_puu\/styles\/app-81ae878e3a.css\" \/>\r\n\r\n \r\n\r\n<div ng-app=\"gulpAngular\" id=\"inner-app\">\r\n\r\n<div ui-view><\/div>\r\n\r\n\r\n <\/div>\r\n\r\n\r\n \r\n\r\n <img src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-wp-preserve=\"%3Cscript%20src%3D%22..%2Fapp_puu%2Fscripts%2Fvendor-5b6b3f5db1.js%22%3E%3C%2Fscript%3E\" data-mce-resize=\"false\" data-mce-placeholder=\"1\" class=\"mce-object\" width=\"20\" height=\"20\" alt=\"<script>\" title=\"<script>\" \/>\r\n <img src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-wp-preserve=\"%3Cscript%20src%3D%22..%2Fapp_puu%2Fscripts%2Fapp-b586be956c.js%22%3E%3C%2Fscript%3E\" data-mce-resize=\"false\" data-mce-placeholder=\"1\" class=\"mce-object\" width=\"20\" height=\"20\" alt=\"<script>\" title=\"<script>\" \/><\/pre>\nroutes<\/code> folder, I added the single-page application to the application<\/code> specific route file. Nothing special here, the route is written just like any other in Express.<\/p>\nmodule.exports = { \r\n\tregister: function (app) { \r\n\t\tapp.get('\/puu', function (req, res){ \r\n\t\t\tvar data = {puu: true, title: 'Pricing User Update'}; \r\n\t\t\tres.render('apps\/puu', data); \r\n\t\t}); \r\n\t}\r\n};<\/pre>\n<ul id=\"demo\" class=\"collapse\"> \r\n\t\r\n\r\n<li class=\"{{#if puu}}active{{\/if}}\">\r\n\t\t<a href=\"\/puu\"><i class=\"fa fa-user-o fa-fw\" aria-hidden=\"true\"><\/i>Pricing User Update<\/a> \r\n\t<\/li>\r\n\r\n\r\n \r\n<\/ul><\/pre>\nStep 3: Does It Work?<\/h2>\n
![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/Singlepageapplication8.png\")
<\/a><\/p>\nLessons Learned and Potential Improvements<\/h2>\n
public<\/code> folder and the layering I had could not be resolved. While this was an issue for the prototype, when real production-ready single-page applications are used, they should be using remote APIs so this would not be as much of an issue.<\/p>\nSummary<\/h2>\n