123 lines
7.3 KiB
HTML
123 lines
7.3 KiB
HTML
<!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">
|
||
<title>BlurAdmin documentation - Create New Page</title>
|
||
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="Ramblings of an immor(t)al demigod">
|
||
<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&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
|
||
<link rel="stylesheet" href="/blur-admin/css/main.css">
|
||
<link rel="shortcut icon" href="/blur-admin/images/favicon.png"><!-- Google Tag Manager -->
|
||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||
})(window,document,'script','dataLayer','GTM-K8MXX5F');</script>
|
||
<!-- End Google Tag Manager -->
|
||
</head>
|
||
<body>
|
||
<!-- Google Tag Manager (noscript) -->
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K8MXX5F"
|
||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||
<!-- End Google Tag Manager (noscript) -->
|
||
<div class="container">
|
||
<div class="nav-main">
|
||
<div class="wrap"><a href="/blur-admin/" class="nav-home"><img src="/blur-admin/images/blur-admin-logo.png" width="36" height="36" class="nav-logo"> <span class="blur-label">Blur</span>Admin</a>
|
||
<ul class="nav-site nav-site-internal">
|
||
<li><a href="/blur-admin/">Home</a></li>
|
||
<li><a href="/blur-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">
|
||
<h3>Quick Start</h3>
|
||
<ul>
|
||
<li><a href="/blur-admin/articles/001-getting-started/">Getting Started</a></li>
|
||
<li><a href="/blur-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h3>Customization</h3>
|
||
<ul>
|
||
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||
<li><a href="/blur-admin/articles/012-project-structure/">Project Structure</a></li>
|
||
<li><a href="/blur-admin/articles/013-create-new-page/" class="active">Create New Page</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h3>Components</h3>
|
||
<ul>
|
||
<li><a href="/blur-admin/articles/051-sidebar/">Sidebar</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h3>Other</h3>
|
||
<ul>
|
||
<li><a href="/blur-admin/articles/091-downloads/">Downloads</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="inner-content">
|
||
<h1>Create New Page</h1>
|
||
<div class="subHeader"></div><p>Blur admin uses <a href="https://github.com/angular-ui/ui-router">Angular <span class="caps">UI</span> router</a> for navigation.
|
||
That means to create new page you need to basically configure <code>ui-router</code> state.</p>
|
||
<p>We strongly recommend to follow pages structure in your application.
|
||
If it doesn’t fit your needs please create a GitHub issue and tell us why. We would be glad to<span class="widont"> </span>discuss. </p>
|
||
<p>Also we recommend to put pages to separate modules.
|
||
This will allow you to easily switch off some pages in the future if<span class="widont"> </span>needed.</p>
|
||
<h2 id="page-creation-example">Page creation example</h2>
|
||
<p>0) Let’s assume we want to create a blank page with title ‘My New<span class="widont"> </span>Page’</p>
|
||
<p>1) Let’s Create a new directory to contain our new page inside of <code>src/app/pages</code>. Let’s call this directory <code>myNewPage</code>.</p>
|
||
<p>2) Then let’s create blank angular module to contain our page called ‘myNewPage.module.js’ inside of <code>src/app/pages/myNewPage</code>:</p>
|
||
<pre><code class="lang-javascript">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
|
||
<span class="pi"> 'use strict'</span>;
|
||
|
||
angular.module(<span class="string">'BlurAdmin.pages.myNewPage'</span>, [])
|
||
.config(routeConfig);
|
||
|
||
<span class="comment">/** @ngInject */</span>
|
||
<span class="function"><span class="keyword">function</span> <span class="title">routeConfig</span>(<span class="params"></span>) </span>{
|
||
|
||
}
|
||
|
||
})();
|
||
</code></pre>
|
||
<p>3) Then let’s create empty html file called <code>my-new-page.html</code> inside of <code>src/app/pages/myNewPage</code>.</p>
|
||
<p>4) Lastly let’s create ui router state for this page. To do this we need to modify module.js file we created on step<span class="widont"> </span>2:</p>
|
||
<pre><code class="lang-javascript">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{
|
||
<span class="pi"> 'use strict'</span>;
|
||
|
||
angular.module(<span class="string">'BlurAdmin.pages.myNewPage'</span>, [])
|
||
.config(routeConfig);
|
||
|
||
<span class="comment">/** @ngInject */</span>
|
||
<span class="function"><span class="keyword">function</span> <span class="title">routeConfig</span>(<span class="params">$stateProvider</span>) </span>{
|
||
$stateProvider
|
||
.state(<span class="string">'myNewPage'</span>, {
|
||
url: <span class="string">'/myNewPage'</span>,
|
||
templateUrl: <span class="string">'app/pages/myNewPage/my-new-page.html'</span>,
|
||
title: <span class="string">'My New Page'</span>,
|
||
sidebarMeta: {
|
||
order: <span class="number">800</span>,
|
||
},
|
||
});
|
||
}
|
||
|
||
})();
|
||
</code></pre>
|
||
<p>That’s it! Your can now open your new page either from sidebar or through hash<span class="widont"> </span><span class="caps">URL</span>.</p>
|
||
|
||
</div>
|
||
</section>
|
||
<footer class="wrap">
|
||
<div class="left">Powered by Angular, Bootstrap, Gulp and 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/blur-admin"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
||
</body>
|
||
</html> |