How to start

Welcome to Angular! Angular helps you build modern applications for the web, mobile, or desktop.

For getting started an Angular application you needs two things as Prerequisites.

Prerequisites

For getting started an Angular application you needs two things as Prerequisites.

Node.js

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

Npm package manager

1. Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an, you must have an npm package manager.
2. This Quick Start 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.
3. For better understanding Angular we suggest you to once go through official documentation of Angular from Angular Docs.

Angular setup

If you want MultiKart theme setup then directly follow next MultiKart setup section

Installing Angular CLI

1. You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks as it is a progressive framework for building user interfaces.
2. Install the Angular CLI globally.
3. To install the CLI using npm, open a terminal/console window and enter the following

command:

npm install -g @angular/cli 

Create Initial application

1. Run the CLI command Angular create and provide the name my-app, as shown here:

ng new my-app 

2. The angular new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

Serve Application

1. Go to the workspace folder (my-app).

cd my-app 

2. Launch the server by using the CLI command ng serve

ng serve 

MultiKart setup

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

Node.js

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

Angular CLI

1. Install Angular CLI Using:

npm install -g @angular/cli  

Setup MultiKart template by

1. Download and extract an MultiKart template from themeforest
2. Extract it and then
--> For Frontend go in to frontend folder

cd frontend

--> For Admin go in to admin folder

cd admin

3. Import all dependency by installing npm command

npm install

4. Now you are in stage to successfully run MultiKart using below command:

ng serve

Once you serve your application by default it will take their defalult port so you can open port using localhost:4200

Make sure you are not running any other angular project in local if so then use new generated port from terminal with label called app running at:

Setup environments

You must need to setup environment url If you using different port you need configure in environment.ts file

For example your local server url is http://localhost:4200/ then your environment URL should be like http://localhost:4200/assets/data

Note:- We are using mock json data that's why we have configured url using like this http://localhost:4200/assets/data if you are using Your Api then you can change accordingly as per your requirement

You must need to setup environment url If you using different port you need configure in environment.ts file

export const environment = {
  production: true,
  baseURL: 'http://localhost:4200', // This represents the base URL for running our frontend project. 
  URL: 'http://localhost:4200/assets/data', // Change only the domain part, keeping "/api" intact
  storageURL: 'http://localhost:4200/assets' // Change only the laravel primary domain
};

Use environment

import { environment } from 'src/environments/environment.development';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http: HttpClient) {}

  getProducts(payload?: Params): Observable<ProductModel> {
    return this.http.get<ProductModel>(`${environment.URL}/product.json`, { params: payload });
  }

}

Build Application

1. Build you application for host on server using below command:

ng build