We Keep Coding

Creating multiple Vue components with internal router

Is it possible to use Vue Router to create internal navigation for components added via a for loop?
┌────────────────────────────────────────────────────────────────┐
│ Application │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Router │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ View │ │ │
│ │ │ │ │ │
│ │ │ ┌──────────────────────────────────────────────┐ │ │ │
│ │ │ │ v-for component in components │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ ┌──────────────────┐ ┌──────────────────┐ │ │ │ │
│ │ │ │ │ Component │ │ Component │ │ │ │ │
│ │ │ │ │ ┌──────────────┐ │ │ ┌──────────────┐ │ │ │ │ │
│ │ │ │ │ │ Router │ │ │ │ Router │ │ │ │ │ │
│ │ │ │ │ │ ┌──────────┐ │ │ │ │ ┌──────────┐ │ │ │ │ │ │
│ │ │ │ │ │ │ View │ │ │ │ │ │ View │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ │ │ └──────────┘ │ │ │ │ └──────────┘ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ │ └──────────────┘ │ │ └──────────────┘ │ │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ └──────────────────┘ └──────────────────┘ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
I could use an internal state variable and a bunch of v-if statements to show the desired view but it would be nice to be able to define internal routes for the components to control the view state with vue-router.
I've tried adding a new router with createRouter() but I can't figure out how I could use the router for the component (like createApp().use(mainRouter);)
Application view from main Router
<template>
<section class="home">
<car-panel v-for="item in itemList"
:id="item.id"
/>
</section>
</template>
<script>
import { ref, onMounted } from 'vue';
import Panel from '#/components/Panel.vue';
export default {
components: { Panel },
setup() {
const itemList = ref([]);
onMounted(() => {
// insert a random number of items above 1
for (var i = 0; i < Math.floor(Math.random() * 5) + 1; i++) {
itemList.value.push({
id: i.toString()
});
}
});
return {
itemList,
};
},
}
</script>
Panel
<template>
<article class="panel">
<panel-nav></panel-nav>
<router-view></router-view>
</article>
</template>
<script>
import { createRouter, createWebHashHistory } from 'vue-router';
import PanelNav from '#/components/PanelNav.vue';
export default {
name: 'Panel',
components: {
PanelNav,
},
props: {
id: { type: String },
},
setup() {
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/content', name: 'content', component: ContentView },
{ path: '/', redirect: 'content' },
],
});
return {};
},
}
</script>
EDIT 1
this hacky nonsense comes very close:
added :name="id" to the <router-view>
used addRoute with components object with the key as the id
<template>
<article class="panel">
<panel-nav></panel-nav>
<router-view :name="id"></router-view>
</article>
</template>
<script>
import { toRefs } from 'vue';
import { useRouter } from 'vue-router';
import PanelNav from '#/components/PanelNav.vue';
import ContentView from '#/views/ContentView.vue';
export default {
name: 'Panel',
components: {
PanelNav,
},
props: {
id: { type: String },
},
setup(props) {
const { id } = toRefs(props);
const router = useRouter();
let comps = {};
comps[id.value] = ContentView
// add a route to the /home route
router.addRoute('home', {
path: `${id.value}/content`,
components: comps,
});
return {};
},
}
</script>
This allows me to go to /home/0/content and this will add the ContentView component to the Panel. However, as has been suggested by #jeremy castelli, I can only do this for a single Panel at a time. So if I go to /home/0/content, Panel 0 will show content. If I go to /home/1/content, Panel 0 will stop showing content and Panel 1 will show it instead - not quite what I'm after
EDIT 2:
Ultimately I've given up on this idea for this project and going back to a reactive state string and a series of on-view components with v-if="state === 'this-state'" to manage them. If I find a better way, I may go back and refactor
EDIT 3 (final)
It's been recommended to put each sub component into an <iframe> so they each have an individual URL.
This would require the panels to be a separate app but that's fundamentally what this is doing

Angular 4 + Redux (or ngrx/store) folder and file structure

