You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<h1> My Todo's</h1><divclass="container"><tableclass="table"><thead><tr><th>Description</th><th>Target Date</th><th>is Completed?</th></tr></thead><tbody><!-- for (Todo todo: todos) { --><tr*ngFor="let todo of todos"><td>{{todo.description}}</td><td>{{todo.targetDate | date | uppercase}}</td><td>{{todo.done}}</td></tr><!-- } --></tbody></table></div>
import { Component, OnInit } from '@angular/core';
//Future
// - No Navigation Menu and Footer
// - Formatting - Bootstrap
// - No Security for Menus
// - Hardcoded Logic in the TodoList and Login Components
// - Remaining Functionality - Edit, Delete, Add
// - Spring Boot
// - Spring Security
export class Todo {
constructor(
public id: number,
public description: string,
public done: boolean,
public targetDate: Date
){
}
}
@Component({
selector: 'app-list-todos',
templateUrl: './list-todos.component.html',
styleUrls: ['./list-todos.component.css']
})
export class ListTodosComponent implements OnInit {
todos = [
new Todo(1, 'Learn to Dance', false, new Date()),
new Todo(2, 'Become an Expert at Angular', false, new Date()),
new Todo(3, 'Visit India', false, new Date())
// {id : 1, description : },
// {id : 2, description : ''},
// {id : 3, description : 'Visit India'}
]
// todo = {
// id : 1,
// description: 'Learn to Dance'
// }
constructor() { }
ngOnInit() {
}
}
/frontend/todo/src/app/login/login.component.css
/frontend/todo/src/app/login/login.component.html
<H1>Login!</H1><divclass="container"><divclass="alert alert-warning" *ngIf='invalidLogin'>{{errorMessage}}</div><div>
User Name : <inputtype="text" name="username" [(ngModel)]="username">
Password : <inputtype="password" name="password" [(ngModel)]="password"><!-- User Name : {{username}} --><button(click)=handleLogin()class="btn btn-success">Login</button></div></div>
<H1>Welcome!</H1><divclass="container">
Welcome {{name}}. You can manage your todos <arouterLink="/todos">here</a></div><divclass="container">
Click here to get a customized welcome message
<button(click)="getWelcomeMessage()" class="btn btn-success">Get Welcome Message</button></div><divclass="container" *ngIf="welcomeMessageFromService"><H2>Your Customized Welcome Message</H2>
{{welcomeMessageFromService}}
</div>
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
#
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
/frontend/todo/src/index.html
<!doctype html><htmllang="en"><head><metacharset="utf-8"><title>My Todos Application</title><basehref="/"><metaname="viewport" content="width=device-width, initial-scale=1"><linkrel="icon" type="image/x-icon" href="favicon.ico"></head><body><app-root></app-root><!-- <div>Index HTML Content</div> --></body></html>
/frontend/todo/src/karma.conf.js
// Karma configuration file, see link for more information// https://karma-runner.github.io/1.0/config/configuration-file.htmlmodule.exports=function(config){config.set({basePath: '',frameworks: ['jasmine','@angular-devkit/build-angular'],plugins: [require('karma-jasmine'),require('karma-chrome-launcher'),require('karma-jasmine-html-reporter'),require('karma-coverage-istanbul-reporter'),require('@angular-devkit/build-angular/plugins/karma')],client: {clearContext: false// leave Jasmine Spec Runner output visible in browser},coverageIstanbulReporter: {dir: require('path').join(__dirname,'../coverage'),reports: ['html','lcovonly'],fixWebpackSourcePaths: true},reporters: ['progress','kjhtml'],port: 9876,colors: true,logLevel: config.LOG_INFO,autoWatch: true,browsers: ['Chrome'],singleRun: false});};
/frontend/todo/src/main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
/frontend/todo/src/polyfills.ts
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
/**
* If the application will be indexed by Google Search, the following is required.
* Googlebot uses a renderer based on Chrome 41.
* https://developers.google.com/search/docs/guides/rendering
**/
// import 'core-js/es6/array';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
*/
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
// (window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
/frontend/todo/src/styles.css
/* You can add global styles to this file, and also import other style files */@importurl(https://unpkg.com/[email protected]/dist/css/bootstrap.min.css)
/frontend/todo/src/test.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);