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");