Skip to content

Commit a98de52

Browse files
authoredJun 3, 2022
Added angular component sample
1 parent a51a066 commit a98de52

19 files changed

+20972
-0
lines changed
 

‎angular.json

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"cli": {
4+
"analytics": "00a0b53d-4606-486b-9343-96e165340404"
5+
},
6+
"version": 1,
7+
"newProjectRoot": "projects",
8+
"projects": {
9+
"angular-tabs": {
10+
"projectType": "application",
11+
"schematics": {
12+
"@schematics/angular:application": {
13+
"strict": true
14+
}
15+
},
16+
"root": "",
17+
"sourceRoot": "src",
18+
"prefix": "app",
19+
"architect": {
20+
"build": {
21+
"builder": "@angular-devkit/build-angular:browser",
22+
"options": {
23+
"outputPath": "dist/angular-tabs",
24+
"index": "src/index.html",
25+
"main": "src/main.ts",
26+
"polyfills": "src/polyfills.ts",
27+
"tsConfig": "tsconfig.app.json",
28+
"assets": [
29+
"src/favicon.ico",
30+
"src/assets"
31+
],
32+
"styles": [
33+
"src/styles.css"
34+
],
35+
"scripts": []
36+
},
37+
"configurations": {
38+
"production": {
39+
"budgets": [
40+
{
41+
"type": "initial",
42+
"maximumWarning": "500kb",
43+
"maximumError": "1mb"
44+
},
45+
{
46+
"type": "anyComponentStyle",
47+
"maximumWarning": "2kb",
48+
"maximumError": "4kb"
49+
}
50+
],
51+
"fileReplacements": [
52+
{
53+
"replace": "src/environments/environment.ts",
54+
"with": "src/environments/environment.prod.ts"
55+
}
56+
],
57+
"outputHashing": "all"
58+
},
59+
"development": {
60+
"buildOptimizer": false,
61+
"optimization": false,
62+
"vendorChunk": true,
63+
"extractLicenses": false,
64+
"sourceMap": true,
65+
"namedChunks": true
66+
}
67+
},
68+
"defaultConfiguration": "production"
69+
},
70+
"serve": {
71+
"builder": "@angular-devkit/build-angular:dev-server",
72+
"configurations": {
73+
"production": {
74+
"browserTarget": "angular-tabs:build:production"
75+
},
76+
"development": {
77+
"browserTarget": "angular-tabs:build:development"
78+
}
79+
},
80+
"defaultConfiguration": "development"
81+
},
82+
"extract-i18n": {
83+
"builder": "@angular-devkit/build-angular:extract-i18n",
84+
"options": {
85+
"browserTarget": "angular-tabs:build"
86+
}
87+
},
88+
"test": {
89+
"builder": "@angular-devkit/build-angular:karma",
90+
"options": {
91+
"main": "src/test.ts",
92+
"polyfills": "src/polyfills.ts",
93+
"tsConfig": "tsconfig.spec.json",
94+
"karmaConfig": "karma.conf.js",
95+
"assets": [
96+
"src/favicon.ico",
97+
"src/assets"
98+
],
99+
"styles": [
100+
"src/styles.css"
101+
],
102+
"scripts": []
103+
}
104+
}
105+
}
106+
}
107+
},
108+
"defaultProject": "angular-tabs"
109+
}

‎karma.conf.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client: {
16+
jasmine: {
17+
// you can add configuration options for Jasmine here
18+
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19+
// for example, you can disable the random execution with `random: false`
20+
// or set a specific seed with `seed: 4321`
21+
},
22+
clearContext: false // leave Jasmine Spec Runner output visible in browser
23+
},
24+
jasmineHtmlReporter: {
25+
suppressAll: true // removes the duplicated traces
26+
},
27+
coverageReporter: {
28+
dir: require('path').join(__dirname, './coverage/angular-tabs'),
29+
subdir: '.',
30+
reporters: [
31+
{ type: 'html' },
32+
{ type: 'text-summary' }
33+
]
34+
},
35+
reporters: ['progress', 'kjhtml'],
36+
port: 9876,
37+
colors: true,
38+
logLevel: config.LOG_INFO,
39+
autoWatch: true,
40+
browsers: ['Chrome'],
41+
singleRun: false,
42+
restartOnFileChange: true
43+
});
44+
};

