Miranda Hotel - Angular 11 Template
Miranda Hotel - Angular 11 Template
In order to kickstart the development of your web app with Miranda Hotel, the very first thing is to setup an Angular development environment.
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. |
npm install -g @angular/cli
. More details can be found here https://github.com/angular/angular-clinpm install
from the root of your project to install all the necessary dependencies.ng serve
for a dev server. Navigate to localhost:4200/. The app will autometically reload if you change any of the source files.ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.angular-cli
use ng --help
or go check out the Angular-CLI README.Here are the dependencies list which being used in the Miranda Hotel Angular Template:
"dependencies": { "@agm/core": "^1.0.0", "@angular/animations": "~11.2.5", "@angular/common": "~11.2.5", "@angular/compiler": "~11.2.5", "@angular/core": "~11.2.5", "@angular/forms": "~11.2.5", "@angular/platform-browser": "~11.2.5", "@angular/platform-browser-dynamic": "~11.2.5", "@angular/router": "~11.2.5", "@auth0/angular-jwt": "^5.0.2", "@ng-bootstrap/ng-bootstrap": "^9.0.2", "angular-crumbs": "^3.0.1", "angular2-jwt": "^0.2.3", "bootstrap": "^4.6.0", "imagesloaded": "^4.1.4", "jquery": "^3.6.0", "magnific-popup": "^1.1.0", "masonry-layout": "^4.2.2", "ng-masonry-grid": "^1.3.0", "ng-nice-select": "^1.3.1", "ng-recaptcha": "^8.0.1", "ngx-pagination": "^5.0.0", "ngx-slick-carousel": "^0.5.1", "rxjs": "~6.6.0", "slick-carousel": "^1.8.1", "tslib": "^2.0.0", "zone.js": "~0.11.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1102.3", "@angular/cli": "~11.2.4", "@angular/compiler-cli": "~11.2.5", "@types/jasmine": "~3.6.0", "@types/jquery": "^3.5.5", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.1.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.1.5" }
This template supports a working Contact Form. However, you will need to do some adjustments to be able to get it working, follow the below steps to get it up and running
Step 1:Find the sendmail.php
file in your project root directory
// Your Email here $email = example@example.com;Step 2:
Change the email to your recieving email
// Recaptcha settings $use_recaptcha = false; define("RECAPTCHA_V3_SECRET_KEY", 'Place_Your_Secret_Key_Here');Step 3:
Change the Secret Key to your Domain configuration
Navigate to app/components/pages/contact/content/content.html and look for re-captcha
tag. You will need to change site key to your Domain configuration
// Recaptcha settings
Navigate to app/components/services/contact.helper.service.ts and look for serviceURL on line 12. You will need to host the sendmail.php file on your server somewhere and add the link to the script here
Note: This feature does not work on a local environment
By default, the template loads Archivo & Old Standard TT & Roboto 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:
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Roboto:wght@400;500;700&display=swap");