petebacondarwin / ng1-component-router-demo Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Win10 64bit
node version is 5.5.0
lite-server is 2.1.0
Ello, I ran
npm install
then npm start
and on npm start got the following.
λ npm start
> [email protected] start C:\Users\terra\Documents\GitHub\ng1-component-router-demo
> lite-server
Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync options **
{ injectChanges: false,
files: [ './**/*.{html,htm,css,js}' ],
server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3002
External: http://10.164.161.47:3002
--------------------------------------
UI: http://localhost:3001
UI External: http://10.164.161.47:3001
--------------------------------------
[BS] Serving files from: ./
[BS] Watching files...
events.js:154
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::3001
at Object.exports._errnoException (util.js:856:11)
at exports._exceptionWithHostPort (util.js:879:20)
at Server._listen2 (net.js:1236:14)
at listen (net.js:1272:10)
at Server.listen (net.js:1368:5)
at Object.module.exports.startServer [as fn] (C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\browser-sync-ui\lib\async.js:116:39)
at C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\browser-sync-ui\lib\UI.js:184:14
at iterate (C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\async-each-series\index.js:8:5)
at C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\async-each-series\index.js:16:16
at C:\Users\terra\Documents\GitHub\ng1-component-router-demo\node_modules\browser-sync-ui\lib\UI.js:192:13
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v5.5.0
npm ERR! npm v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `lite-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'lite-server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the component-router-angular-1 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! lite-server
npm ERR! You can get their info via:
npm ERR! npm owner ls component-router-angular-1
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\terra\Documents\GitHub\ng1-component-router-demo\npm-debug.log
Documentation states that when you return a promise from the $routerOnActivate function in a component, the activation of the route is delayed until the promise is resolved. However, it seems that it doesn't really work that way.
In my fork (https://github.com/bvklingeren/ng1-component-router-demo) I have added code in heroes.js (lines 16 and 85-88) that adds a controller function call to the heroList template. I would have expected that the function notify() would not have been called before activation of the route. But if you add a timeout to the getHeroes() function in the HeroService (line 52-54) and run the app and navigate to the Hero list, it shows (look in you console) that the notify() function is indeed called before the heroes list is resolved (the 'Is notified' message is printed before the 'Got heroes' message).
Does anyone experience the same issues, or am I misunderstanding the intentions of the code/documentation?
Is there some documentation somewhere ?
I can pass hardcoded data to component
$routeConfig: [{
path: '/record/:id/...',
component: 'record',
name: 'Record',
data: 'pass to component'
}]
The problem I encountered is that $routeConfig is run before controllers, canActivate etc. Would be useful to pass url param from parent route or some object with data required for that component, is there a way to do this?
I keep getting this issue when running the demo app. I double checked several times to make sure I'm using the router js from this demo package but the error is still there?
Perhaps the router is not ready yet and I should stick to angular ui router for now?
Thanks for putting this demo out, helped solve many issues.
But there is something I've stumbled upon and though maybe you can help resolve.
if you change template to templateUrl in a code below then controller events like $routerOnActivate() stop triggering.
https://github.com/petebacondarwin/ng1-component-router-demo/blob/master/app/crisis-center.js
.component('crisisList', {
template:
'<ul>\n' +
' <li ng-repeat="crisis in $ctrl.crises"\n' +
' ng-class="{ selected: $ctrl.isSelected(crisis) }"\n' +
' ng-click="$ctrl.onSelect(crisis)">\n' +
// ' >' +
// ' <a ng-link="[\'CrisisDetail\', { id: crisis.id }]">\n' +
' <span class="badge">{{crisis.id}}</span> {{crisis.name}}\n' +
// ' </a>' +
' </li>\n' +
'</ul>\n',
bindings: { router: '=' },
controller: CrisisListComponent,
$canActivate: function($nextInstruction, $prevInstruction) {
console.log('$canActivate', arguments);
}
})
Running the application on http://localhost:3000/ results in page with "Component Router" and this additional html comment in source code:
<!-- ngOutlet: undefined -->
Seems like ng-outlet is not working correctly.
I have module component which has List and Record routes using respective components called list and record.
module.js
$routeConfig: [
{
path: '/list',
component: 'list',
name: 'List',
useAsDefault: true
},
{
path: '/record/:id/...',
component: 'record',
name: 'Record'
}
]
/module/Installations/list/
/module/Installations/record/9c3dcf35-5da9-c7f2-a4e8-56bc516c6097/details
List just shows list of modules
while Record shows a list of tabs for that module, default tab is Details which uses component details and shows module fields in a form, other tabs are related modules and I need to show them in a list so I figure I use the same list component to do that.
record.js
$routeConfig: [
{path: '/details', name: 'DetailsTab', component: 'detailsComponent', useAsDefault: true},
{path: '/:tab', name: 'ListTab', component: 'list'}
],
In a list component template I have links to Record, I want to use them and be able to navigate to Module/:moduleName/record/:id/details which worked fine using $router.navigate(['Record', { id: module.id }])
in list component controller while in /Module/List, but once it is in /Module/Record/ListTab the link stopped working throwing Component "Root" has no route config.
I am probably missing something obvious here, hoped maybe you can help out. thanks.
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.