‎package-lock.json

+20,457
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "angular-tabs",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test"
10+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/animations": "~13.3.0",
14+
"@angular/common": "~13.3.0",
15+
"@angular/compiler": "~13.3.0",
16+
"@angular/core": "~13.3.0",
17+
"@angular/forms": "~13.3.0",
18+
"@angular/platform-browser": "~13.3.0",
19+
"@angular/platform-browser-dynamic": "~13.3.0",
20+
"@angular/router": "~13.3.0",
21+
"@syncfusion/ej2-angular-navigations": "^20.1.58",
22+
"rxjs": "~7.5.0",
23+
"tslib": "^2.3.0",
24+
"zone.js": "~0.11.4"
25+
},
26+
"devDependencies": {
27+
"@angular-devkit/build-angular": "~13.3.6",
28+
"@angular/cli": "~13.3.6",
29+
"@angular/compiler-cli": "~13.3.0",
30+
"@types/jasmine": "~3.10.0",
31+
"@types/node": "^12.11.1",
32+
"jasmine-core": "~4.0.0",
33+
"karma": "~6.3.0",
34+
"karma-chrome-launcher": "~3.1.0",
35+
"karma-coverage": "~2.1.0",
36+
"karma-jasmine": "~4.0.0",
37+
"karma-jasmine-html-reporter": "~1.7.0",
38+
"typescript": "~4.6.2"
39+
}
40+
}

‎src/app/app.component.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
2+
<div>
3+
<ejs-tab width="850" cssClass="tab_content e-fill" headerPlacement="Top"
4+
overflowMode="Popup">
5+
<!-- <e-tabitems>
6+
<e-tabitem [header]="tabHeaderText[0]" [content]="tabContent[0]"></e-tabitem>
7+
<e-tabitem [header]="tabHeaderText[1]" [content]="tabContent[1]"></e-tabitem>
8+
<e-tabitem>
9+
<ng-template #headerText>
10+
<div>JavaScript</div>
11+
</ng-template>
12+
<ng-template #content>
13+
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
14+
</ng-template>
15+
</e-tabitem>
16+
</e-tabitems> -->
17+
<div class="e-tab-header">
18+
<div>HTML</div>
19+
<div>Java</div>
20+
<div>JavaScript</div>
21+
<div>VB.Net</div>
22+
<div>Xamarin</div>
23+
<div>ASP.NET</div>
24+
<div>ASP.NET MVC</div>
25+
<div>PHP</div>
26+
<div>Ruby</div>
27+
<div>C Sharp(C#)</div>
28+
<div>Python</div>
29+
<div>Perl</div>
30+
<div>SQL</div>
31+
</div>
32+
<div class="e-content">
33+
<div>HyperText Markup Language is the standard markup language used to create web pages.</div>
34+
<div>Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers.</div>
35+
<div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.</div>
36+
<div>The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also includes a command-line VB.NET compiler.</div>
37+
<div>Xamarin is a San Francisco, California based software company created in May 2011[3] by the engineers that created Mono,[4] Mono for Android and MonoTouch that are cross-platform implementations of the Common Language Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET). With a C#-shared codebase, developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share code across multiple platforms.[5] Xamarin has over 1 million developers in more than 120 countries around the World as of May 2015.</div>
38+
<div>ASP.NET is an open-source server-side web application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.</div>
39+
<div>The ASP.NET MVC is a web application framework developed by Microsoft, which implements the model–view–controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using only Razor pages) will merge into a unified MVC 6.</div>
40+
<div>PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.</div>
41+
<div>Ruby is an interpreted, high-level, general-purpose programming language.It runs on a variety of platforms, such as Windows, Mac OS and UNIX.</div>
42+
<div>C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.</div>
43+
<div>Python was designed with an emphasis on code readability, and its syntax allows programmers to express their concepts in fewer lines of code.</div>
44+
<div>Perl is a general purpose, high level interpreted and dynamic programming language. Perl supports both the procedural and Object-Oriented programming.</div>
45+
<div>SQL gives you the ability to find necessary information fast and in a reliable way.</div>
46+
</div>
47+
</ejs-tab>
48+
</div>

