diff --git a/articles/001-getting-started/index.html b/articles/001-getting-started/index.html index 0f2651f0..a343ce07 100644 --- a/articles/001-getting-started/index.html +++ b/articles/001-getting-started/index.html @@ -51,7 +51,7 @@

Getting Started

What is ng2-admin?

-

ng2-admin is a front-end Admin Dashboard template based on Angular 2, Bootstrap 4 and Webpack. That means all the +

ng2-admin is a front-end Admin Dashboard template based on Angular, Bootstrap 4 and Angular CLI. That means all the data you can see on graphs, charts and tables is mocked in Javascript so you can use the backend of your choice with no limitations.

How can it help me?

@@ -60,12 +60,12 @@ backend of your choice with no limitations.

ecosystem for building production-ready application or prototypes.

Frameworks like Bootstrap provide a number of components, but usually it’s not enough to build a real-world app. This template comes with lots of popular UI components with a unified color scheme, -plus it is based on a modern Angular 2 framework and has a flexible component based structure.

-

You can also use ng2-admin for the purpose of learning Angular 2.

+plus it is based on a modern Angular framework and has a flexible component based structure.

+

You can also use ng2-admin for the purpose of learning Angular.

List of features

diff --git a/articles/002-installation-guidelines/index.html b/articles/002-installation-guidelines/index.html index 83d51610..f913b578 100644 --- a/articles/002-installation-guidelines/index.html +++ b/articles/002-installation-guidelines/index.html @@ -59,7 +59,7 @@ The following instructions allow you to run a local copy on yourgit
  • Download and install nodejs https://nodejs.org
    • -

    Note: Make sure you have Node version >= 4.0 and NPM >= 3

    +

    Note: Make sure you have Node version >= 6.0 and NPM >= 3

    Clone repository and install dependencies

    You will need to clone the source code of ng2-admin GitHub repository:

    git clone https://github.com/akveo/ng2-admin.git
@@ -68,26 +68,32 @@ The following instructions allow you to run a local copy on yourcd ng2-admin
 npm install
    +

    or

    +
    cd ng2-admin
+yarn
+

    This will setup a working copy of ng2-admin on your local machine.

    Running local copy

    To run a local copy in development mode, execute:

    npm start
    -

    Go to http://0.0.0.0:3000 or http://localhost:3000 in your browser.

    +

    Go to http://0.0.0.0:4200 or http://localhost:4200 in your browser.

    To run the local copy in production mode and build the sources, execute:

    -
    npm run prebuild:prod && npm run build:prod && npm run server:prod
+
    npm run start:prod
+
    
+
    or in AOT mode
    
+
    npm run start:prod:aot
 
    
 
    This will clear up your dist folder (where release files are located), generate a release build and start the 
 built-in server.
 Now you can copy the sources from the dist folder and use it with any backend framework or 
 simply put it under a web server.
    
-
    For addition information about creating a build, please check out Angular2 Webpack Starter documentation
    
 
         
       
       
    
-        
    Powered by Angular 2, Bootstrap 4, Webpack and many more...
    
-        
    © 2015–2016 Akveo LLC
    Documentation licensed under CC BY 4.0.
    
+        
    Powered by Angular, Bootstrap 4, Angular CLI and many more...
    
+        
    © 2017 Akveo LLC
    Documentation licensed under CC BY 4.0.
    
       
    
     
   
diff --git a/articles/011-changing-color-scheme/index.html b/articles/011-changing-color-scheme/index.html
index 1a98f921..3c10186d 100644
--- a/articles/011-changing-color-scheme/index.html
+++ b/articles/011-changing-color-scheme/index.html
@@ -51,14 +51,14 @@
         
    
           
    Changing Color Scheme
    
           
    We tried to make the process of color scheme customization as easy as possible. 
    
-
    By default ng2-admin has three built-in color profiles: ng2 (default blue sheme), mint and blur.
+
    By default ng2-admin has three built-in color profiles: ng2 (default blue scheme), mint and blur.
 This article will help you to create your own color profile.
 Let’s say you want to make ng2-admin dark theme.
    
 
    First we advise you to take some existing colorscheme file as a starting point. 
 For light themes we suggest taking src/app/theme/sass/conf/colorScheme/_mint.scss and for 
 dark src/app/theme/sass/conf/colorScheme/_blue.scss.
 As we want a dark theme, we’re taking blue.
    
-
    1) Copy src/app/theme/sass/conf/colorScheme/_mint.scss to src/app/theme/sass/conf/colorScheme/_dark.scss:
+
    1) Copy src/app/theme/sass/conf/colorScheme/_blue.scss to src/app/theme/sass/conf/colorScheme/_dark.scss:
 

    
 
    2) Include your colorscheme file in src/app/theme/sass/conf/conf.scss.
    
 
    To do this, replace
    