Ref to Angular official site's style guile of file structure:
https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-06
If I would like to implement Redux (or ngrx/store) to my new Angular 4 project, would it be better to structure my application in this way?
project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
- containers folder hold my smart components
- components folder hold my dumb components
Or follow ngrx/store's example (https://github.com/ngrx/example-app), to structure the application in this way?
project root
├── src/
│ ├── app/
│ │ ├── actions/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── reducers/
│ │ │ ├── hero.js
│ │ │ ├── hero-list.js
│ │ │ └── ......
│ │ ├── components/
│ │ │ ├── heros/
│ │ │ │ ├── hero/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │ ├── ......
Is there any other better structure?

project root
├── src/
│ ├── app/
│ │ ├──stores/
│ │ │ ├── heros/
│ │ │ │ ├── heros.actions.ts|reducer|effects|store.ts
│ │ │ │
│ │ │ │── ..../
│ │ │ │ ├── .....
│ │ │
│ │ ├── containers/
│ │ │ ├── heros/
│ │ │ │ ├── heros.component.ts|html|css|spec.ts
│ │ │ │ │ └── ......
│ │ │
│ │ │
│ │ ├── components/
│ │ │ ├── hero-list/
│ │ │ │ │ ├── hero-list.component.ts|html|css|spec.ts
│ │ │ │ │ └── .......
│ │ │ ├── ....
I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.
Note:
containers folder hold my smart components
components folder hold my dumb components

Web assembly: using emscripten with c++ library

I'm planning on using a c++ library for a web application and web assembly seemed like a good tool for this. I am using emscripten for compiling it.
I got the source code of this open source c++ library and made it using emmake make and emmake make install
After those two calls I had .a libraries in my /usr/local/<name of open source>/lib as well as header files in my /usr/local/<name of open source>/include
I also had an example cpp code that uses this open source library.
The question is: how do I create a html file for this cpp file?
The name of such file is "test.cpp"
and I tried this command, but it cause a lot of "unresolved symbols"
em++ -I/usr/local/<name of open source>/include -L/usr/local/<name of open source>/lib test.cpp -s WASM=1 -o final.html
Then I called emrun to run a web server on my local, but final.html was not displaying what I expected it to display.
Can you please help me?
unresolved symbol warnings in the console

The warnings (errors, actually) show that you have not compiled the included library's cpp files via emscripten. Besides the file test.cpp, you will need to provide every file that your project requires to the em++ command.
Read here for more information on this.
Now coming to the other part of your question, emscripten will only create a JS function for those C++ functions that you "expose". (Obviously the functions called by these exposed functions will also be compiled, rest are stripped off).
A small tutorial on achieving this can be found here
Once your functions are exposed, you call them from your own JS code(example: binding them on JS events)

It looks like your library may have dependencies that are not met (the unresolved symbols). An emscripten build is a cross build, meaning it cannot use your installed system libraries; instead you have to build all the dependencies with the emscripten compiler. Emscripten has the unfortunate behavior that the unresolved symbols are warnings (other linkers consider these as errors) but your program is unlikely to work if you have them.

Emscripten does not treat unresolved symbols as compile errors for various reasons.
When compiling your project, you also need to link the generated .a library.
The -I and -L options you used specify where to look for libraries that you want linked with your program, but it does not specify which libraries you want to link.
You need to add the option -l<name of your library> to your compile command to specify that you want the lib to be linked with your program.