‎src/app/app.component.spec.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { RouterTestingModule } from '@angular/router/testing';
3+
import { AppComponent } from './app.component';
4+
5+
describe('AppComponent', () => {
6+
beforeEach(async () => {
7+
await TestBed.configureTestingModule({
8+
imports: [
9+
RouterTestingModule
10+
],
11+
declarations: [
12+
AppComponent
13+
],
14+
}).compileComponents();
15+
});
16+
17+
it('should create the app', () => {
18+
const fixture = TestBed.createComponent(AppComponent);
19+
const app = fixture.componentInstance;
20+
expect(app).toBeTruthy();
21+
});
22+
23+
it(`should have as title 'angular-tabs'`, () => {
24+
const fixture = TestBed.createComponent(AppComponent);
25+
const app = fixture.componentInstance;
26+
expect(app.title).toEqual('angular-tabs');
27+
});
28+
29+
it('should render title', () => {
30+
const fixture = TestBed.createComponent(AppComponent);
31+
fixture.detectChanges();
32+
const compiled = fixture.nativeElement as HTMLElement;
33+
expect(compiled.querySelector('.content span')?.textContent).toContain('angular-tabs app is running!');
34+
});
35+
});

‎src/app/app.component.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-root',
5+
templateUrl: './app.component.html',
6+
styleUrls: ['./app.component.css']
7+
})
8+
export class AppComponent {
9+
title = 'angular-tabs';
10+
public tabHeaderText : Object[] = [
11+
{text: 'HTML'},
12+
{text: 'Java'}
13+
];
14+
public tabContent : string[] = [
15+
"HyperText Markup Language is the standard markup language used to create web pages.",
16+
"Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers."
17+
];
18+
}

‎src/app/app.module.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { TabModule } from '@syncfusion/ej2-angular-navigations';
4+
import { AppRoutingModule } from './app-routing.module';
5+
import { AppComponent } from './app.component';
6+
7+
@NgModule({
8+
declarations: [
9+
AppComponent
10+
],
11+
imports: [
12+
BrowserModule,
13+
AppRoutingModule,
14+
TabModule
15+
],
16+
providers: [],
17+
bootstrap: [AppComponent]
18+
})
19+
export class AppModule { }

‎src/environments/environment.prod.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const environment = {
2+
production: true
3+
};

‎src/environments/environment.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// This file can be replaced during build by using the `fileReplacements` array.
2+
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
3+
// The list of file replacements can be found in `angular.json`.
4+
5+
export const environment = {
6+
production: false
7+
};
8+
9+
/*
10+
* For easier debugging in development mode, you can import the following file
11+
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12+
*
13+
* This import should be commented out in production mode because it will have a negative impact
14+
* on performance if an error is thrown.
15+
*/
16+
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

‎src/favicon.ico

948 Bytes
Binary file not shown.

‎src/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularTabs</title>
6+
<base href="/">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="icon" type="image/x-icon" href="favicon.ico">
9+
</head>
10+
<body>
11+
<app-root></app-root>
12+
</body>
13+
</html>

‎src/main.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { enableProdMode } from '@angular/core';
2+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3+
4+
import { AppModule } from './app/app.module';
5+
import { environment } from './environments/environment';
6+
import { registerLicense } from '@syncfusion/ej2-base';
7+
8+
registerLicense("ORg4AjUWIQA/Gnt2VVhhQlFac1pJW3xIfEx0RWFbb1p6cFJMYVVBNQtUQF1hS35Wd0ZjXXtZc3JXT2df");
9+
10+
if (environment.production) {
11+
enableProdMode();
12+
}
13+
14+
platformBrowserDynamic().bootstrapModule(AppModule)
15+
.catch(err => console.error(err));

