Zanex - Angular Admin & Dashboard Template

Introduction to the Angular

Welcome to Angular..!
Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. It helps you to build modern applications for the Desktop, Web and Mobile.

Getting Started

Setting up the local environment and workspace

This guide explains how to set up your environment for Angular development using the Angular CLI tool. It includes information about prerequisites, installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.

For getting started an Angular Application you needs 2 things as Prerequisites.

Prerequisites

To use the Angular Framework, you should be familiar with the following:

  • HTML
  • CSS
  • JavaScript
Knowledge of TypeScript is helpful.
To install Angular on your local System, you need the following:

Node.js

Angular requires a current, active LTS (long term support) or maintenance LTS (long term support) version of Node.js.

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

Npm package Manager

The Angular CLI and Angular applications depend on npm packages for many features and functions.
To download and install npm packages, you need an npm package manager.
This guide uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window (cmd)

For better understanding Angular we suggest you once go through official documentation of Angular from Angular Documentation

Angular Setup

Installing the Angular CLI

You can use Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Install the Angular CLI globally.

To install the CLI using npm, open a terminal/console window and run the following command.

npm install –g @angular/cli
Create a workspace and initial application

You develop apps in the context of an Angular workspace.
To create a new workspace and initial starter app:

  1. Run the CLI command ng new and provide the name filename as my-app, as shown below
  2. ng new my-app
    
  3. The ng new command prompts you for the information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes. The CLI creates a new workspaces and a simple Welcome app, ready to run.

Run the application

The Angular CLI includes a server, so that you can build and serve your app locally.

  1. Navigate to the workspace folder, such as my-app.
  2. Run the following commands:
cd my-app
ng serve --open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files. The --open or -o just Option automatically opens your browser to http://localhost:4200/.

Zanex Setup

If you have already download and install node.js and Angular CLI then ignore prerequisites.

Prerequisites
Node.js

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

Angular CLI

To install the Angular CLI using npm, open a terminal/console window and run the following command.

npm install –g @angular/cli
Setup an Admitro Template by
  1. Download the Admitro rar/zip file.
  2. Extract it and then go in to Admitro Folder here you will see 2 Folders Angular-LTR and Angular-RTL Choose any One.
  3. For Example, Here I'm Choosing Angular-LTR again you will get 4 Folders. Choose any One of them.
  4. Here, I'm Choosing Vertical-Light.
  5. Now from a terminal window, navigate to the directory containing your application
  6. Admitro/Angular-LTR/Vertical-Light>
  7. You can import all dependency by installing npm command
  8. npm install
  9. Now you are in stage to successfully run Admitro using below command:
  10. ng serve
    Once you serve your application by default it will take their default port using http://localhost:4200/
Build Application
Build your application for host on server using below command:
ng build