First your open source library needs to be compiled in LLVM bitcode.
In my example I use Botan library. It previously was compiled in LLVM bitcode.
libbotan-2.a is in LLVM bitcode.
My file tree
HelloProject:.
│ hello.cpp
│ hello.js
│ hello.wasm
│ test.html
│
├───include
│ └───botan-2
│ └───botan
│ adler32.h
│ aead.h
│ aes.h
│ alg_id.h
│ argon2.h
│ aria.h
│ asn1_alt_name.h
│ asn1_attribute.h
│ asn1_obj.h
│ asn1_oid.h
│ asn1_print.h
│ asn1_str.h
│ asn1_time.h
│ assert.h
│ atomic.h
│ auto_rng.h
│ base32.h
│ base58.h
│ base64.h
│ basefilt.h
│ bcrypt.h
│ bcrypt_pbkdf.h
│ ber_dec.h
│ bigint.h
│ blake2b.h
│ blinding.h
│ block_cipher.h
│ blowfish.h
│ botan.h
│ bswap.h
│ buf_comp.h
│ buf_filt.h
│ build.h
│ calendar.h
│ camellia.h
│ cascade.h
│ cast128.h
│ cast256.h
│ cbc.h
│ cbc_mac.h
│ ccm.h
│ cecpq1.h
│ certstor.h
│ certstor_flatfile.h
│ certstor_sql.h
│ certstor_system.h
│ cert_status.h
│ cfb.h
│ chacha.h
│ chacha20poly1305.h
│ chacha_rng.h
│ charset.h
│ cipher_filter.h
│ cipher_mode.h
│ cmac.h
│ comb4p.h
│ compiler.h
│ comp_filter.h
│ cpuid.h
│ crc24.h
│ crc32.h
│ credentials_manager.h
│ crl_ent.h
│ cryptobox.h
│ ctr.h
│ curve25519.h
│ curve_gfp.h
│ curve_nistp.h
│ database.h
│ datastor.h
│ data_snk.h
│ data_src.h
│ der_enc.h
│ des.h
│ desx.h
│ dh.h
│ divide.h
│ dlies.h
│ dl_algo.h
│ dl_group.h
│ dsa.h
│ dyn_load.h
│ eax.h
│ ecc_key.h
│ ecdh.h
│ ecdsa.h
│ ecgdsa.h
│ ecies.h
│ eckcdsa.h
│ ec_group.h
│ ed25519.h
│ elgamal.h
│ eme.h
│ eme_pkcs.h
│ eme_raw.h
│ emsa.h
│ emsa1.h
│ emsa_pkcs1.h
│ emsa_raw.h
│ emsa_x931.h
│ entropy_src.h
│ exceptn.h
│ fd_unix.h
│ ffi.h
│ filter.h
│ filters.h
│ fpe_fe1.h
│ gcm.h
│ gf2m_small_m.h
│ ghash.h
│ gmac.h
│ gost_28147.h
│ gost_3410.h
│ gost_3411.h
│ hash.h
│ hash_id.h
│ hex.h
│ hkdf.h
│ hmac.h
│ hmac_drbg.h
│ hotp.h
│ http_util.h
│ idea.h
│ init.h
│ iso9796.h
│ kasumi.h
│ kdf.h
│ kdf1.h
│ kdf1_iso18033.h
│ kdf2.h
│ keccak.h
│ keypair.h
│ key_constraint.h
│ key_filt.h
│ key_spec.h
│ lion.h
│ loadstor.h
│ locking_allocator.h
│ lookup.h
│ mac.h
│ mceies.h
│ mceliece.h
│ md4.h
│ md5.h
│ mdx_hash.h
│ mem_ops.h
│ mgf1.h
│ misty1.h
│ mode_pad.h
│ monty.h
│ mul128.h
│ mutex.h
│ name_constraint.h
│ newhope.h
│ nist_keywrap.h
│ noekeon.h
│ numthry.h
│ oaep.h
│ ocb.h
│ ocsp.h
│ ocsp_types.h
│ ofb.h
│ oids.h
│ p11.h
│ p11_ecc_key.h
│ p11_ecdh.h
│ p11_ecdsa.h
│ p11_module.h
│ p11_object.h
│ p11_randomgenerator.h
│ p11_rsa.h
│ p11_session.h
│ p11_slot.h
│ p11_x509.h
│ package.h
│ parsing.h
│ par_hash.h
│ passhash9.h
│ pbes2.h
│ pbkdf.h
│ pbkdf1.h
│ pbkdf2.h
│ pem.h
│ pgp_s2k.h
│ pipe.h
│ pkcs10.h
│ pkcs11.h
│ pkcs11f.h
│ pkcs11t.h
│ pkcs8.h
│ pk_algs.h
│ pk_keys.h
│ pk_ops.h
│ pk_ops_fwd.h
│ point_gfp.h
│ poly1305.h
│ polyn_gf2m.h
│ pow_mod.h
│ prf_tls.h
│ prf_x942.h
│ psk_db.h
│ psk_db_sql.h
│ pssr.h
│ pubkey.h
│ pwdhash.h
│ rc4.h
│ reducer.h
│ rfc3394.h
│ rfc6979.h
│ rmd160.h
│ rng.h
│ rotate.h
│ rsa.h
│ salsa20.h
│ scan_name.h
│ scrypt.h
│ secmem.h
│ secqueue.h
│ seed.h
│ serpent.h
│ sha160.h
│ sha2_32.h
│ sha2_64.h
│ sha3.h
│ shacal2.h
│ shake.h
│ shake_cipher.h
│ siphash.h
│ siv.h
│ skein_512.h
│ sm2.h
│ sm2_enc.h
│ sm3.h
│ sm4.h
│ sodium.h
│ sp800_108.h
│ sp800_56a.h
│ sp800_56c.h
│ srp6.h
│ stateful_rng.h
│ stl_compatibility.h
│ stream_cipher.h
│ stream_mode.h
│ streebog.h
│ symkey.h
│ sym_algo.h
│ system_rng.h
│ threefish.h
│ threefish_512.h
│ tiger.h
│ tls_alert.h
│ tls_algos.h
│ tls_blocking.h
│ tls_callbacks.h
│ tls_channel.h
│ tls_ciphersuite.h
│ tls_client.h
│ tls_exceptn.h
│ tls_extensions.h
│ tls_handshake_msg.h
│ tls_magic.h
│ tls_messages.h
│ tls_policy.h
│ tls_server.h
│ tls_server_info.h
│ tls_session.h
│ tls_session_manager.h
│ tls_session_manager_sql.h
│ tls_version.h
│ totp.h
│ tss.h
│ twofish.h
│ types.h
│ uuid.h
│ version.h
│ whrlpool.h
│ workfactor.h
│ x509cert.h
│ x509path.h
│ x509self.h
│ x509_ca.h
│ x509_crl.h
│ x509_dn.h
│ x509_ext.h
│ x509_key.h
│ x509_obj.h
│ x919_mac.h
│ xmss.h
│ xmss_address.h
│ xmss_common_ops.h
│ xmss_hash.h
│ xmss_index_registry.h
│ xmss_key_pair.h
│ xmss_parameters.h
│ xmss_privatekey.h
│ xmss_publickey.h
│ xmss_tools.h
│ xmss_wots_parameters.h
│ xmss_wots_privatekey.h
│ xmss_wots_publickey.h
│ xtea.h
│ xts.h
│
└───libs
└───Botan
libbotan-2.a
Compiling
Run command
em++ hello.cpp libs/botan/libbotan-2.a -s WASM=1 -o hello.js -std=c++17 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']" -O3 -I include/botan-2
C++ - hello.cpp
#include <iostream>
#include <vector>
#include <emscripten.h>
#include "botan/sha2_64.h"
#include "botan/base64.h"
#define EXTERNC extern "C"
int main(int argc, char ** argv) {
std::cout<<u8"Hello World from main\n";
}
EXTERNC const char * EMSCRIPTEN_KEEPALIVE GetSha512Hash(const char* data) {
std::cout<< "Received from JS: "<<data << std::endl;
Botan::SHA_512 sha;
std::vector<uint8_t> buffer(data, data + strlen(data));
//std::fread(&buffer[0], 1, buffer.size(), pFile);
return Botan::base64_encode(sha.process(buffer)).c_str();
}
HTML/JS - Test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="hello.js"></script>
<button onclick="native()">click</button>
<script type='text/javascript'>
function native() {
var result = Module.ccall(
'GetSha512Hash', // name of C function
"string", // return type
["string"], // argument types
["Joma"] // arguments
);
console.log("Returned from CPP: " + result);
}
</script>
</body>
</html>
Test WASM in browser
Run command
emrun --browser "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" .\test.html
** Results in browser**

