Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-19 17:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
ngx-admin/articles/013-create-new-page/index.html

170 lines
9.7 KiB
HTML
Raw Normal View History

Updates
2016-05-25 13:42:47 +03:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
Updates
2016-07-12 16:34:59 +03:00
<title>ng2-admin documentation - Create New Page</title>
Updates
2016-05-25 13:42:47 +03:00
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css">
<link rel="stylesheet" href="/ng2-admin/css/main.css">
<link rel="shortcut icon" href="/ng2-admin/images/favicon.png">
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap"><a href="/ng2-admin/" class="nav-home"><img src="/ng2-admin/images/logo.png" width="24" height="24" class="nav-logo">&nbsp;<span class="blur-label">ng2-</span>admin</a>
<ul class="nav-site nav-site-internal">
<li><a href="/ng2-admin/">Home</a></li>
<li><a href="/ng2-admin/articles/001-getting-started/" class="active">Docs</a></li>
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:contact@akveo.com">contact@akveo.com</a></span>
</div>
</div>
<section class="content wrap documentationContent">
<div class="nav-docs">
<div class="nav-docs section">
Updates
2016-07-28 17:26:09 +03:00
<h5>Quick Start</h5>
Updates
2016-05-25 13:42:47 +03:00
<ul>
<li><a href="/ng2-admin/articles/001-getting-started/">Getting Started</a></li>
<li><a href="/ng2-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
</ul>
</div>
<div class="nav-docs section">
Updates
2016-07-28 17:26:09 +03:00
<h5>Customization</h5>
Updates
2016-05-25 13:42:47 +03:00
<ul>
<li><a href="/ng2-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
<li><a href="/ng2-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
<li><a href="/ng2-admin/articles/012-project-structure/">Project Structure</a></li>
<li><a href="/ng2-admin/articles/013-create-new-page/" class="active">Create New Page</a></li>
</ul>
</div>
<div class="nav-docs section">
Updates
2016-07-28 17:26:09 +03:00
<h5>Components</h5>
Updates
2016-05-25 13:42:47 +03:00
<ul>
<li><a href="/ng2-admin/articles/016-spinner/">Theme Spinner</a></li>
<li><a href="/ng2-admin/articles/015-sidebar/">Sidebar</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Create New Page</h1>
Updates
2017-02-28 14:37:20 +03:00
<div class="subHeader"></div><p>ng2-admin uses <a href="https://angular.io/docs/ts/latest/guide/router.html">Angular 2 Component Router</a> for<span class="widont">&nbsp;</span>navigation.</p>
Updates
2016-09-20 11:36:39 +03:00
<p>We strongly recommend to follow this page structure in your application.
Updates
2017-02-28 14:37:20 +03:00
If it does not fit your needs please create a GitHub issue and tell us why. We would be glad to<span class="widont">&nbsp;</span>discuss. </p>
<p>Basically any page is just a common Angular 2 Component with a route defined for<span class="widont">&nbsp;</span>it.</p>
<h2 id="let-s-create-a-blank-page-in-6-easy-steps">Let’s create a blank page in 6 easy<span class="widont">&nbsp;</span>steps</h2>
Updates
2016-10-13 16:27:42 +03:00
<p>1) Create a new directory for our new page inside of <code>src/app/pages</code>. We can call the directory <code>new</code>.
Updates
2016-05-25 14:35:57 +03:00
<br><br></p>
Updates
2016-10-13 16:27:42 +03:00
<p>2) Then let’s create a blank angular 2 component for our page called ‘new.component.ts’ inside of <code>src/app/pages/new</code>:</p>
Updates
2016-05-25 14:35:57 +03:00
<pre><code class="lang-javascript"><span class="keyword">import</span> {Component} <span class="keyword">from</span> <span class="string">'@angular/core'</span>;
Updates
2016-05-25 13:42:47 +03:00
Updates
2016-05-25 14:35:57 +03:00
@Component({
selector: <span class="string">'new'</span>,
template: <span class="string">`&lt;strong&gt;My page content here&lt;/strong&gt;`</span>
})
Updates
2016-10-13 16:27:42 +03:00
<span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">NewComponent</span> </span>{
Updates
2017-02-28 14:37:20 +03:00
constructor() {}
Updates
2016-05-25 14:35:57 +03:00
}
Updates
2016-05-25 13:42:47 +03:00
</code></pre>
Updates
2016-09-20 11:36:39 +03:00
<p>This will create a simple Angular 2 component. For more detail please check out <a href="https://angular.io/docs/ts/latest/guide/displaying-data.html">official Angular 2 documentation</a>.
Updates
2016-05-25 14:35:57 +03:00
<br><br></p>
Updates
2016-10-13 16:27:42 +03:00
<p>3) After that we should create our component routing called <code>new.routing.ts</code> in the <code>new</code> directory.</p>
<pre><code class="lang-javascript"><span class="keyword">import</span> { Routes, RouterModule } <span class="keyword">from</span> <span class="string">'@angular/router'</span>;
<span class="keyword">import</span> { NewComponent } <span class="keyword">from</span> <span class="string">'./new.component'</span>;
Updates
2016-07-12 16:34:59 +03:00
Updates
2016-10-13 16:27:42 +03:00
<span class="keyword">const</span> routes: Routes = [
{
path: <span class="string">''</span>,
component: NewComponent
}
];
<span class="keyword">export</span> <span class="keyword">const</span> routing = RouterModule.forChild(routes);
</code></pre>
<p><br></p>
Updates
2017-02-28 14:37:20 +03:00
<p>4) And now we should create <code>new.module.ts</code> in <code>src/app/pages/new</code> directory and import <code>new.component.ts</code> and <code>new.routing.ts</code> in it.</p>
Updates
2016-10-13 16:27:42 +03:00
<pre><code class="lang-javascript"><span class="keyword">import</span> { NgModule } <span class="keyword">from</span> <span class="string">'@angular/core'</span>;
<span class="keyword">import</span> { CommonModule } <span class="keyword">from</span> <span class="string">'@angular/common'</span>;
<span class="keyword">import</span> { NewComponent } <span class="keyword">from</span> <span class="string">'./new.component'</span>;
<span class="keyword">import</span> { routing } <span class="keyword">from</span> <span class="string">'./new.routing'</span>;
Updates
2016-07-12 16:34:59 +03:00
Updates
2016-10-13 16:27:42 +03:00
@NgModule({
imports: [
CommonModule,
routing
],
declarations: [
NewComponent
]
})
Updates
2017-02-28 14:37:20 +03:00
<span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">NewModule</span> </span>{}
Updates
2016-10-13 16:27:42 +03:00
</code></pre>
<p><br></p>
<p>5) The penultimate thing we need to do is to declare a route in <code>src/app/pages/pages.menu.ts</code>.
Updates
2017-02-28 14:37:20 +03:00
Typically all pages are children of the <code>/pages</code> route and defined under the <code>children</code> property of the root <code>pages</code> route like<span class="widont">&nbsp;</span>this:</p>
Updates
2016-10-13 16:27:42 +03:00
<pre><code class="lang-javascript"><span class="keyword">export</span> <span class="keyword">const</span> PAGES_MENU = [
Updates
2016-05-25 14:35:57 +03:00
{
Updates
2016-07-12 16:34:59 +03:00
path: <span class="string">'pages'</span>,
children: [
{
path: <span class="string">'new'</span>, <span class="comment">// path for our page</span>
data: { <span class="comment">// custom menu declaration</span>
menu: {
title: <span class="string">'New Page'</span>, <span class="comment">// menu title</span>
icon: <span class="string">'ion-android-home'</span>, <span class="comment">// menu icon</span>
Updates
2016-10-19 20:11:35 +03:00
pathMatch: <span class="string">'prefix'</span>, <span class="comment">// use it if item children not displayed in menu</span>
Updates
2016-07-12 16:34:59 +03:00
selected: <span class="literal">false</span>,
expanded: <span class="literal">false</span>,
order: <span class="number">0</span>
}
}
},
{
path: <span class="string">'dashboard'</span>,
data: {
menu: {
title: <span class="string">'Dashboard'</span>,
icon: <span class="string">'ion-android-home'</span>,
selected: <span class="literal">false</span>,
expanded: <span class="literal">false</span>,
order: <span class="number">0</span>
}
}
}
Updates
2016-10-13 16:27:42 +03:00
}
}
]
</code></pre>
Updates
2016-10-19 20:11:35 +03:00
<p>If you’d like to highlight menu item when current <span class="caps">URL</span> path partially match the menu item
path - use pathMatch: ‘prefix’. In this case if the menu item has no children in the menu and
you navigated to some child route - the item will be highlighted.
<br><br></p>
Updates
2017-02-28 14:37:20 +03:00
<p>6) And in the end let’s import our component in <code>src/app/pages/pages.routing.ts</code> like this:</p>
Updates
2016-10-13 16:27:42 +03:00
<pre><code class="lang-javascript"><span class="keyword">const</span> routes: Routes = [
{
path: <span class="string">'pages'</span>,
component: Pages,
children: [
{ path: <span class="string">''</span>, redirectTo: <span class="string">'dashboard'</span>, pathMatch: <span class="string">'full'</span> },
Updates
2017-02-28 14:37:20 +03:00
{ path: <span class="string">'dashboard'</span>, loadChildren: <span class="string">'app/pages/dashboard/dashboard.module#DashboardModule'</span> },
{ path: <span class="string">'new'</span>, loadChildren: <span class="string">'app/pages/new/new.module#NewModule'</span> }
Updates
2016-07-12 16:34:59 +03:00
]
Updates
2016-05-25 13:42:47 +03:00
}
Updates
2016-07-12 16:34:59 +03:00
];
Updates
2016-05-25 13:42:47 +03:00
</code></pre>
Updates
2016-10-13 16:27:42 +03:00
<p><br></p>
Updates
2016-09-20 11:36:39 +03:00
<p>And that’s it! Now your page is available by the following this url <a href="http://localhost:3000/#/pages/new">http://localhost:3000/#/pages/new</a>.
Updates
2016-10-13 16:27:42 +03:00
Plus, your page is registered inside the sidebar menu. If you don’t want to have a link
in the menu - just remove the <code>menu</code> declaration from the <code>pages.menu.ts</code> file.</p>
Updates
2016-05-25 13:42:47 +03:00
</div>
</section>
<footer class="wrap">
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
<div class="right">© 2015–2016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
</footer>
</div><a href="https://github.com/akveo/ng2-admin" title="Star &amp; Fork on GitHub" class="github-fork-ribbon"></a>
</body>
</html>
Reference in a new issue Copy permalink