johnpapa / ng-demos Goto Github PK
View Code? Open in Web Editor NEWvariety of angular demos
License: MIT License
variety of angular demos
License: MIT License
ng-demos hangs with angular 1.4.5. Wondering if anyone is using this with angular 1.4.5 ?
according to this
the dashboard module have 2 dependency , but in the demo it has no dependency.
I am getting confuse here, could you help?
and also in here in the blocks module define ngRoute as dependency.
I am already ask question on stackoverflow maybe you can help me ๐บ
The modular sample app is recommended for seeing the styles in the style guide in action, but it doesn't really seem to follow the current style guide very well. None of the services follow the .service.js naming convention, the core config file assigns itself to a variable which is reused in the file, the unit tests are in their own folder, etc.
I am learning AngularJS by slowly building an app from scratch, but following the modular app structure. I am at a point where I have the router running but it's not kicking in when I enter the base url in browser address bar. It kicks in only when I click on links inside the app. Am I missing a crucial detail somewhere? I am not sure if this is the correct forum to ask such a question, so please let me know if I should post elsewhere. I have the details of the issue posted here.
$ gulp serve-dev
module.js:340
throw err;
^
Error: Cannot find module 'inflight'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/usr/local/lib/node_modules/gulp/node_modules/glob/glob.js:57:16)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
[10:30:09] Using gulpfile ~/angular/ng-demos/modular/gulpfile.js
[10:30:09] Starting 'analyze'...
[10:30:09] Analyzing source with JSHint, JSCS, and Plato
[10:30:09] Running JSHint
[10:30:09] [ './src/client/app/**/*module*.js',
'./src/client/app/**/*.js',
'!./src/client/app/**/*-spaghetti.js',
'./src/client/test/specs/*.spec.js',
'./src/server/**/*.js' ]
[10:30:09] Running JSCS
[10:30:09] Running Plato
[10:30:09] Starting 'templatecache'...
[10:30:09] Creating an AngularJS $templateCache
[10:30:09] Starting 'vendorjs'...
[10:30:09] Bundling, minifying, and copying the Vendor JavaScript
[10:30:09] Starting 'css'...
[10:30:09] Bundling, minifying, and copying the app's CSS
[10:30:09] Starting 'vendorcss'...
[10:30:09] Compressing, bundling, copying vendor CSS
[10:30:09] Starting 'images'...
[10:30:09] Compressing, caching, and copying images
[10:30:10] Starting 'fonts'...
[10:30:10] Copying fonts
[10:30:11] all.min.css went from 34.58 kB to 21.88 kB and is 36.73% smaller.
[10:30:11] vendor.min.css went from 124.51 kB to 122.41 kB and is 1.69% smaller.
[10:30:11] Finished 'css' after 2 s
[10:30:11] Finished 'vendorcss' after 1.79 s
[10:30:11] { total: { jshint: 0, sloc: 904, maintainability: 2225.4182693897424 },
average: { sloc: 32, maintainability: '79.48', jshint: '0.00' } }
[10:30:16] vendor.min.js went from 279.66 kB to 273.01 kB and is 2.38% smaller.
[10:30:16] Finished 'fonts' after 6.72 s
[10:30:16] Finished 'vendorjs' after 7.31 s
[10:30:16] Finished 'images' after 7 s
events.js:141
throw er; // Unhandled 'error' event
^
Error: Expected indentation of 12 characters at avengers/avengers.js :
16 |
17 | function activate() {
18 |// Using a resolver on all routes or dataservice.ready in every controller
--------------------^
19 |// var promises = [getAvengers()];
20 |// return dataservice.ready(promises).then(function(){
Expected indentation of 12 characters at avengers/avengers.js :
17 | function activate() {
18 |// Using a resolver on all routes or dataservice.ready in every controller
19 |// var promises = [getAvengers()];
--------------------^
20 |// return dataservice.ready(promises).then(function(){
21 | return getAvengers().then(function() {
Expected indentation of 12 characters at avengers/avengers.js :
18 |// Using a resolver on all routes or dataservice.ready in every controller
19 |// var promises = [getAvengers()];
20 |// return dataservice.ready(promises).then(function(){
--------------------^
21 | return getAvengers().then(function() {
22 | logger.info('Activated Avengers View');
Expected indentation of 12 characters at dashboard/dashboard.js :
25 | function activate() {
26 | var promises = [getAvengerCount(), getAvengersCast()];
27 |// Using a resolver on all routes or dataservice.ready in every controller
--------------------^
28 |// return dataservice.ready(promises).then(function(){
29 | return $q.all(promises).then(function() {
Expected indentation of 12 characters at dashboard/dashboard.js :
26 | var promises = [getAvengerCount(), getAvengersCast()];
27 |// Using a resolver on all routes or dataservice.ready in every controller
28 |// return dataservice.ready(promises).then(function(){
--------------------^
29 | return $q.all(promises).then(function() {
30 | logger.info('Activated Dashboard View');
Expected indentation of 12 characters at layout/shell.js :
21 | function activate() {
22 | logger.success(config.appTitle + ' loaded!', null);
23 |// Using a resolver on all routes or dataservice.ready in every controller
--------------------^
24 |// dataservice.ready().then(function(){
25 |// hideSplash();
Expected indentation of 12 characters at layout/shell.js :
22 | logger.success(config.appTitle + ' loaded!', null);
23 |// Using a resolver on all routes or dataservice.ready in every controller
24 |// dataservice.ready().then(function(){
--------------------^
25 |// hideSplash();
26 |// });
Expected indentation of 12 characters at layout/shell.js :
23 |// Using a resolver on all routes or dataservice.ready in every controller
24 |// dataservice.ready().then(function(){
25 |// hideSplash();
--------------------^
26 |// });
27 | hideSplash();
Expected indentation of 12 characters at layout/shell.js :
24 |// dataservice.ready().then(function(){
25 |// hideSplash();
26 |// });
--------------------^
27 | hideSplash();
28 | }
Expected indentation of 12 characters at widgets/ccWidgetHeader.js :
15 | // allow-collapse="true" </div>
16 | var directive = {
17 |// link: link,
--------------------^
18 | scope: {
19 | 'title': '@',
Expected indentation of 8 characters at widgets/ccWidgetHeader.js :
27 | return directive;
28 |
29 |// function link(scope, element, attrs) {
----------------^
30 |// attrs.$set('class', 'widget-head');
31 |// }
Expected indentation of 8 characters at widgets/ccWidgetHeader.js :
28 |
29 |// function link(scope, element, attrs) {
30 |// attrs.$set('class', 'widget-head');
----------------^
31 |// }
32 | }
Expected indentation of 8 characters at widgets/ccWidgetHeader.js :
29 |// function link(scope, element, attrs) {
30 |// attrs.$set('class', 'widget-head');
31 |// }
----------------^
32 | }
33 |})();
I'm getting an error when running npm install for the first time:
> [email protected] install /Users/realph/Desktop/ng-demos/modular/node_modules/browser- sync/node_modules/socket.io/node_modules/socket.io-client/node_modules/engine.io- client/node_modules/ws/node_modules/utf-8-validate
> node-gyp rebuild
CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/validation.node
SOLINK_MODULE(target) Release/validation.node: Finished
npm ERR! cb() never called!
Any idea why this is happening?
modular project not able to browse after serve/build. No index.html present in build folder.
Seems task 'rev-and-inject' not working properly.
Windows 8.1 x64
Node 0.12.4
events.js:72
throw er; // Unhandled 'error' event
^
Error: ๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mavengers\avengers.
js๏ฟฝ[39m :
๏ฟฝ[90m 16 |๏ฟฝ[39m
๏ฟฝ[90m 17 |๏ฟฝ[39m function activate() {
๏ฟฝ[90m 18 |๏ฟฝ[39m// Using a resolver on all routes or dataservice.re
ady in every controller
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 19 |๏ฟฝ[39m// var promises = [getAvengers()];
๏ฟฝ[90m 20 |๏ฟฝ[39m// return dataservice.ready(promises).then(function
(){
๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mavengers\avengers.js๏ฟฝ[39m
:
๏ฟฝ[90m 17 |๏ฟฝ[39m function activate() {
๏ฟฝ[90m 18 |๏ฟฝ[39m// Using a resolver on all routes or dataservice.re
ady in every controller
๏ฟฝ[90m 19 |๏ฟฝ[39m// var promises = [getAvengers()];
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 20 |๏ฟฝ[39m// return dataservice.ready(promises).then(function
(){
๏ฟฝ[90m 21 |๏ฟฝ[39m return getAvengers().then(function() {
๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mavengers\avengers.js๏ฟฝ[39m
:
๏ฟฝ[90m 18 |๏ฟฝ[39m// Using a resolver on all routes or dataservice.re
ady in every controller
๏ฟฝ[90m 19 |๏ฟฝ[39m// var promises = [getAvengers()];
๏ฟฝ[90m 20 |๏ฟฝ[39m// return dataservice.ready(promises).then(function
(){
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 21 |๏ฟฝ[39m return getAvengers().then(function() {
๏ฟฝ[90m 22 |๏ฟฝ[39m logger.info('Activated Avengers View');
๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mdashboard\dashboard.js๏ฟฝ[3
9m :
๏ฟฝ[90m 25 |๏ฟฝ[39m function activate() {
๏ฟฝ[90m 26 |๏ฟฝ[39m var promises = [getAvengerCount(), getAvengersCast
()];
๏ฟฝ[90m 27 |๏ฟฝ[39m// Using a resolver on all routes or dataservice.re
ady in every controller
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 28 |๏ฟฝ[39m// return dataservice.ready(promises).then(function
(){
๏ฟฝ[90m 29 |๏ฟฝ[39m return $q.all(promises).then(function() {
๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mdashboard\dashboard.js๏ฟฝ[3
9m :
๏ฟฝ[90m 26 |๏ฟฝ[39m var promises = [getAvengerCount(), getAvengersCast
()];
๏ฟฝ[90m 27 |๏ฟฝ[39m// Using a resolver on all routes or dataservice.re
ady in every controller
๏ฟฝ[90m 28 |๏ฟฝ[39m// return dataservice.ready(promises).then(function
(){
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 29 |๏ฟฝ[39m return $q.all(promises).then(function() {
๏ฟฝ[90m 30 |๏ฟฝ[39m logger.info('Activated Dashboard View');
๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mlayout\shell.js๏ฟฝ[39m :
๏ฟฝ[90m 21 |๏ฟฝ[39m function activate() {
๏ฟฝ[90m 22 |๏ฟฝ[39m logger.success(config.appTitle + ' loaded!', null)
;
๏ฟฝ[90m 23 |๏ฟฝ[39m// Using a resolver on all routes or dataservice.re
ady in every controller
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 24 |๏ฟฝ[39m// dataservice.ready().then(function(){
๏ฟฝ[90m 25 |๏ฟฝ[39m// hideSplash();
๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mlayout\shell.js๏ฟฝ[39m :
๏ฟฝ[90m 22 |๏ฟฝ[39m logger.success(config.appTitle + ' loaded!', null)
;
๏ฟฝ[90m 23 |๏ฟฝ[39m// Using a resolver on all routes or dataservice.re
ady in every controller
๏ฟฝ[90m 24 |๏ฟฝ[39m// dataservice.ready().then(function(){
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 25 |๏ฟฝ[39m// hideSplash();
๏ฟฝ[90m 26 |๏ฟฝ[39m// });
๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mlayout\shell.js๏ฟฝ[39m :
๏ฟฝ[90m 23 |๏ฟฝ[39m// Using a resolver on all routes or dataservice.re
ady in every controller
๏ฟฝ[90m 24 |๏ฟฝ[39m// dataservice.ready().then(function(){
๏ฟฝ[90m 25 |๏ฟฝ[39m// hideSplash();
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 26 |๏ฟฝ[39m// });
๏ฟฝ[90m 27 |๏ฟฝ[39m hideSplash();
๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mlayout\shell.js๏ฟฝ[39m :
๏ฟฝ[90m 24 |๏ฟฝ[39m// dataservice.ready().then(function(){
๏ฟฝ[90m 25 |๏ฟฝ[39m// hideSplash();
๏ฟฝ[90m 26 |๏ฟฝ[39m// });
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 27 |๏ฟฝ[39m hideSplash();
๏ฟฝ[90m 28 |๏ฟฝ[39m }
๏ฟฝ[1mExpected indentation of 12 characters๏ฟฝ[22m at ๏ฟฝ[32mwidgets\ccWidgetHeader.js
๏ฟฝ[39m :
๏ฟฝ[90m 15 |๏ฟฝ[39m // allow-collapse="true" </div>
๏ฟฝ[90m 16 |๏ฟฝ[39m var directive = {
๏ฟฝ[90m 17 |๏ฟฝ[39m// link: link,
๏ฟฝ[90m--------------------^๏ฟฝ[39m
๏ฟฝ[90m 18 |๏ฟฝ[39m scope: {
๏ฟฝ[90m 19 |๏ฟฝ[39m 'title': '@',
๏ฟฝ[1mExpected indentation of 8 characters๏ฟฝ[22m at ๏ฟฝ[32mwidgets\ccWidgetHeader.js๏ฟฝ
[39m :
๏ฟฝ[90m 27 |๏ฟฝ[39m return directive;
๏ฟฝ[90m 28 |๏ฟฝ[39m
๏ฟฝ[90m 29 |๏ฟฝ[39m// function link(scope, element, attrs) {
๏ฟฝ[90m----------------^๏ฟฝ[39m
๏ฟฝ[90m 30 |๏ฟฝ[39m// attrs.$set('class', 'widget-head');
๏ฟฝ[90m 31 |๏ฟฝ[39m// }
๏ฟฝ[1mExpected indentation of 8 characters๏ฟฝ[22m at ๏ฟฝ[32mwidgets\ccWidgetHeader.js๏ฟฝ
[39m :
๏ฟฝ[90m 28 |๏ฟฝ[39m
๏ฟฝ[90m 29 |๏ฟฝ[39m// function link(scope, element, attrs) {
๏ฟฝ[90m 30 |๏ฟฝ[39m// attrs.$set('class', 'widget-head');
๏ฟฝ[90m----------------^๏ฟฝ[39m
๏ฟฝ[90m 31 |๏ฟฝ[39m// }
๏ฟฝ[90m 32 |๏ฟฝ[39m }
๏ฟฝ[1mExpected indentation of 8 characters๏ฟฝ[22m at ๏ฟฝ[32mwidgets\ccWidgetHeader.js๏ฟฝ
[39m :
๏ฟฝ[90m 29 |๏ฟฝ[39m// function link(scope, element, attrs) {
๏ฟฝ[90m 30 |๏ฟฝ[39m// attrs.$set('class', 'widget-head');
๏ฟฝ[90m 31 |๏ฟฝ[39m// }
๏ฟฝ[90m----------------^๏ฟฝ[39m
๏ฟฝ[90m 32 |๏ฟฝ[39m }
๏ฟฝ[90m 33 |๏ฟฝ[39m})();
I just installed directly from github to work on the plural site course. I get errors when running for the first time. The bson.js file has a number of errors reported in webstorm and when running I get them as well. It looks like the file ends without appropriately closing out a function ... I am not sure what it was suppose to do and I am not familiar enough with the code to fix. Could you help?
Here there are:
/Users/jwe/code/clean/ng-demos/cc-bmean/node_modules/mongodb/node_modules/bson/lib/bson/bson.js:1293
});
^
Error: Cannot find module '././binary_parser'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at exports.native.classes (/Users/johnedwards/code/clean/ng-demos/cc-bmean/node_modules/mongodb/node_modules/bson/lib/bson/index.js:19:17)
at Array.forEach (native)
at Object. (/Users/johnedwards/code/clean/ng-demos/cc-bmean/node_modules/mongodb/node_modules/bson/lib/bson/index.js:18:15)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
Process finished with exit code 8
Hi John
I noticed that you blogged about this error when injecting angular modules in your project:
http://www.johnpapa.net/easy-fix-to-a-common-angular-module-error/
Uncaught Error: [$injector:nomod] Module 'app.layout' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
What I did was adding '[]' to every line where angular module would be declared for example:
angular
.module('app.layout',[])
.controller('Shell', Shell);
And the error would disappear.
Do you think this is related to mixing versions of js files if I add them with nuget?
I'm trying to install cc-bmean. I run npm install and get this on Windows 8 (running as Administrator):
D:\Projects\Angular\jpapa\ng-demos\cc-bmean>npm install
npm WARN package.json [email protected] No repository field.
[email protected] install D:\Projects\Angular\jpapa\ng-demos\cc-bmean
bower install; gulp clean
Usage:
bower <command> [<args>] [<options>]
Commands:
cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages - and possible updates
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
version Bump a package version
Options:
-f, --force Makes various commands more forceful
-j, --json Output consumable JSON
-l, --log-level What level of logs to report
-o, --offline Do not hit the network
-q, --quiet Only output important information
-s, --silent Do not output anything, besides errors
-V, --verbose Makes output more verbose
--allow-root Allows running commands as root
--version Output Bower version
See 'bower help ' for more information on a specific command.
D:\Projects\Angular\jpapa\ng-demos\cc-bmean>
Any help appreciated.
During runing that sample i've receive an error:
ng-demos\cc-bmean\node_modules\mongodb\lib\utils.js:98
process.nextTick(function() { throw err; });
^
TypeError: Trailer name must be a valid HTTP Token ["Content-Type:"]
at ServerResponse.OutgoingMessage.setHeader (_http_outgoing.js:351:13)
at sendResults (c:\Git\ng-demos\cc-bmean\src\server\routes\index.js:208:13)
at c:\Git\ng-demos\cc-bmean\src\server\routes\index.js:169:17
at c:\Git\ng-demos\cc-bmean\src\server\routes\index.js:86:21
at handleCallback (c:\Git\ng-demos\cc-bmean\node_modules\mongodb\lib\utils.js:96:12)
at c:\Git\ng-demos\cc-bmean\node_modules\mongodb\lib\cursor.js:835:16
at handleCallback (c:\Git\ng-demos\cc-bmean\node_modules\mongodb-core\lib\cursor.js:159:5)
at setCursorDeadAndNotified (c:\Git\ng-demos\cc-bmean\node_modules\mongodb-core\lib\cursor.js:480:3)
at nextFunction (c:\Git\ng-demos\cc-bmean\node_modules\mongodb-core\lib\cursor.js:631:7)
at Cursor.next as _next
You could fix it by changing file
cc-bmean\src\server\routes\index.js
function sendResults(res, results) {
...................
res.setHeader('Content-Type:', 'application/json');
...................
}
Should be:
function sendResults(res, results) {
...................
res.setHeader('Content-Type', 'application/json');
...................
}
similar problem found at Breeze samples issues:
Breeze/breeze.js.samples#36
I am attempting to follow your tutorial on Pluralsight and I am not getting the same results. I have cloned the repo and installed the modular project. I started gulp serve-dev and nothing loads on port 7200. Port 7203 does display the dark gray background with the title "ANGULAR MODULE DEMO", however, the application does not load. The console shows that resources are being loaded, e.g., GET, just not sure where to.
It appears changes have been made to the source code since the tutorial was made so they don't jive. I did notice the var port in app.js differs from the var port in the gulpfile.js; app.js var port = process.env.PORT || 7200 and gulpfile.js references 7203. Not sure if this is the problem as I am just getting familiar with the project configuration and it was something I noticed. I am on a trial subscription which ends on June 3rd so if you could help ... the sooner the better.
Thanks!
There is not a license on this repo (or at least I can't find it). Should we assume the code is public domain?
In order to run the cc-bmean app, I started by unzipping the file ngCodeCamper.zip file, modifying the dbpath property in mongodb.config and starting up mongod daemon by using the modified mongodb.config doesn't work.
Connecting to mongo server and switching to ngCodeCamper database does not show any collelction. Does the zip file have any issues or anythign specific required to be done?
I am running this on a Mac
Hello John,
I tried to add new record on "cc-bmean" app, I get the following error on the server:
"ObjectIds and Guids are the only autoGenerated key types that Breeze currently supports, not: undefined "
best regards,
Eyad
Hello,
I saw that there was a "testing" application which used ui-router for navigation instead of ngRoute.
The question is: Did you encounter any Problems with it or why did you remove the code? I always preferred ui-router over ngRoute and I am thinking about using the now deleted code for a non-critical university app.
I checked out the source, all tests pass and I can navigate.
Hi guys,
I have just downloaded and run this project and all seems to work well except when trying to add a new session, speaker.
Output from Chrome Developer tools is below:
Info: Validators created and registered null
angular.js:11715 Info: Validators applied null
angular.js:11715 Info: Retrieved lookups Object {results: Array[1], query: ctor, entityManager: ctor, httpResponse: Object, inlineCount: undefined}
angular.js:11715 Info: Retrieved [Speaker Partials] from remote data source 36
angular.js:11715 Info: Primed data Object {rooms: Array[36], tracks: Array[11], timeslots: Array[36]}
angular.js:11715 Success: CodeCamper loaded! null
angular.js:11715 TypeError: getRequestedSession(...).then is not a function
at activate (http://localhost:3001/app/session/sessiondetail.js:46:42)
at new SessionDetail (http://localhost:3001/app/session/sessiondetail.js:37:9)
at Object.invoke (http://localhost:3001/bower_components/angular/angular.js:4219:17)
at jqNodes.$get.extend.instance (http://localhost:3001/bower_components/angular/angular.js:8525:21)
at http://localhost:3001/bower_components/angular/angular.js:7771:13
at forEach (http://localhost:3001/bower_components/angular/angular.js:334:20)
at nodeLinkFn (http://localhost:3001/bower_components/angular/angular.js:7770:11)
at compositeLinkFn (http://localhost:3001/bower_components/angular/angular.js:7149:13)
at publicLinkFn (http://localhost:3001/bower_components/angular/angular.js:7028:30)
at $route.link (http://localhost:3001/bower_components/angular-route/angular-route.js:986:7)
Dependencies for the exception handler provider are not minification safe and throw an error when I use the default aspnet bundling & minification.
Refer Line 48 in file below
https://github.com/johnpapa/ng-demos/blob/master/modular/src/client/app/blocks/exception/exception-handler.provider.js
$delegate, exceptionHandler, logger dependencies for "extendExceptionHandler" function should be injected using $inject service .
In the "cc-bmean" demo (not sure about the others) why did you bring in toastr and moment as constants (in constants.js
) rather than listing them in the module's dependencies list when it was declared?
/* global toastr:false, moment:false */
(function () {
'use strict';
angular
.module('app.core')
.constant('moment', moment)
.constant('toastr', toastr);
})();
gulp rev-and-inject
error:
node_modules\gulp-ng-annotate\node_modules\ng-annotate\build\es5\ng-annotate-main.js:330
target.$methodName = method.name;
^
TypeError: Cannot assign to read only property '$methodName' of false
how to fix:
Open your package.json and replace "gulp-ng-annotate": "~0.3.2" with "gulp-ng-annotate": "^0.5.2".
Is it possible to switch the modular application to use angular-ui routing versus standard angularjs routing ?
It seems like this is much more flexible as well .
BTW I also have some ideas on the reusable blocks and already started extending the framework
Could you give a clue on how to use Jade templates instead?
Hi There! First of all, thanks a lot for your great examples!!!
I have one question: if i want use data binding in routes file? for example:
config: {
templateUrl: 'app/account/views/account.html',
settings: {
nav: 4,
content: {{ session.user.username }},
settings: {}
How should i compile it? Thank you!
The widgets wouldn't expand/collapse for me.
I think there's a line that needs an extra .parent() in the chain...
So...
line 29 in ccWidgetMinimize
currently reads: var $wcontent = element.parent().parent().next('.widget-content');
but should be: var $wcontent = element.parent().parent().parent().next('.widget-content');
(sorry, I'd make a proper pull request if I was set up for it, but am not at the time and am a bit swamped.. hopefully someone else can get to it before me)
Trying to use this task emits an error
[gulp] [nodemon] starting `node --debug=5858 ./src/server/app.js`
events.js:72
throw er; // Unhandled 'error' event
^
Error: Command failed: /bin/sh: 1: node-inspector: not found
at ChildProcess.exithandler (child_process.js:648:15)
at ChildProcess.emit (events.js:98:17)
at maybeClose (child_process.js:756:16)
at Socket.<anonymous> (child_process.js:969:11)
at Socket.emit (events.js:117:20)
at Pipe.close (net.js:465:12)
Dear Team,
As i have an One table it was some customized Filters and Sorting, but i want to make some column wise customization like
In top of the table i have an One Button, if i click the Button it will shows some one Multi Select Box with Drag Drop option.
In Side of Lpanel I have an options are table header title
Cpanel is select a coloumn title selective options like Lpanel to rpanel, Rpanel to Lpanel, All to Rpanel, All to lapnel insid ehave Drag Drop.
In table header name(data) are loaded into the Select Box. whatever i action will perform like L to R R to L, Drag and Drop
I want to hide the columns and i want make the column positions too
Kindly Help me for an custom Directive / Controller,
Hazdik DA, India
Just like #45 , this is just a general question regarding the app architecture, i'm confused on what is the difference between common
and blocks
as they seem similar in being reusable.
I'm actually struggling on where to put helper functions (filters, value services, etc) I created for 3rd-party libraries I'm using, and I'm thinking of putting it in common
, would that be a correct approach ? and if so, should I probably have create them under separate modules just like how blocks
are ?
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.core due to:
Error: [$injector:unpr] Unknown provider: routehelperConfigProvider
Where is this provider defined?
curious if there where any tutorials that follow using the node demo.
$ gulp serve-dev
module.js:340
throw err;
^
Error: Cannot find module 'inflight'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/usr/local/lib/node_modules/gulp/node_modules/glob/glob.js:57:16)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
Hi,
I noticed that there is a small bug related pageCount.
If you have 5 of 5 records (if pageSize = 5), Paging directive generates wrong information: 1 of 2 pages, but we still should have one page.
Below proposed code which works fine for me.
Object.defineProperty(vm.paging, 'pageCount', {
get: function () {
var val = 1;
if (vm.attendeeFilteredCount % vm.paging.pageSize == 0)
val = 0;
return Math.floor(vm.attendeeFilteredCount / vm.paging.pageSize) + val;
}
});
Regards, Pat
This is just a general question about the code structure. I'm still confused about core and blocks as they seem very similar and can be accessed throughout the project.
So when developing, what should be put inside core module and what inside blocks module? (e.g. to me, dataservice can be put under blocks module).
Is it possible to modify the current modular application and include RequireJS to handle dynamic loading of the javascript files required for the specific modules ?
The current structure would not well in case of the large level size application because all the files will need to be loaded in the beginning.
I get this error every time I run >npm install:
Error: Cannot find module 'duplexer'
at Function.Module._resolveFilename (module.js:336:15)
This is for the "modular" application
I have reinstalled node, all the bower components and repulled the repository. Happens every time. Environment is windows command prompt with admin permissions
Hi John,
Followed your tutorials and talks on Pluralsight and I am trying to implementing your approach on the project that I am currently working on. However I have couple of questions here which I would appreciate if you could advise me on.
It appears in the modular example you are using data service factory for all the features and all the service methods are listed in one place. I can't really get my head around that and understand why that's the case? to me this approach is contradicting the main concept of the great design framework you are trying to achieve here. Wouldn't that be better to segregate the dataservice and create dataservice for each feature?
Also in the other example (cc-bmean) you are adapting a much more advanced approach and you are using breeze. How much of a big jump would it be to implement the breeze metadata, when using a Repository pattern against an Entity Framework context. Do you have any example of how to access the metadata from ASP.NET Web API, and not node?
Cheers,
Farzan
//cc @gep13
On line 16 of package.json, the following multiple commands fails:
"install": "bower install; gulp clean"
As suggested here, using "&&" might be a cross-platform way to do this.
First, thanks for the great demos.
One issue that I am facing is CSS minification and concatenation using gulp. I have tried the gulp task that you have in cc-bmean project, but it works only for some special cases.
The problem occurs with the following layout:
css
one
img
img.png
one.css
two
img
img.png
two.css
Both one.css and two.css files have a relative URL to the "img/img.png" files - and off course images are different. This may be avoided for application CSS files by organizing the files in a different way, but often third-party libraries come with this layout.
By doing simple concat() we loose information about correct image URL.
I would appreciate your help greatly on this issue.
Hi John,
When testing the modular app from the ng-demo, It failed because it cannot find the 'ngplus-overlay.js'. I also couldn't find the file within the paths. Any chance you could include it. Cheers
For the Lessons: AngularJS Patterns: Creating a Gulp Task With ngAnnotate
package.json needs the package added in devDependencies:
"gulp-rename": "1.2.2",
That the instructions match the result on the modular directory.
Thanks for the excellent lectures :-) very help full!
I get this error running gulp serve-dev after npm and bower install. It seems package.json is missing the paths key.
var pkg = require('./../../../package.json');
app.get(pkg.paths.api + '/maa', getMaa);
^
TypeError: Cannot read property 'api' of undefined
I have done this test thrice.
On the CLI,
โ$ cd src/server && nodemon server
The express server starts, but routes "/", "/authenticate", e.t.c all fail with status 404.
6 Nov 19:38:13 - [nodemon] v1.2.1
6 Nov 19:38:13 - [nodemon] to restart at any time, enter `rs`
6 Nov 19:38:13 - [nodemon] watching: *.*
6 Nov 19:38:13 - [nodemon] starting `node server`
** DEV **
Express server listening on port 7171
env = development
__dirname = /home/kokujin/Development/research/jp_jwt/src/server
process.cwd = /home/kokujin/Development/research/jp_jwt/src/server
The readme cannot be followed due to this.
i install the modular project, all packages, and run fine.
but when i upgrade the angular from 1.2.28 to 1.4.4 (i need to use some new features and because the dependency from other libraries), an error appeared ;
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.core due to:
Error: [$injector:modulerr] Failed to instantiate module blocks.exception due to:
Error: [$injector:strictdi] config is not using explicit annotation and cannot be invoked in strict mode
how to solve that ??
This task doesn't serve the build environment, it serve the dev environment (default env),
and that because in gulpfile you set the mode to 'build':
gulp.task('serve-build', function() {
serve({
mode: 'build'
});
});
but in the server/app.js you expected it to be 'stage':
switch (environment){
case 'production':
console.log('** PRODUCTION ON AZURE **');
process.chdir('./../../');
app.use('/', express.static('./build/stage/'));
// app.use('/', express.static(pkg.paths.client));
// app.use('/', express.static('./'));
break;
case 'stage':
console.log('** STAGE **');
app.use('/', express.static('./build/stage/'));
break;
default:
console.log('** DEV **');
app.use('/', express.static('./src/client/'));
app.use('/', express.static('./'));
break;
}
Also, the build path is './build/'
and not './build/stage/'
(from gulp.config.json "build": "./build/"
)
I think you should update the server/app.js something like this:
switch (environment){
case 'production':
console.log('** PRODUCTION ON AZURE **');
process.chdir('./../../');
app.use('/', express.static('./build/stage/'));
// app.use('/', express.static(pkg.paths.client));
// app.use('/', express.static('./'));
break;
case 'build':
console.log('** STAGE **');
app.use('/', express.static('./build/'));
break;
default:
console.log('** DEV **');
app.use('/', express.static('./src/client/'));
app.use('/', express.static('./'));
break;
}
I tried to run npm install but shows me error : -
EEXIST, open '/Users/Username/.npm/10afb59f-adable-stream-1-0-33-package-tgz.lock'
File exists: /Users/Username/.npm/10afb59f-adable-stream-1-0-33-package-tgz.lock
Move it away, and try again.
I tried it few times , but face same error and if i try to run gulp serve-dev , i face error :-
Error: Cannot find module 'source-map'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/AngularCleanCode/modular/node_modules/karma/lib/reporter.js:5:25)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
I was trying to follow this tutorial and am getting the following error when I run the command 'gulp serve-dev'-
C:\Users\mradul.jain\play\ng-demos\modular [master]> gulp serve-dev
[09:10:14] Using gulpfile ~\play\ng-demos\modular\gulpfile.js
[09:10:14] Starting 'serve-dev'...
[09:10:15] Finished 'serve-dev' after 293 ms
[gulp] [nodemon] v1.3.7
[gulp] [nodemon] to restart at any time, enter rs
[gulp] [nodemon] watching: C:\Users\mradul.jain\play\ng-demos\modular\src\server
//*
[gulp] [nodemon] starting node ./src/server/app.js
events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn cmd ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)
I am not sure where event.js is. I noticed that there is a difference between the output on the tutorial video and my output. After the 'to restart...' it reads 'watching: gulpfile.js pacakge.json..... '
I'm not sure if I'm missing something.
PS - I have no experience in node.js/bower/git and am not so smart so parodon me if I am missing something very basic.
I am trying to run npm install as per documentation on the modular application and getting the error
Additional error details:
fatal: unable to connect to github.com:
github.com[0: 192.30.252.130]: errno=No error
I've tried running this command to switch to https:
git config --global url."https://".insteadOf git://
but it did not help.
How can I fix it ?
Is there any plan on implementing tests to these demos?
Hi
I liked you concept of blocks.logger and blocks.exception, and am trying to implement this into our application. I'm using the files from "modular".
The extended exception handler throws an error though:
Uncaught Error: [$injector:cdep] Circular dependency found: $exceptionHandler <- $$q <- $animate <- toastr <- logger <- $exceptionHandler <- $rootScope
If i remove the call to logger in here, it's fine:
Any ideas?
On running gupl serve-dev
I am getting:
Error: Cannot find module './lib/_stream_transform.js'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/Users/paulmackey/Programming/Angular/AngularIntro/JohnPapa/ng-demos/modular/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/transform.js:1:80)
at Module._compile (module.js:456:26)
ILooking inside transform.js I see:
module.exports = require("./lib/_stream_transform.js")
There is no ./lib folder...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.