Ngx-admin: Help needed for App use

Created on 21 Aug 2016  路  7Comments  路  Source: akveo/ngx-admin

I have installed theme and it runs correctly in my local machine.
But biggest nightmare, how to mould my current app pages (2,3), because i am novice.
Biggest problem i am facing with routing (How to?).
this is my component.

I have understanding about menu navigation. but for exampple on click of add button i need to redirect to new Add page.

_material.component.ts_*
import {Component, OnInit} from 'angular2/core';
import {RouterLink} from 'angular2/router';
import {NgFor} from 'angular2/common';
import {SpinnerComponent} from '../shared/spinner.component';

import {MaterialService} from './material.service'

@Component({
templateUrl: 'app/materials/material.component.html',
providers: [MaterialService],
directives: [RouterLink, NgFor]
})

export class MaterialComponent implements OnInit {
materials: any[];
public visible: boolean;
constructor(private _service: MaterialService) {

}

ngOnInit() {
    this._service.getMaterials()
        .subscribe(materials => this.materials = materials)
}

}

Following is main app file.
app.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'

import {ContactComponent} from './contact.component'
import {HomeComponent}from './home.component';
import {NavbarComponent} from './navbar.component';
import {PostsComponent} from './posts/posts.component';
import {UserComponent} from './user/user.component';
import {UserFormComponent} from './user/user-form.component';

import {MaterialComponent} from './materials/material.component'
import {MaterialFormComponent} from './materials/material-form.component';

@RouteConfig([
{ path: '/', name: 'Home', component: HomeComponent },
{ path: 'users', name: 'Users', component: UserComponent },
{ path: '/user/adduser', name: 'AddUser', component: UserFormComponent },
{ path: 'contacts', name: 'Contacts', component: ContactComponent },
{ path: 'posts', name: 'Posts', component: PostsComponent },

{ path: 'materials', name: 'Materials', component: MaterialComponent },
{ path: '/materials/addmaterial', name: 'AddMaterial', component: MaterialFormComponent },
{ path: '/materials/:id', name: 'EditMaterial', component: MaterialFormComponent },
{ path: '/*other', name: 'Other', redirectTo: ['Home'] }

])

@Component({
selector: 'my-app',
template: <navbar></navbar> <div class="container"> <router-outlet></router-outlet> </div>,
directives: [NavbarComponent, ROUTER_DIRECTIVES]
})
export class AppComponent {

}

All 7 comments

Hi @sanju99785, have you checked out angular 2 routing documentation? Please take a look at this https://angular.io/docs/ts/latest/tutorial/toh-pt5.html and this https://angular.io/docs/ts/latest/guide/router.html articles which describe the navigation in angular in detail.

sure will give a try(tries) and will update

hi there. i'm developer. and i want use blur-Admin mix with asp.net mvc.
i locate "dev-release" folder in my project.and load all files.
but it doesn't runs correctly in my local machine.

can you help me?

Hey @jbabaei, this is ng2-admin repo, please post your issue to the Blur Admin repository. Thanks.

oh.i'm sorry.thanks @nnixaa

Hey @sanju99785, have you resolved your issue? Are we good to close this or do you need any assistance?

@nnixaa : thanks..
I can make pages as defined on Documentation. But i am not able to find simple routing as following.

RouterConfig = [
{ path: '', redirectTo: 'home', terminal: true },
{ path: './home', component: HomeComponent },
{ path: './login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent }
];

I am aware of this type of simple routing.
But as i went through theme (Akveo) i am confused. How routing is working. I have also checked "pages.routes.ts" file.
Also unable to find how you guys make url with "#" . Can i make it simple??

May be I also need to go through deep routing concept of angular 2.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

maxlein picture maxlein  路  3Comments

yanyim picture yanyim  路  3Comments

dreamerleolioa picture dreamerleolioa  路  4Comments

igorls picture igorls  路  3Comments

AZm1n picture AZm1n  路  4Comments