@@ -148,8 +148,8 @@ We also defined a couple of custom colors for dashboard&nbs
         
    
       
       
    
-        
    Powered by Angular 2, Bootstrap 4, Webpack and many more...
    
-        
    © 2015–2016 Akveo LLC
    Documentation licensed under CC BY 4.0.
    
+        
    Powered by Angular, Bootstrap 4, Angular CLI and many more...
    
+        
    © 2017 Akveo LLC
    Documentation licensed under CC BY 4.0.
    
       
    
     
   
diff --git a/articles/012-project-structure/index.html b/articles/012-project-structure/index.html
index 45dfc810..2dd5fe30 100644
--- a/articles/012-project-structure/index.html
+++ b/articles/012-project-structure/index.html
@@ -50,67 +50,64 @@
         
         
    
           
    Project Structure
    
-          
    The project structure is originally based on Angular2 Webpack Starter. We made some changes we thought would be better in our particular case.
    
-
    The directory structure of this template is as follows:
    
+          
    The directory structure of this template is as follows:
    
 
    ng2-admin/
-   ├──config/                    * webpack build configuration
-   │   ├──head-config.common.js  * configuration for head elements in index.html
+   ├──e2e/
+   │   ├──tsconfig.e2e.json             * typescript config that protractor use for e2e tests
+   │  
+   ├──src/                              * source files that will be compiled to javascript
+   │   ├──typings.d.ts                  * custom typings for third-party modules
    │   │
-   │   ├──helpers.js             * helper functions for our configuration files
+   │   ├──index.html                    * application layout
    │   │
-   │   ├──webpack.dev.js         * development webpack config
+   │   ├──main.ts                       * entry file for our browser environment
    │   │
-   │   ├──webpack.prod.js        * production webpack config
+   │   ├──polyfills.ts                  * polyfills file
    │   │
-   │   ├──webpack.test.js        * testing webpack config
-   │   │
-   │   ├──electron/              * electron webpack config
-   │   │
-   │   └──html-elements-plugin/  * html elements plugin
-   │
-   ├──src/                       * source files that will be compiled to javascript
-   │   ├──custom-typings.d.ts    * custom typings for third-party modules
-   │   │
-   │   ├──desktop.ts             * electron window initialization
-   │   │
-   │   ├──index.html             * application layout
-   │   │
-   │   ├──main.browser.ts        * entry file for our browser environment
-   │   │
-   │   ├──package.json           * electrons package.json
-   │   │
-   │   ├──polyfills.browser.ts   * polyfills file
-   │   │
-   │   ├──vendor.browser.ts      * vendors file
-   │   │
-   │   ├──app/                   * application code - our working directory
+   │   ├──app/                          * application code - our working directory
+   │   │   ├──pages/
+   │   │   │   ├──pages.menu.ts         * menu pages routes
    │   │   │
-   │   │   ├──app.component.ts   * main application component
+   │   │   ├──app.component.ts          * main application component
    │   │   │
+   │   │   ├──app.module.ts             * main application module
    │   │   │
-   │   │   ├──app.menu.ts        * menu pages routes
-   │   │   │
-   │   │   ├──app.module.ts      * main application module
-   │   │   │
-   │   │   ├──app.routes.ts      * application routes
+   │   │   ├──app.routing.ts            * application routes
+   │   │   │ 
+   │   │   ├──app.translation.module.ts * main translation module
    │   │   │  
-   │   │   ├──global.state.ts    * global application state for data exchange between components
+   │   │   ├──global.state.ts           * global application state for data exchange between components
    │   │   │
-   │   │   ├──environment.ts     * environment provider
+   │   │   ├──environment.ts            * environment provider
    │   │   │
-   │   │   ├──app.scss           * application styles 
+   │   │   ├──app.component.scss        * application styles 
    │   │   │
-   │   │   ├──pages/             * application pages components, place where you can create pages and fill them with components
+   │   │   ├──pages/                    * application pages components, place where you can create pages and fill them with components
    │   │   │
-   │   │   └──theme/             * template global components/directives/pipes and styles
+   │   │   └──theme/                    * template global components/directives/pipes and styles
    │   │
-   │   └──assets/                * static assets are served here
+   │   └──assets/                       * static assets are served here
    │
    │