webpack on traditional html js css bundles?

I have different web modules that looks like this:
FileStructure
├───Bundles
│ ├───Bundle1
│ │ └───src
│ │ │ index.html
│ │ │ EntryPoint.js
│ │ │
│ │ └───assets
│ │ ├───css
│ │ │ animate.css
│ │ ├───fonts
│ │ │ Bitter-Bold.otf
│ │ │ Bitter-BoldItalic.otf
│ │ │
│ │ ├───img
│ │ │ │ button-pink.png
│ │ │ │
│ │ │ ├───popup
│ │ │ │ close.png
│ │ │ │
│ │ │ ├───slideshow
│ │ │ │ 1.jpg
│ │ │ │ 2.jpg
│ │ │ │
│ │ │ └───aaa
│ │ │ 1.jpeg
│ │ │
│ │ ├───js
│ │ │ bubble-click.js
│ │ │ bubble.js
│ │ │
│ │ └───video
│ ├───Bundle2
│ │ └───src
│ │ │ index.html
│ │ │ EntryPoint.js
│ │ │
│ │ └───assets
│ │ ├───css
│ │ │ aaa.css
│ │ │
│ │ ├───fonts
│ │ │ Bitter-Bold.otf
│ │ │ Bitter-BoldItalic.otf
│ │ │
│ │ ├───img
│ │ │ ├───a
│ │ │ │ c.png
│ │ │ │
│ │ │ ├───instruction
│ │ │ │ swipe-to-change.gif
│ │ │ │
│ │ │ └───popup
│ │ │ close.png
│ │ │
│ │ ├───js
│ │ │ b.js
Bundle1 and Bundle2 are independent of each other, I'm trying to compile them as bundle1.js and bundle2.js and finally include them together in AllBundles.html and I'm using webpack to make sure that the css class names doesn't clash, javascript works independently, etc, each bundle will expose a activate and deactivate method themselves with their own entrypoint.js:
Entrypoint.js
var mainPage = require('./index.html');
module.exports = {
activate: function() {
return "B1 activated";
},
deactivate: function() {
return "B1 deactivated";
},
}
webpack config:
...
module: {
preLoaders: [{
test: /\.jsx$|\.js$/,
loader: 'eslint-loader',
include: __dirname + '/src/'
}],
loaders: [{
test: /\.jsx?$/,
include: path.join(__dirname, 'src'),
loader: "babel-loader",
exclude: [nodeModulesPath]
}, {
test: /\.scss$/,
include: path.join(__dirname, 'src'),
loader: ExtractTextPlugin.extract('style-loader', 'css!autoprefixer-loader?browsers=last 2 version!sass')
},{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
{ test: /\.html$/, loader: 'html-loader' }
]
}
...
Expected Behaviour
I'm expecting the generated html to convert css classes to have hash code, change css file name, convert javascripts
Actual Behaviour
when I run my webpack command, only the img src link gets converted to hashcodes, the link and script tag remains unchanged.
<link rel="stylesheet" type="text/css" href="assets/css/page-animation.css" />
<link rel="stylesheet" type="text/css" href="assets/css/animate.css" />
<script type="text/javascript" src="assets/js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="assets/js/modernizr.custom.js"></script>
but images:
<img class="img-responsive" src="/public/747289b7348be5e879a1c821cae8bffa.png" />
what went wrong?

UNMET PEER DEPENDENCY generator-karma#>=0.9.0

I am installing version 5.6 of node.js on a CentOS 7 server with generator-angular, and am encountering the following error, in addition to some deprecation warnings:
UNMET PEER DEPENDENCY generator-karma#>=0.9.0
I am following instructions from this tutorial. How can I resolve this error so that npm is able to successfully install generator-angular? Also, are all the deprecation warnings anything to be concerned about? Is there a way to install generator-angular without using deprecated methods?
Here is the terminal output showing the ERROR along with the deprecation warnings:
[root#localhost ~]# npm install -g generator-angular
npm WARN deprecated CSSselect#0.4.1: the module is now available as 'css-select'
npm WARN deprecated CSSwhat#0.4.7: the module is now available as 'css-what'
npm WARN deprecated lodash#2.1.0: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
/usr/lib
├─┬ generator-angular#0.15.1
│ ├─┬ chalk#1.1.1
│ │ ├── ansi-styles#2.1.0
│ │ ├── escape-string-regexp#1.0.4
│ │ ├── has-ansi#2.0.0
│ │ ├── strip-ansi#3.0.0
│ │ └── supports-color#2.0.0
│ ├─┬ wiredep#2.2.2
│ │ ├─┬ bower-config#0.5.2
│ │ │ ├── graceful-fs#2.0.3
│ │ │ ├── mout#0.9.1
│ │ │ ├─┬ optimist#0.6.1
│ │ │ │ ├── minimist#0.0.10
│ │ │ │ └── wordwrap#0.0.3
│ │ │ └── osenv#0.0.3
│ │ ├─┬ chalk#0.5.1
│ │ │ ├── ansi-styles#1.1.0
│ │ │ ├─┬ has-ansi#0.1.0
│ │ │ │ └── ansi-regex#0.2.1
│ │ │ ├── strip-ansi#0.3.0
│ │ │ └── supports-color#0.2.0
│ │ ├─┬ glob#4.5.3
│ │ │ ├─┬ inflight#1.0.4
│ │ │ │ └── wrappy#1.0.1
│ │ │ ├── inherits#2.0.1
│ │ │ ├─┬ minimatch#2.0.10
│ │ │ │ └─┬ brace-expansion#1.1.3
│ │ │ │ ├── balanced-match#0.3.0
│ │ │ │ └── concat-map#0.0.1
│ │ │ └── once#1.3.3
│ │ ├── lodash#2.4.2
│ │ ├── minimist#1.2.0
│ │ ├── propprop#0.3.0
│ │ └─┬ through2#0.6.5
│ │ ├─┬ readable-stream#1.0.33
│ │ │ ├── core-util-is#1.0.2
│ │ │ ├── isarray#0.0.1
│ │ │ └── string_decoder#0.10.31
│ │ └── xtend#4.0.1
│ ├─┬ yeoman-generator#0.16.0
│ │ ├── async#0.2.10
│ │ ├─┬ chalk#0.4.0
│ │ │ ├── ansi-styles#1.0.0
│ │ │ ├── has-color#0.1.7
│ │ │ └── strip-ansi#0.1.1
│ │ ├─┬ cheerio#0.13.1
│ │ │ ├─┬ CSSselect#0.4.1
│ │ │ │ ├── CSSwhat#0.4.7
│ │ │ │ └── domutils#1.4.3
│ │ │ ├── entities#0.5.0
│ │ │ ├─┬ htmlparser2#3.4.0
│ │ │ │ ├── domelementtype#1.3.0
│ │ │ │ ├── domhandler#2.2.1
│ │ │ │ ├── domutils#1.3.0
│ │ │ │ └── readable-stream#1.1.13
│ │ │ └── underscore#1.5.2
│ │ ├─┬ class-extend#0.1.2
│ │ │ └── object-assign#2.1.1
│ │ ├── dargs#0.1.0
│ │ ├── debug#0.7.4
│ │ ├── diff#1.0.8
│ │ ├─┬ download#0.1.19
│ │ │ ├─┬ decompress#0.2.5
│ │ │ │ ├── adm-zip#0.4.7
│ │ │ │ ├─┬ ext-name#1.0.1
│ │ │ │ │ └─┬ ext-list#0.2.0
│ │ │ │ │ └─┬ got#0.2.0
│ │ │ │ │ └── object-assign#0.3.1
│ │ │ │ ├─┬ stream-combiner#0.0.4
│ │ │ │ │ └── duplexer#0.1.1
│ │ │ │ ├─┬ tar#0.1.20
│ │ │ │ │ ├── block-stream#0.0.8
│ │ │ │ │ └─┬ fstream#0.1.31
│ │ │ │ │ ├── graceful-fs#3.0.8
│ │ │ │ │ └─┬ mkdirp#0.5.1
│ │ │ │ │ └── minimist#0.0.8
│ │ │ │ └─┬ tempfile#0.1.3
│ │ │ │ └── uuid#1.4.2
│ │ │ ├── each-async#0.1.3
│ │ │ ├── get-stdin#0.1.0
│ │ │ ├── get-urls#0.1.2
│ │ │ ├─┬ nopt#2.2.1
│ │ │ │ └── abbrev#1.0.7
│ │ │ ├─┬ request#2.69.0
│ │ │ │ ├── aws-sign2#0.6.0
│ │ │ │ ├── aws4#1.2.1
│ │ │ │ ├─┬ bl#1.0.3
│ │ │ │ │ └─┬ readable-stream#2.0.5
│ │ │ │ │ ├── process-nextick-args#1.0.6
│ │ │ │ │ └── util-deprecate#1.0.2
│ │ │ │ ├── caseless#0.11.0
│ │ │ │ ├─┬ combined-stream#1.0.5
│ │ │ │ │ └── delayed-stream#1.0.0
│ │ │ │ ├── extend#3.0.0
│ │ │ │ ├── forever-agent#0.6.1
│ │ │ │ ├─┬ form-data#1.0.0-rc3
│ │ │ │ │ └── async#1.5.2
│ │ │ │ ├─┬ har-validator#2.0.6
│ │ │ │ │ ├─┬ commander#2.9.0
│ │ │ │ │ │ └── graceful-readlink#1.0.1
│ │ │ │ │ ├─┬ is-my-json-valid#2.12.4
│ │ │ │ │ │ ├── generate-function#2.0.0
│ │ │ │ │ │ ├─┬ generate-object-property#1.2.0
│ │ │ │ │ │ │ └── is-property#1.0.2
│ │ │ │ │ │ └── jsonpointer#2.0.0
│ │ │ │ │ └─┬ pinkie-promise#2.0.0
npm WARN generator-angular#0.15.1 requires a peer of generator-karma#>=0.9.0 but none was installed.
│ │ │ │ ├─┬ hawk#3.1.3
│ │ │ │ │ ├── boom#2.10.1
│ │ │ │ │ ├── cryptiles#2.0.5
│ │ │ │ │ ├── hoek#2.16.3
│ │ │ │ │ └── sntp#1.0.9
│ │ │ │ ├─┬ http-signature#1.1.1
│ │ │ │ │ ├── assert-plus#0.2.0
│ │ │ │ │ ├─┬ jsprim#1.2.2
│ │ │ │ │ │ ├── extsprintf#1.0.2
│ │ │ │ │ │ ├── json-schema#0.2.2
│ │ │ │ │ │ └── verror#1.3.6
│ │ │ │ │ └─┬ sshpk#1.7.4
│ │ │ │ │ ├── asn1#0.2.3
│ │ │ │ │ ├─┬ dashdash#1.13.0
│ │ │ │ │ │ └── assert-plus#1.0.0
│ │ │ │ │ ├── ecc-jsbn#0.1.1
│ │ │ │ │ ├── jodid25519#1.0.2
│ │ │ │ │ ├── jsbn#0.1.0
│ │ │ │ │ └── tweetnacl#0.13.3
│ │ │ │ ├── is-typedarray#1.0.0
│ │ │ │ ├── isstream#0.1.2
│ │ │ │ ├─┬ mime-types#2.1.9
│ │ │ │ │ └── mime-db#1.21.0
│ │ │ │ ├── oauth-sign#0.8.1
│ │ │ │ ├── qs#6.0.2
│ │ │ │ ├── stringstream#0.0.5
│ │ │ │ ├── tough-cookie#2.2.1
│ │ │ │ └── tunnel-agent#0.4.2
│ │ │ └─┬ through2#0.4.2
│ │ │ └─┬ xtend#2.1.2
│ │ │ └── object-keys#0.4.0
│ │ ├─┬ file-utils#0.1.5
│ │ │ ├─┬ glob#3.2.11
│ │ │ │ └── minimatch#0.3.0
│ │ │ ├── isbinaryfile#0.1.9
│ │ │ ├── lodash#2.1.0
│ │ │ └─┬ minimatch#0.2.14
│ │ │ ├── lru-cache#2.7.3
│ │ │ └── sigmund#1.0.1
│ │ ├─┬ findup-sync#0.1.3
│ │ │ └─┬ glob#3.2.11
│ │ │ └── minimatch#0.3.0
│ │ ├─┬ glob#3.2.11
│ │ │ └── minimatch#0.3.0
│ │ ├── iconv-lite#0.2.11
│ │ ├─┬ inquirer#0.4.1
│ │ │ ├─┬ cli-color#0.2.3
│ │ │ │ ├── es5-ext#0.9.2
│ │ │ │ └─┬ memoizee#0.2.6
│ │ │ │ ├── event-emitter#0.2.2
│ │ │ │ └── next-tick#0.1.0
│ │ │ ├── mute-stream#0.0.4
│ │ │ ├─┬ readline2#0.1.1
│ │ │ │ └─┬ strip-ansi#2.0.1
│ │ │ │ └── ansi-regex#1.1.1
│ │ │ └── through#2.3.8
│ │ ├── isbinaryfile#2.0.4
│ │ ├── mime#1.2.11
│ │ ├── mkdirp#0.3.5
│ │ ├─┬ request#2.30.0
│ │ │ ├── aws-sign2#0.5.0
│ │ │ ├── forever-agent#0.5.2
│ │ │ ├─┬ form-data#0.1.4
│ │ │ │ ├── async#0.9.2
│ │ │ │ └─┬ combined-stream#0.0.7
│ │ │ │ └── delayed-stream#0.0.5
│ │ │ ├─┬ hawk#1.0.0
│ │ │ │ ├── boom#0.4.2
│ │ │ │ ├── cryptiles#0.2.2
│ │ │ │ ├── hoek#0.9.1
│ │ │ │ └── sntp#0.2.4
│ │ │ ├─┬ http-signature#0.10.1
│ │ │ │ ├── asn1#0.1.11
│ │ │ │ ├── assert-plus#0.1.5
│ │ │ │ └── ctype#0.5.3
│ │ │ ├── json-stringify-safe#5.0.1
│ │ │ ├── node-uuid#1.4.7
│ │ │ ├── oauth-sign#0.3.0
│ │ │ ├── qs#0.6.6
│ │ │ ├─┬ tough-cookie#0.9.15
│ │ │ │ └── punycode#1.4.0
│ │ │ └── tunnel-agent#0.3.0
│ │ ├── rimraf#2.2.8
│ │ ├── shelljs#0.2.6
│ │ ├── text-table#0.2.0
│ │ └── underscore.string#2.3.3
│ └─┬ yosay#1.1.0
│ ├── ansi-regex#2.0.0
│ ├── pad-component#0.0.1
│ ├─┬ repeating#2.0.0
│ │ └─┬ is-finite#1.0.1
│ │ └── number-is-nan#1.0.0
│ ├─┬ string-width#1.0.1
│ │ ├── code-point-at#1.0.0
│ │ └── is-fullwidth-code-point#1.0.0
│ ├─┬ taketalk#1.0.0
│ │ └── get-stdin#4.0.1
│ └── word-wrap#1.1.0
└── UNMET PEER DEPENDENCY generator-karma#>=0.9.0
[root#localhost ~]#

You must install all the components on one line, as reported here.
npm install -g grunt-cli bower yo generator-karma generator-angular