thomasburleson / angularjs-quizzler

The AngularJS Challenge: Create an online Quiz builder & testing application.

Thomas Burleson is a Principal Architect and Trainer specializing in Web solutions/technologies. For the last 20 years, he has helped teams around the world develop and deliver commercial front-end software solutions. Self-described as a:

• FE Principal Architect... who loves hands-on coding
• Technical leader focusing exclusively in FE React, Angular, and NextJS technologies... and GraphQL/REST layers.
• Technical leader passionate about Reactive Stores and state management.
• Guide for teams in reducing technical debt and taming the sphagetti-code monster.

Thomas brings extensive experience and leadership lessons from projects that include JibJab, Sherwin-Williams, SiriusXM, Datasite, SAP, Trademe, Blackrock, Ameriprise Financial Services, and Google.

🚀 Reactive Store Repositories:

• Reactive Store with Elf (Angular)
• Reactive Store with Zustand (Angular)
• Reactive Store with Zustand (React)
• Reactive Store with Elf (React)
• Reactive Session with Zustand (React)

Latest Blog Posts:

Explore technical posts on Reactive architectures. Learn about little-understood concepts like Tuples and Observables. These are great resources for Angular, React, and TypeScript developers.

Recent Presentation: "Reactive Architectures"

This 5-part series for developers and architects called "Reactive Architectures". Presenting web developers with critical concepts, patterns, and techniques for superior product implementation & performance. Best of all, these concepts apply to FrontEnd and Backend development regardless of technology platform.

• Reactive Solutions - Part 1
• Reactive Solutions - Part 2

Developer Training: Hands-on, Live Workshops

As an Engineering Coach, Thomas has trained Angular and React developers all around the world. Workshops consist of live seminars with extensive slides. The seminars are interleaved with guided, hands-on coding labs. Thomas has created more than 60 hours of live workshop content: covering Git Essentials, ES/TypeScript Essentials, Collaborating with Nx Workspaces, Angular/React Jumpstart, RxJS Deep Dives, and NgRx Deep Dive, and more.

🤝 Connect with me:

• Twitter: https://twitter.com/thomasburleson
• LinkedIn: https://www.linkedin.com/in/thomasburleson
• Resume: Download PDF

angularjs-quizzler's Issues

Error: Cannot find module 'http-proxy'

I am getting below error.
i tried installing npm install -g http-proxy
It did not work

Error: Cannot find module 'http-proxy'
at Function.Module._resolveFilename (module.js:326:15)
at Function.Module._load (module.js:277:25)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at D:\Data\EMR\My_Projects\Quizzler\tools\webserver\node_modules\httpServers.coffee:30:14
at Object. (D:\Data\EMR\My_Projects\Quizzler\tools\webserver\node_modules\httpServers.coffee:62:18)
at Object. (D:\Data\EMR\My_Projects\Quizzler\tools\webserver\node_modules\httpServers.coffee:27:1)
at Module._compile (module.js:398:26)
at Object.loadFile (C:\Users\310197830\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\register.js:16:19)
at Module.load (C:\Users\310197830\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\register.js:45:36)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (D:\Data\EMR\My_Projects\Quizzler\tools\webserver\run.coffee:14:9)
at Object. (D:\Data\EMR\My_Projects\Quizzler\tools\webserver\run.coffee:14:3)
at Module._compile (module.js:398:26)
at Object.exports.run (C:\Users\310197830\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\coffee-script.js:134:23)
at compileScript (C:\Users\310197830\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:224:29)
at compilePath (C:\Users\310197830\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:174:14)
at Object.exports.run (C:\Users\310197830\AppData\Roaming\npm\node_modules\coffee-script\lib\coffee-script\command.js:98:20)
at Object. (C:\Users\310197830\AppData\Roaming\npm\node_modules\coffee-script\bin\coffee:7:41)
at Module._compile (module.js:398:26)
at Object.Module._extensions..js (module.js:405:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:430:10)
at startup (node.js:141:18)
at node.js:980:3

Errors Http-server

When clone this repo này , i have a trouble when connect webserver. On Terminal display.
util.puts: Use console.log instead
HttpProxy Server running at http://localhost:8000/
But when i run from browser , not showing and display errors look like:
Error: Must provide a proper URL as target
at ProxyServer. (/Users/khanh/Workspace/Template/angularjs-Quizzler/tools/webserver/node_modules/http-proxy/lib/http-proxy/index.js:68:35)
at Server.closure (/Users/khanh/Workspace/Template/angularjs-Quizzler/tools/webserver/node_modules/http-proxy/lib/http-proxy/index.js:125:43)
at Server.emit (events.js:110:17)
at HTTPParser.parserOnIncoming as onIncoming
at HTTPParser.parserOnHeadersComplete (_http_common.js:111:23)
at Socket.socketOnData (_http_server.js:343:22)
at Socket.emit (events.js:107:17)
at readableAddChunk (_stream_readable.js:163:16)
at Socket.Readable.push (_stream_readable.js:126:10)
at TCP.onread (net.js:529:20)
I dont know why ? help me please

Other Images

Reduced HTML with Boostrapping

Mismatched anonymous define() module

I'm trying to use ngTable with require.js and head.js but I'm getting the following error:

Uncaught Error: Mismatched anonymous define() module: function (angular) {
return factory(angular);
}

Here is my boot file:

(function(head){
    'use strict';

    head.js(
        { jquery: "../vendor/jquery/dist/jquery.js"},
        { require: "../vendor/requirejs/require.js" },
        { angularjs: "../vendor/angular/angular.js" },
        { uiRouter: "../vendor/angular-ui-router/release/angular-ui-router.js" },
        { angularTable: "../vendor/ng-table/ng-table.js"}
    ).ready("ALL", function(){
        require.config({
            appDir: '',
            baseUrl: '',
            paths: {
            },
            shim: {
            }
        });

        require(['config'], function(config){
        });
    });
}(window.head));

Can youhelp me with this problem?

Quizzler Snapshots

Login:

Quiz:

Scoring:

Image for README

Update Readme

Update README with raison d'etre, images, and notes.

[Question] What is the purpose of Head.js in the application?

Thank you for putting together a great example of how to use RequireJS with Angular. I'm a big fan of r.js and was having trouble finding resources that demonstrated the two together.

I'm trying to understand why Head.js is used with RequireJS to load Angular? What are the disadvantages of using RequireJS directly?

(Sorry, I know that the issue tracker is a bad place to ask Qs but I wasn't sure where else to ask about this.)

Why use headjs + Require and not only RequireJS?

Hi Thomas,

I was wondering if you can answer me that question please!

ReferenceError: head is not defined

I tried both grunt dev & grunt prod.
Both the ways when I open the index.html page in browser it is throwing below error in the browser console.

"NetworkError: 404 Not Found - http://localhost/Quizzler/vendor/headjs-notify/src/load.js"
load.js

ReferenceError: head is not defined
at
}( window, head ));