-   ├──tslint.json                * typescript lint config
-   ├──typedoc.json               * typescript documentation generator
-   ├──tsconfig.json              * config that webpack uses for typescript
-   └──package.json               * what npm uses to manage it's dependencies
+   ├──.angular-cli.json                 * Angular CLI config
+   │
+   ├──Dockerfile                        * Docker config
+   │
+   ├──karma.conf.js                     * config that karma use for unit tests
+   │
+   ├──protractor.conf.js                * config that protractor use for e2e tests
+   │
+   ├──.angular-cli.json                 * Angular CLI config
+   │
+   ├──.stylelintrc.json                 * SASS/CSS lint config
+   │
+   ├──tslint.json                       * typescript lint config
+   │
+   ├──typedoc.json                      * typescript documentation generator
+   │
+   ├──tsconfig.json                     * config that webpack uses for typescript
+   │
+   └──package.json                      * what npm uses to manage it's dependencies
 
    In our template we tried to separate the theme layer and presentation layer. We believe most of other templates 
 have them combined. That’s why when you start developing using them, it gets very hard for you to remove things you 
 don’t need.
    
@@ -118,8 +115,8 @@ don’t need.
    
         
    
       
       
    
-        
    Powered by Angular 2, Bootstrap 4, Webpack and many more...
    
-        
    © 2015–2016 Akveo LLC
    Documentation licensed under CC BY 4.0.
    
+        
    Powered by Angular, Bootstrap 4, Angular CLI and many more...
    
+        
    © 2017 Akveo LLC
    Documentation licensed under CC BY 4.0.
    
       
    
     
   
diff --git a/articles/013-create-new-page/index.html b/articles/013-create-new-page/index.html
index 2a458c52..651631b3 100644
--- a/articles/013-create-new-page/index.html
+++ b/articles/013-create-new-page/index.html
@@ -50,28 +50,29 @@
         
         
    
           
    Create New Page
    
-          
    ng2-admin uses Angular 2 Component Router for navigation.
    
+          
    ng2-admin uses Angular Component Router for navigation.
    
 
    We strongly recommend to follow this page structure in your application.
 If it does not fit your needs please create a GitHub issue and tell us why. We would be glad to discuss. 
    
-
    Basically any page is just a common Angular 2 Component with a route defined for it.
    
+
    Basically any page is just a common Angular Component with a route defined for it.
    
 
    Let’s create a blank page in 6 easy steps
    
 
    1) Create a new directory for our new page inside of src/app/pages. We can call the directory new.
 

    
-
    2) Then let’s create a blank angular 2 component for our page called ‘new.component.ts’ inside of src/app/pages/new:
    
-
    import {Component} from '@angular/core';
+
    2) Then let’s create a blank angular component for our page called ‘new.component.ts’ inside of src/app/pages/new:
    
+
    import { Component } from '@angular/core';
 
 @Component({
   selector: 'new',
-  template: `<strong>My page content here</strong>`
+  template: `<strong>My page content here</strong>`,
 })
 export class NewComponent {
   constructor() {}
 }
 
    
-
    This will create a simple Angular 2 component. For more detail please check out official Angular 2 documentation.
+
    This will create a simple Angular component. For more detail please check out official Angular documentation.
 

    
 
    3) After that we should create our component routing called new.routing.ts in the new directory.
    
-
    import { Routes, RouterModule }  from '@angular/router';
+
    import { Routes, RouterModule } from '@angular/router';