‎src/polyfills.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* This file includes polyfills needed by Angular and is loaded before the app.
3+
* You can add your own extra polyfills to this file.
4+
*
5+
* This file is divided into 2 sections:
6+
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7+
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8+
* file.
9+
*
10+
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11+
* automatically update themselves. This includes recent versions of Safari, Chrome (including
12+
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
13+
*
14+
* Learn more in https://angular.io/guide/browser-support
15+
*/
16+
17+
/***************************************************************************************************
18+
* BROWSER POLYFILLS
19+
*/
20+
21+
/**
22+
* By default, zone.js will patch all possible macroTask and DomEvents
23+
* user can disable parts of macroTask/DomEvents patch by setting following flags
24+
* because those flags need to be set before `zone.js` being loaded, and webpack
25+
* will put import in the top of bundle, so user need to create a separate file
26+
* in this directory (for example: zone-flags.ts), and put the following flags
27+
* into that file, and then add the following code before importing zone.js.
28+
* import './zone-flags';
29+
*
30+
* The flags allowed in zone-flags.ts are listed here.
31+
*
32+
* The following flags will work for all browsers.
33+
*
34+
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35+
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36+
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37+
*
38+
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39+
* with the following flag, it will bypass `zone.js` patch for IE/Edge
40+
*
41+
* (window as any).__Zone_enable_cross_context_check = true;
42+
*
43+
*/
44+
45+
/***************************************************************************************************
46+
* Zone JS is required by default for Angular itself.
47+
*/
48+
import 'zone.js'; // Included with Angular CLI.
49+
50+
51+
/***************************************************************************************************
52+
* APPLICATION IMPORTS
53+
*/

‎src/styles.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* You can add global styles to this file, and also import other style files */
2+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
3+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
4+
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
5+
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
6+
7+
.tab_content .e-content .e-item {
8+
font-size: 12px;
9+
padding: 10px;
10+
text-align: justify;
11+
}

‎src/test.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
2+
3+
import 'zone.js/testing';
4+
import { getTestBed } from '@angular/core/testing';
5+
import {
6+
BrowserDynamicTestingModule,
7+
platformBrowserDynamicTesting
8+
} from '@angular/platform-browser-dynamic/testing';
9+
10+
declare const require: {
11+
context(path: string, deep?: boolean, filter?: RegExp): {
12+
<T>(id: string): T;
13+
keys(): string[];
14+
};
15+
};
16+
17+
// First, initialize the Angular testing environment.
18+
getTestBed().initTestEnvironment(
19+
BrowserDynamicTestingModule,
20+
platformBrowserDynamicTesting(),
21+
);
22+
23+
// Then we find all the tests.
24+
const context = require.context('./', true, /\.spec\.ts$/);
25+
// And load the modules.
26+
context.keys().map(context);

‎tsconfig.app.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
2+
{
3+
"extends": "./tsconfig.json",
4+
"compilerOptions": {
5+
"outDir": "./out-tsc/app",
6+
"types": []
7+
},
8+
"files": [
9+
"src/main.ts",
10+
"src/polyfills.ts"
11+
],
12+
"include": [
13+
"src/**/*.d.ts"
14+
]
15+
}

‎tsconfig.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
2+
{
3+
"compileOnSave": false,
4+
"compilerOptions": {
5+
"baseUrl": "./",
6+
"outDir": "./dist/out-tsc",
7+
"forceConsistentCasingInFileNames": true,
8+
"strict": true,
9+
"noImplicitOverride": true,
10+
"noPropertyAccessFromIndexSignature": true,
11+
"noImplicitReturns": true,
12+
"noFallthroughCasesInSwitch": true,
13+
"sourceMap": true,
14+
"declaration": false,
15+
"downlevelIteration": true,
16+
"experimentalDecorators": true,
17+
"moduleResolution": "node",
18+
"importHelpers": true,
19+
"target": "es2017",
20+
"module": "es2020",
21+
"lib": [
22+
"es2020",
23+
"dom"
24+
]
25+
},
26+
"angularCompilerOptions": {
27+
"enableI18nLegacyMessageIdFormat": false,
28+
"strictInjectionParameters": true,
29+
"strictInputAccessModifiers": true,
30+
"strictTemplates": true
31+
}
32+
}

‎tsconfig.spec.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
2+
{
3+
"extends": "./tsconfig.json",
4+
"compilerOptions": {
5+
"outDir": "./out-tsc/spec",
6+
"types": [
7+
"jasmine"
8+
]
9+
},
10+
"files": [
11+
"src/test.ts",
12+
"src/polyfills.ts"
13+
],
14+
"include": [
15+
"src/**/*.spec.ts",
16+
"src/**/*.d.ts"
17+
]
18+
}

0 commit comments

Comments
 (0)
Please sign in to comment.