Introduction
Slices - Angular 9 Pizzeria Template
Local Development Environment Setup
In order to kickstart the development of your web app with Slices, the very first thing is to setup an Angular development environment.
Getting Started
Name | Description |
---|---|
angular.json
|
Used for configuration of project specific settings. You can add external styles and scripts, change the output folder, add assets, add environment files and more. |
e2e
|
Will be used for end-to-end tests to ensure functionality for users before deploying. |
node_modules
|
All external modules used are here. Do not mess with this folder, as it is auto-generated by using npm install . |
package.json
|
Contains all dependencies used for production and development. |
src
|
Contains all Angular Typescript code, assets and basically everything the end user will have access to. |
tslint.json
|
Angular-CLI includes an automatic Typescript-Linter, which can be configured with this file. |
- Node.js and NPM : If NodeJS is not installed then download it from https://nodejs.org/. NPM comes bundled with Node.js
- angular-cli : You can install angular-cli by executing from your command window
npm install -g @angular/cli
. More details can be found here https://github.com/angular/angular-cli
Navigating to project folder
To navigate to your project folder, open Command Prompt, and navigate to your project folder. To do that, type cd {FULL PATH OF YOUR PROJECT} and hit enter. If your default directory in cmd is C: and you're trying to navigate to D:, you will need to type D: and hitting enter after the cd command line
Step 1: cd D:\Projects\Slices-product - Enter
Step 2: D: - Enter
NPM Packages
- Before proceding you'll need to install npm packages. You can do this by running
npm install
from the root of your project to install all the necessary dependencies.
Development Server
- Run
ng serve
for a dev server. Navigate to localhost:4200/. The app will autometically reload if you change any of the source files.
Building
- Run
ng build
to build the project. The build artifacts will be stored in thedist/
directory. Use the--prod
flag for a production build.
More Help
- To get more help on the
angular-cli
useng --help
or go check out the Angular-CLI README.
Pages Info
- Home Page Page (/app/components/pages/home)
- Home Page 2 Page (/app/components/pages/home-two)
- Home Page 3 Page (/app/components/pages/home-three)
- Home Page 4 Page (/app/components/pages/home-four)
- About Page (/app/components/pages/about-us)
- Blog Full Width Page (/app/components/pages/blog-full)
- Blog Grid Sidebar Page (/app/components/pages/blog-grid)
- Blog List Sidebar Page (/app/components/pages/blog-list)
- Blog Masonary Page (/app/components/pages/blog-masonary)
- Blog Details Page (/app/components/pages/blog-single)
- Cart Page (/app/components/pages/cart)
- Checkout Page (/app/components/pages/checkout)
- Legal Page (/app/components/pages/legal)
- Locations Page (/app/components/pages/locations)
- Menu v1 Page (/app/components/pages/menu-one)
- Menu v2 Page (/app/components/pages/menu-two)
- Menu Item v1 Page (/app/components/pages/menu-item-one)
- Menu Item v2 Page (/app/components/pages/menu-item-two)
- Login Page (/app/components/pages/login)
- SignUp Page (/app/components/pages/register)
- Error Page (/app/components/pages/error)
- Contact Page (/app/components/pages/contact)
- Go to /app/app.routing.modules.ts and see the urls & find the appropriate modules for every pages.
Template Features:
- Built on Angular 9
- Attractive Homepage
- Responsive in Any Device
- Retina Ready
- Creative and Beautiful Layout
- Fast, Lightweight & Powerful
- Smooth Transition Effects
- ES6+
- Clean And Professional Coding
- Creative and Modern Design
- Bootstrap (v4.5.0)
- Simple Client-side Routing (page based)
- Google Font and Icon Used
- Integrated With IcoFont and FlatIcon
- Easily Customizable
- Well Commented Code
- Detailed Documentation
Dependencies
Here are the dependencies list which being used in the Slices Angular Template:
"dependencies": {
"@angular/animations": "~9.1.11",
"@angular/common": "~9.1.11",
"@angular/compiler": "~9.1.11",
"@angular/core": "~9.1.11",
"@angular/forms": "~9.1.11",
"@angular/platform-browser": "~9.1.11",
"@angular/platform-browser-dynamic": "~9.1.11",
"@angular/router": "~9.1.11",
"@asymmetrik/ngx-leaflet": "^7.0.1",
"leaflet": "^1.6.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.9",
"@angular/cli": "~9.1.9",
"@angular/compiler-cli": "~9.1.11",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/leaflet": "^1.5.15",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
Spacing
Aside from bootstrap spacing utility classes, we provide 2 spacing classes for section seperation
Default spacing by adding class section
to any element
Irregular spacing by adding class section-padding
to any element (This is used incase you have elements with bottom margins)
Fonts
By default, the template loads Open Sans and Oswald font from Google Web Font Services, you can change the font with the one that suits you best.
Font code can be found in the "assets/css/style.css" file:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">
Credits
Unsplash
Burst
Feeepik
Pexels
Packages
Angular 9+
TypeScript
ngx-wow
rxjs
tslib
Bootstrap
zone.js
Google Fonts
Support
If you have any questions, please contact our support team at AndroThemes with your purchase key or use our profile contact form on Envato ( https://themeforest.net/user/androThemes ).
We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.