+
 import { NewComponent } from './new.component';
 
 const routes: Routes = [
@@ -87,12 +88,15 @@ If it does not fit your needs please create a GitHub issue and tell us why. We w
 
    4) And now we should create new.module.ts in src/app/pages/new directory and import new.component.ts and new.routing.ts in it.
    
 
    import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
 import { NewComponent } from './new.component';
 import { routing } from './new.routing';
 
 @NgModule({
   imports: [
     CommonModule,
+    FormsModule,
     routing
   ],
   declarations: [
@@ -148,22 +152,22 @@ you navigated to some child route - the item will be highlighted.
     component: Pages,
     children: [
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
-      { path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule' },
-      { path: 'new',  loadChildren: 'app/pages/new/new.module#NewModule' }
+      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
+      { path: 'new',  loadChildren: './new/new.module#NewModule' }
     ]
   }
 ];
 
    
 

    
-
    And that’s it! Now your page is available by the following this url http://localhost:3000/#/pages/new.
+
    And that’s it! Now your page is available by the following this url http://localhost:4200/#/pages/new.
 Plus, your page is registered inside the sidebar menu. If you don’t want to have a link 
 in the menu - just remove the menu declaration from the pages.menu.ts file.
    
 
         
    
       
       
    
-        
    Powered by Angular 2, Bootstrap 4, Webpack and many more...
    
-        
    © 2015–2016 Akveo LLC
    Documentation licensed under CC BY 4.0.
    
+        
    Powered by Angular, Bootstrap 4, Angular CLI and many more...
    
+        
    © 2017 Akveo LLC
    Documentation licensed under CC BY 4.0.
    
       
    
     
   
diff --git a/articles/014-switch-to-blur-theme/index.html b/articles/014-switch-to-blur-theme/index.html
index 26890521..6d807e7a 100644
--- a/articles/014-switch-to-blur-theme/index.html
+++ b/articles/014-switch-to-blur-theme/index.html
@@ -107,7 +107,7 @@ To do so replace theme in src/app/theme/sass/conf/conf.scss:
    
 
    to
    
 
    @import 'colorSchemes/blur';
 
    
-
    Additionaly, if you would like to use some different background, replace the following images:
    
+
    Additionally, if you would like to use some different background, replace the following images:
    
 
      
 
    • src/assets/img/blur-bg.jpg (main background image)
      • 
 
    • src/assets/img/blur-bg-blurred.jpg (blurred background image used on panels)
      • 
@@ -119,8 +119,8 @@ That’s it! You have successfully blurred your theme! Run npm start
       
       
      
-        
      Powered by Angular 2, Bootstrap 4, Webpack and many more...
      
-        
      © 2015–2016 Akveo LLC
      Documentation licensed under CC BY 4.0.
      
+        
      Powered by Angular, Bootstrap 4, Angular CLI and many more...
      
+        
      © 2017 Akveo LLC
      Documentation licensed under CC BY 4.0.
      
       
      
     
   
diff --git a/articles/015-sidebar/index.html b/articles/015-sidebar/index.html
index 89f4e76b..bde1fc26 100644
--- a/articles/015-sidebar/index.html
+++ b/articles/015-sidebar/index.html
@@ -65,7 +65,7 @@ All menu items information is defined inside the data property of a
     path: 'dashboard',
     component: Dashboard,
     data: {
-      // here additionaly we define how the menu item should look
+      // here additionally we define how the menu item should look
       menu: {
         title: 'Dashboard', // menu title
         icon: 'ion-android-home', // menu icon
@@ -131,8 +131,8 @@ All menu items information is defined inside the data property of a
         
       
       
      
-        
      Powered by Angular 2, Bootstrap 4, Webpack and many more...
      
-        
      © 2015–2016 Akveo LLC
      Documentation licensed under CC BY 4.0.
      
+        
      Powered by Angular, Bootstrap 4, Angular CLI and many more...
      
+        
      © 2017 Akveo LLC
      Documentation licensed under CC BY 4.0.
      
       
      
     
   
diff --git a/articles/016-spinner/index.html b/articles/016-spinner/index.html
index 5e184308..eca9362d 100644
--- a/articles/016-spinner/index.html
+++ b/articles/016-spinner/index.html
@@ -52,7 +52,7 @@
           
      Theme Spinner
      
           
      Theme Spinner BaThemeSpinner is a small service helper allowing you to show a preloader spinner while 
 executing some long-running tasks.
-This is the same spinner you can see after reloading a page - it is shown while the application is initializing Angular 2 and loading charts and images.
      
+This is the same spinner you can see after reloading a page - it is shown while the application is initializing Angular and loading charts and images.
      
 
      The user interface in quite simple: there are two public methods: show and hide.
      
 
      Theme Spinner comes with another small helper called BaThemePreloader. 
 This service is globally integrated into the application and connected to the spinner.
      
@@ -90,8 +90,8 @@ Say you have a long-running task on the Charts page (you need to receive some da
         
       
       
      
-        
      Powered by Angular 2, Bootstrap 4, Webpack and many more...
      
-        
      © 2015–2016 Akveo LLC
      Documentation licensed under CC BY 4.0.
      
+        
      Powered by Angular, Bootstrap 4, Angular CLI and many more...
      
+        
      © 2017 Akveo LLC
      Documentation licensed under CC BY 4.0.
      
       
      
     
   
diff --git a/index.html b/index.html
index 36e7e129..9d28af96 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     
     
     
-    Admin HTML template based on Angular 2, Bootstrap 4 and Webpack
+    Admin HTML template based on Angular, Bootstrap 4 and Angular CLI
     
     
     
@@ -26,7 +26,7 @@
         
      
           
      
             
      ng2-admin
      
-            
      Angular 2 admin panel front-end framework
      
+            
      Angular admin panel front-end framework
      
             
      Installation guidelinesDocumentation
      
             
      
               
      
@@ -42,7 +42,7 @@
           
      
             
      
               
      Awesome structure
      
-              
      Component-based structure is the best choice for large Angular 2 applications.
      
+              
      Component-based structure is the best choice for large Angular applications.
      
             
      
             
      
               
      Neat design
      
@@ -80,8 +80,8 @@
         
      
       
      
       
      
-        
      Powered by Angular 2, Bootstrap 4, Webpack and many more...
      
-        
      © 2015–2016 Akveo LLC
      Documentation licensed under CC BY 4.0.
      
+        
      Powered by Angular, Bootstrap 4, Angular CLI and many more...
      
+        
      © 2017 Akveo LLC
      Documentation licensed under CC BY 4.0.