Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
T
topic1-63
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Packages
Packages
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kriengkrai Yothee
topic1-63
Commits
92c8f837
Commit
92c8f837
authored
Jul 26, 2020
by
Kriengkrai Yothee
⚽
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
home
parent
c88b6a72
Show whitespace changes
Inline
Side-by-side
Showing
37 changed files
with
568 additions
and
352 deletions
+568
-352
.angulardoc.json
22-july-2020/my-app/.angulardoc.json
+2
-1
README.md
22-july-2020/my-app/README.md
+1
-1
angular.json
22-july-2020/my-app/angular.json
+8
-8
app.e2e-spec.ts
22-july-2020/my-app/e2e/src/app.e2e-spec.ts
+1
-1
karma.conf.js
22-july-2020/my-app/karma.conf.js
+1
-1
package-lock.json
22-july-2020/my-app/package-lock.json
+134
-106
package.json
22-july-2020/my-app/package.json
+1
-1
app-routing.module.ts
22-july-2020/my-app/src/app/app-routing.module.ts
+12
-4
app.component.html
22-july-2020/my-app/src/app/app.component.html
+53
-216
app.component.spec.ts
22-july-2020/my-app/src/app/app.component.spec.ts
+3
-3
app.component.ts
22-july-2020/my-app/src/app/app.component.ts
+2
-2
app.module.ts
22-july-2020/my-app/src/app/app.module.ts
+9
-1
home.component.html
22-july-2020/my-app/src/app/home/home.component.html
+40
-0
home.component.scss
22-july-2020/my-app/src/app/home/home.component.scss
+0
-0
home.component.spec.ts
22-july-2020/my-app/src/app/home/home.component.spec.ts
+25
-0
home.component.ts
22-july-2020/my-app/src/app/home/home.component.ts
+31
-0
lecturer.component.html
22-july-2020/my-app/src/app/lecturer/lecturer.component.html
+21
-0
lecturer.component.scss
22-july-2020/my-app/src/app/lecturer/lecturer.component.scss
+0
-0
lecturer.component.spec.ts
...y-2020/my-app/src/app/lecturer/lecturer.component.spec.ts
+25
-0
lecturer.component.ts
22-july-2020/my-app/src/app/lecturer/lecturer.component.ts
+16
-0
mock-courses.ts
22-july-2020/my-app/src/app/mock/mock-courses.ts
+9
-0
mock-lecturers.ts
22-july-2020/my-app/src/app/mock/mock-lecturers.ts
+9
-0
mock-scores.ts
22-july-2020/my-app/src/app/mock/mock-scores.ts
+9
-0
mock-students.ts
22-july-2020/my-app/src/app/mock/mock-students.ts
+6
-5
courses.ts
22-july-2020/my-app/src/app/models/courses.ts
+4
-0
lecturers.ts
22-july-2020/my-app/src/app/models/lecturers.ts
+5
-0
scores.ts
22-july-2020/my-app/src/app/models/scores.ts
+5
-0
students.ts
22-july-2020/my-app/src/app/models/students.ts
+0
-0
score.component.html
22-july-2020/my-app/src/app/score/score.component.html
+23
-0
score.component.scss
22-july-2020/my-app/src/app/score/score.component.scss
+0
-0
score.component.spec.ts
22-july-2020/my-app/src/app/score/score.component.spec.ts
+25
-0
score.component.ts
22-july-2020/my-app/src/app/score/score.component.ts
+18
-0
student.component.html
22-july-2020/my-app/src/app/student/student.component.html
+23
-0
student.component.scss
22-july-2020/my-app/src/app/student/student.component.scss
+0
-0
student.component.spec.ts
...uly-2020/my-app/src/app/student/student.component.spec.ts
+25
-0
student.component.ts
22-july-2020/my-app/src/app/student/student.component.ts
+17
-0
index.html
22-july-2020/my-app/src/index.html
+5
-2
No files found.
22-july-2020/my-app/.angulardoc.json
View file @
92c8f837
{
"repoId"
:
"
de251163-a533-47ca-80ca-afe94694debb
"
,
"repoId"
:
"
3ae6f6a7-fd70-4973-bf02-7c452c232276
"
,
"lastSync"
:
0
}
\ No newline at end of file
22-july-2020/my-app/README.md
View file @
92c8f837
# My
A
pp
# My
a
pp
This project was generated with
[
Angular CLI
](
https://github.com/angular/angular-cli
)
version 10.0.2.
...
...
22-july-2020/my-app/angular.json
View file @
92c8f837
...
...
@@ -3,7 +3,7 @@
"version"
:
1
,
"newProjectRoot"
:
"projects"
,
"projects"
:
{
"my
-
app"
:
{
"myapp"
:
{
"projectType"
:
"application"
,
"schematics"
:
{
"@schematics/angular:component"
:
{
...
...
@@ -17,7 +17,7 @@
"build"
:
{
"builder"
:
"@angular-devkit/build-angular:browser"
,
"options"
:
{
"outputPath"
:
"dist/my
-
app"
,
"outputPath"
:
"dist/myapp"
,
"index"
:
"src/index.html"
,
"main"
:
"src/main.ts"
,
"polyfills"
:
"src/polyfills.ts"
,
...
...
@@ -66,18 +66,18 @@
"serve"
:
{
"builder"
:
"@angular-devkit/build-angular:dev-server"
,
"options"
:
{
"browserTarget"
:
"my
-
app:build"
"browserTarget"
:
"myapp:build"
},
"configurations"
:
{
"production"
:
{
"browserTarget"
:
"my
-
app:build:production"
"browserTarget"
:
"myapp:build:production"
}
}
},
"extract-i18n"
:
{
"builder"
:
"@angular-devkit/build-angular:extract-i18n"
,
"options"
:
{
"browserTarget"
:
"my
-
app:build"
"browserTarget"
:
"myapp:build"
}
},
"test"
:
{
...
...
@@ -114,15 +114,15 @@
"builder"
:
"@angular-devkit/build-angular:protractor"
,
"options"
:
{
"protractorConfig"
:
"e2e/protractor.conf.js"
,
"devServerTarget"
:
"my
-
app:serve"
"devServerTarget"
:
"myapp:serve"
},
"configurations"
:
{
"production"
:
{
"devServerTarget"
:
"my
-
app:serve:production"
"devServerTarget"
:
"myapp:serve:production"
}
}
}
}
}},
"defaultProject"
:
"my
-
app"
"defaultProject"
:
"myapp"
}
22-july-2020/my-app/e2e/src/app.e2e-spec.ts
View file @
92c8f837
...
...
@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
it
(
'should display welcome message'
,
()
=>
{
page
.
navigateTo
();
expect
(
page
.
getTitleText
()).
toEqual
(
'my
-
app app is running!'
);
expect
(
page
.
getTitleText
()).
toEqual
(
'myapp app is running!'
);
});
afterEach
(
async
()
=>
{
...
...
22-july-2020/my-app/karma.conf.js
View file @
92c8f837
...
...
@@ -16,7 +16,7 @@ module.exports = function (config) {
clearContext
:
false
// leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter
:
{
dir
:
require
(
'path'
).
join
(
__dirname
,
'./coverage/my
-
app'
),
dir
:
require
(
'path'
).
join
(
__dirname
,
'./coverage/myapp'
),
reports
:
[
'html'
,
'lcovonly'
,
'text-summary'
],
fixWebpackSourcePaths
:
true
},
...
...
22-july-2020/my-app/package-lock.json
View file @
92c8f837
{
"name"
:
"my
-
app"
,
"name"
:
"myapp"
,
"version"
:
"0.0.0"
,
"lockfileVersion"
:
1
,
"requires"
:
true
,
"dependencies"
:
{
"@angular-devkit/architect"
:
{
"version"
:
"0.1000.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1000.
3
.tgz"
,
"integrity"
:
"sha512-
8ZszTAkRvGGMXERFvyLT6SJPfJXjNNfHamA76uDPTBXy+EijJ1XVTUr1+SYEe73E4ovtxqxAnsApEFxS7/Ni5w
=="
,
"version"
:
"0.1000.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1000.
4
.tgz"
,
"integrity"
:
"sha512-
n0DXdrecxXupxKf37sv5Oky5QpQXOHPgLDAmyAwevr31yLEwyZ3OQoVxaC68AMQJFYMlHYYMwi6gdIcFmL6W0g
=="
,
"dev"
:
true
,
"requires"
:
{
"@angular-devkit/core"
:
"10.0.
3
"
,
"@angular-devkit/core"
:
"10.0.
4
"
,
"rxjs"
:
"6.5.5"
}
},
"@angular-devkit/build-angular"
:
{
"version"
:
"0.1000.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.1000.
3
.tgz"
,
"integrity"
:
"sha512-
r3KJj39AwkYYzbixSM095l4fOGvhyByr0XvmAEu0l5dGGdL4tNXywvgXkNhEVRDo0jZYpTMegiTqzOik/9YCDw
=="
,
"version"
:
"0.1000.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.1000.
4
.tgz"
,
"integrity"
:
"sha512-
jAl2xsj1g4RdQ4MBLSZ8Dsj3MUKjYKK+e73DxVHSTo0166T1p/7gdgSehLHWVlavJLDVM+fjYdt4kP12Z7FBjQ
=="
,
"dev"
:
true
,
"requires"
:
{
"@angular-devkit/architect"
:
"0.1000.
3
"
,
"@angular-devkit/build-optimizer"
:
"0.1000.
3
"
,
"@angular-devkit/build-webpack"
:
"0.1000.
3
"
,
"@angular-devkit/core"
:
"10.0.
3
"
,
"@angular-devkit/architect"
:
"0.1000.
4
"
,
"@angular-devkit/build-optimizer"
:
"0.1000.
4
"
,
"@angular-devkit/build-webpack"
:
"0.1000.
4
"
,
"@angular-devkit/core"
:
"10.0.
4
"
,
"@babel/core"
:
"7.9.6"
,
"@babel/generator"
:
"7.9.6"
,
"@babel/plugin-transform-runtime"
:
"7.9.6"
,
...
...
@@ -31,8 +31,8 @@
"@babel/runtime"
:
"7.9.6"
,
"@babel/template"
:
"7.8.6"
,
"@jsdevtools/coverage-istanbul-loader"
:
"3.0.3"
,
"@ngtools/webpack"
:
"10.0.
3
"
,
"ajv"
:
"6.12.
2
"
,
"@ngtools/webpack"
:
"10.0.
4
"
,
"ajv"
:
"6.12.
3
"
,
"autoprefixer"
:
"9.8.0"
,
"babel-loader"
:
"8.1.0"
,
"browserslist"
:
"^4.9.1"
,
...
...
@@ -88,9 +88,9 @@
}
},
"@angular-devkit/build-optimizer"
:
{
"version"
:
"0.1000.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.1000.
3
.tgz"
,
"integrity"
:
"sha512-
6mFoubg08UCWC0fE2mGoawEt2R1VlGStvUNAP2PRCjoj1ZySa1NnVYoKk65cyAAA3K2o7vSoDZesNq1uABjZbg
=="
,
"version"
:
"0.1000.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.1000.
4
.tgz"
,
"integrity"
:
"sha512-
usscQipxIU2yJVmBdyIDPmJZ+ltOjsX4VbMkGM2IdJHCIi9uEk2E3+YLxzyU5Xl5tXEK61AQt4YWUimt8Kg0GA
=="
,
"dev"
:
true
,
"requires"
:
{
"loader-utils"
:
"2.0.0"
,
...
...
@@ -100,23 +100,23 @@
}
},
"@angular-devkit/build-webpack"
:
{
"version"
:
"0.1000.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1000.
3
.tgz"
,
"integrity"
:
"sha512-
+vmn9d9THFubSWS28K1+nElUfOrhT576ptVZMd0a5S24momV8loW3J8iBOBfnGal/P86ZCAyP46kSirlAzH9Jg
=="
,
"version"
:
"0.1000.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1000.
4
.tgz"
,
"integrity"
:
"sha512-
ZPXrm1+UyKbMZtnU+b5jdtZPFDYs8Pu5lHhJDzX6bk0TxtuXws+nwaeUs6WkfwXft8cksxK2WwGr57XX3OT7nw
=="
,
"dev"
:
true
,
"requires"
:
{
"@angular-devkit/architect"
:
"0.1000.
3
"
,
"@angular-devkit/core"
:
"10.0.
3
"
,
"@angular-devkit/architect"
:
"0.1000.
4
"
,
"@angular-devkit/core"
:
"10.0.
4
"
,
"rxjs"
:
"6.5.5"
}
},
"@angular-devkit/core"
:
{
"version"
:
"10.0.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/core/-/core-10.0.
3
.tgz"
,
"integrity"
:
"sha512-
m27ogjq44j80x64RnEswSvy8UewUqeCVJBbEuY6fzrWoaiCf12sgPlrSCwjwfhtQrLgl1e/i9zYA7U6ulGRXyg
=="
,
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/core/-/core-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
Pe60BJCcAVtOkhXn2c+ql1NfyMCu421jWmKwl1KsW1DXclpGB+UIa560ICBgEwla6DyltMKEN/lX+P4WOskpkQ
=="
,
"dev"
:
true
,
"requires"
:
{
"ajv"
:
"6.12.
2
"
,
"ajv"
:
"6.12.
3
"
,
"fast-json-stable-stringify"
:
"2.1.0"
,
"magic-string"
:
"0.25.7"
,
"rxjs"
:
"6.5.5"
,
...
...
@@ -124,35 +124,35 @@
}
},
"@angular-devkit/schematics"
:
{
"version"
:
"10.0.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-10.0.
3
.tgz"
,
"integrity"
:
"sha512-
TjA2ZSPCgUK9l4FiRTIQY7DceXMAvNzOMWffy9o3kv2HPtxG9kuBrQXk++Z99zpylK0cAsugV7t/5ANpUkrIiA
=="
,
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
k9b73XkKQK8yFbq+dQqJnxAMG3mm/YR1KQlsQzOEVdw8cqqEALLoUXg/73hT5eUnSsNWmyDLBzEAyNtemmmI4w
=="
,
"dev"
:
true
,
"requires"
:
{
"@angular-devkit/core"
:
"10.0.
3
"
,
"@angular-devkit/core"
:
"10.0.
4
"
,
"ora"
:
"4.0.4"
,
"rxjs"
:
"6.5.5"
}
},
"@angular/animations"
:
{
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/animations/-/animations-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
UzQiWhDHY6wixS1Nh+Jwpzq1weiLGXJPt3Pa4pETpt3Hg7MIUu62dik6OFWuGYQPbn9DJYH+CH+sRxN1GCVjww
=="
,
"version"
:
"10.0.
5
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/animations/-/animations-10.0.
5
.tgz"
,
"integrity"
:
"sha512-
vHWn7NJiiDAok36GSBJ0y/nqjd4UFl9WGIEsvydUqnyBJ0scuqJa+hADrWwqkK7b/xVW9ARVG00NXmemEPUVGA
=="
,
"requires"
:
{
"tslib"
:
"^2.0.0"
}
},
"@angular/cli"
:
{
"version"
:
"10.0.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/cli/-/cli-10.0.
3
.tgz"
,
"integrity"
:
"sha512-
ONK8YG20KuakQetY0lPKDAOA3uBoLurdpSfFspFkcECyDimwJYSEydi3FUnCxEexeoKvrQWcol+q+u9YPoHCyg
=="
,
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/cli/-/cli-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
hmr1fXT8+6wOoh7abIg154wdP9QCMPHMShWPEYHks6ARmlRfX5k+BykQMzgI8H6tMNLoR+DAlO5+pPouJEyilQ
=="
,
"dev"
:
true
,
"requires"
:
{
"@angular-devkit/architect"
:
"0.1000.
3
"
,
"@angular-devkit/core"
:
"10.0.
3
"
,
"@angular-devkit/schematics"
:
"10.0.
3
"
,
"@schematics/angular"
:
"10.0.
3
"
,
"@schematics/update"
:
"0.1000.
3
"
,
"@angular-devkit/architect"
:
"0.1000.
4
"
,
"@angular-devkit/core"
:
"10.0.
4
"
,
"@angular-devkit/schematics"
:
"10.0.
4
"
,
"@schematics/angular"
:
"10.0.
4
"
,
"@schematics/update"
:
"0.1000.
4
"
,
"@yarnpkg/lockfile"
:
"1.1.0"
,
"ansi-colors"
:
"4.1.1"
,
"debug"
:
"4.1.1"
,
...
...
@@ -185,25 +185,25 @@
}
},
"@angular/common"
:
{
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/common/-/common-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
9DJMD8GgHz7i2fMz0f1IHZlDSIz83uE6fcH8SIq1iCSWT2dubRRpCX000VpIyhAgfkCgdNCYXQ7VGNsZceoag
Q=="
,
"version"
:
"10.0.
5
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/common/-/common-10.0.
5
.tgz"
,
"integrity"
:
"sha512-
AKmD/X13q3zzo5uTV/M4dWpAqJ136187rL4VweRc6b5t/oZ3VGcejjElZebgtoyGTye8luIP6fZ/LMb580lBl
Q=="
,
"requires"
:
{
"tslib"
:
"^2.0.0"
}
},
"@angular/compiler"
:
{
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/compiler/-/compiler-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
1rnEmSHJtrKC1QD+PyF36xwMnSqG4Slgi5+PYk3BxIa5vbWBibrYijtd/uCNhscfPSpfb06MVM2mRsrc+BmbQg
=="
,
"version"
:
"10.0.
5
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/compiler/-/compiler-10.0.
5
.tgz"
,
"integrity"
:
"sha512-
HAh+g78l6F9LcQtlsUmxmM62p6B9UuTt5aAROVLt8o4Dr643VxQS2itiorojKHRW/W6Vu1e8GRke+pq5lM5LJw
=="
,
"requires"
:
{
"tslib"
:
"^2.0.0"
}
},
"@angular/compiler-cli"
:
{
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
uZKk6Ab4Pw8qcaXhpORuEoCbPSHWx3TWcs9OXIKIhzOOoMMe9OSt2SzOkHCrySSaik1IhQODnHww7sGRw5mxwQ
=="
,
"version"
:
"10.0.
5
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-10.0.
5
.tgz"
,
"integrity"
:
"sha512-
skeosaJO9mdKp+X3zOdNdpImzTsioM0DannRTPfWI0NbAwlbFCeG3Nctpy+0Ki18WVZ5Lj+hw5BMnVKCjlbu8w
=="
,
"dev"
:
true
,
"requires"
:
{
"canonical-path"
:
"1.0.0"
,
...
...
@@ -384,41 +384,41 @@
}
},
"@angular/core"
:
{
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/core/-/core-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
lA8RDagJ/O0gUX95h00+nnUZs/1QmmhAVWVtHcuI12ueC836tJhLtPGnEx9ib9NXrgRyNwb8lO1xJPmmuQgdQQ
=="
,
"version"
:
"10.0.
5
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/core/-/core-10.0.
5
.tgz"
,
"integrity"
:
"sha512-
zoIxIi/UaRImeC1uD+eIKrdcihvQR/zfbqKgK67IPy/tghijxge1Tbl8FWIAT0ncAj0XH/JHsWnVdUV/TUI+CA
=="
,
"requires"
:
{
"tslib"
:
"^2.0.0"
}
},
"@angular/forms"
:
{
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/forms/-/forms-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
SJSYZCfHua9fi/dks1q+ad9OGBblRUn3Q1V4B7r99fJYr39qRiIHcegikhY4h8H3Wk1bJRGJG7iXmxJhjWXK3Q
=="
,
"version"
:
"10.0.
5
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/forms/-/forms-10.0.
5
.tgz"
,
"integrity"
:
"sha512-
Bv+KEPjqd+ndl/Z0w1uWsBmvb8Je1JObHRjbKAcW7c4r1CVobm+QJv6r6MDL+FOs78lnrm8baekGLQyHH1uO7g
=="
,
"requires"
:
{
"tslib"
:
"^2.0.0"
}
},
"@angular/platform-browser"
:
{
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
iaZ8pFS5XUgPCO6/C47TzSFPzlzgleayq099cVOOx9z0t/SwUCSKt4AdAVhyQ8RTnx6l1JmmwBgRaXpScZlqz
g=="
,
"version"
:
"10.0.
5
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.0.
5
.tgz"
,
"integrity"
:
"sha512-
bmknyK18yMv+iLCqcrfcpq3/2Ls9mRA1lOe7YhSGpHxM969Rb6Av8vJNW+uv0y7+gTvxacmpiQO8iryr/xvzR
g=="
,
"requires"
:
{
"tslib"
:
"^2.0.0"
}
},
"@angular/platform-browser-dynamic"
:
{
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
RoUMqYhUwF6+Mvk/aH0IZQ1D0SDEi9k5EZlx9CJ3RvNuKygk7to+S4vMWVpGxFQlwdS3bytRLKi+Kki6f4nLkg
=="
,
"version"
:
"10.0.
5
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-10.0.
5
.tgz"
,
"integrity"
:
"sha512-
Qa6RM9aJuuw5E7BeGBG9/kCOtssI6Wyzbb/8awzZFF6Fjqom1kef185nwx7SgQs2cdrhqRAgjt0eDJqTfSVb+Q
=="
,
"requires"
:
{
"tslib"
:
"^2.0.0"
}
},
"@angular/router"
:
{
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/router/-/router-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
iDLWdmltU5pZ6M/fBKC5Kg2o9Aqb1YJ+oHXFu186BQAl2RNeNCmMQ0VaCxjpMgD/MoSxpuRuGQ6rRrCSFCxtcQ
=="
,
"version"
:
"10.0.
5
"
,
"resolved"
:
"https://registry.npmjs.org/@angular/router/-/router-10.0.
5
.tgz"
,
"integrity"
:
"sha512-
hUGffVOjkdaN5IN9fSipm5ED+XGyfc9yOr5hYr/6YA3H4xaQzXZGlzrrDhAVltTyYalD2LJeXhzlvp59lXgcjg
=="
,
"requires"
:
{
"tslib"
:
"^2.0.0"
}
...
...
@@ -1531,12 +1531,12 @@
}
},
"@ngtools/webpack"
:
{
"version"
:
"10.0.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@ngtools/webpack/-/webpack-10.0.
3
.tgz"
,
"integrity"
:
"sha512-
0TuvYMCLtsApLtCHXeDBYGEoAQXzsRLpgFxPM5W7CGcj0ecthZO4NYrMAt+J8ky//KmbxqQSFHWmss2cbirIPA
=="
,
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@ngtools/webpack/-/webpack-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
qzWkmVUUvr+2kiCtVLyopRwaBbExWtsGrgNVnJoAhtKKDflT4W33FpyJZJvxHwL6nfGGdb261Gfw7teIlCGjog
=="
,
"dev"
:
true
,
"requires"
:
{
"@angular-devkit/core"
:
"10.0.
3
"
,
"@angular-devkit/core"
:
"10.0.
4
"
,
"enhanced-resolve"
:
"4.1.1"
,
"rxjs"
:
"6.5.5"
,
"webpack-sources"
:
"1.4.3"
...
...
@@ -1586,23 +1586,23 @@
}
},
"@schematics/angular"
:
{
"version"
:
"10.0.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@schematics/angular/-/angular-10.0.
3
.tgz"
,
"integrity"
:
"sha512-
Or2pCqjpPbAvmbxtfMosGwQbNbSL4xodK5Key7678ZAPGB+rcxrVkBI9yxEJ/qzF/LrmMoKqy0JCmVLK7Grpog
=="
,
"version"
:
"10.0.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@schematics/angular/-/angular-10.0.
4
.tgz"
,
"integrity"
:
"sha512-
wTpuVfPKALOcOHfD7Y222r/IfqJgpqASyoXdkzf7dZVrLXjNy/XrKuc2Vfn85Ce9lnme0xT5ww+KjbSRc0cSUw
=="
,
"dev"
:
true
,
"requires"
:
{
"@angular-devkit/core"
:
"10.0.
3
"
,
"@angular-devkit/schematics"
:
"10.0.
3
"
"@angular-devkit/core"
:
"10.0.
4
"
,
"@angular-devkit/schematics"
:
"10.0.
4
"
}
},
"@schematics/update"
:
{
"version"
:
"0.1000.
3
"
,
"resolved"
:
"https://registry.npmjs.org/@schematics/update/-/update-0.1000.
3
.tgz"
,
"integrity"
:
"sha512-N
ncdklmzi1tyzkoAh7GlSslxriRhftlmfqPVmFHrrPRttYACtT/QH5qcWsrPgTPpHGINYEHrPjpeljsMoMchBQ
=="
,
"version"
:
"0.1000.
4
"
,
"resolved"
:
"https://registry.npmjs.org/@schematics/update/-/update-0.1000.
4
.tgz"
,
"integrity"
:
"sha512-N
kIUsqnEqG6jhW6b1xXYmgW02WYAN9/IoswnZnaQrbGzxroNVQKURiV4AP22sZLCr7gQ9NJwjXxO5rxbzbY8wg
=="
,
"dev"
:
true
,
"requires"
:
{
"@angular-devkit/core"
:
"10.0.
3
"
,
"@angular-devkit/schematics"
:
"10.0.
3
"
,
"@angular-devkit/core"
:
"10.0.
4
"
,
"@angular-devkit/schematics"
:
"10.0.
4
"
,
"@yarnpkg/lockfile"
:
"1.1.0"
,
"ini"
:
"1.3.5"
,
"npm-package-arg"
:
"^8.0.0"
,
...
...
@@ -1656,9 +1656,9 @@
"dev"
:
true
},
"@types/node"
:
{
"version"
:
"12.12.5
1
"
,
"resolved"
:
"https://registry.npmjs.org/@types/node/-/node-12.12.5
1
.tgz"
,
"integrity"
:
"sha512-
6ILqt8iNThALrxDv2Q4LyYFQxULQz96HKNIFd4s9QRQaiHINYeUpLqeU/2IU7YMtvipG1fQVAy//vY8/fX1Y9w
=="
,
"version"
:
"12.12.5
3
"
,
"resolved"
:
"https://registry.npmjs.org/@types/node/-/node-12.12.5
3
.tgz"
,
"integrity"
:
"sha512-
51MYTDTyCziHb70wtGNFRwB4l+5JNvdqzFSkbDvpbftEgVUBEE+T5f7pROhWMp/fxp07oNIEQZd5bbfAH22ohQ
=="
,
"dev"
:
true
},
"@types/q"
:
{
...
...
@@ -2011,9 +2011,9 @@
}
},
"ajv"
:
{
"version"
:
"6.12.
2
"
,
"resolved"
:
"https://registry.npmjs.org/ajv/-/ajv-6.12.
2
.tgz"
,
"integrity"
:
"sha512-
k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ
=="
,
"version"
:
"6.12.
3
"
,
"resolved"
:
"https://registry.npmjs.org/ajv/-/ajv-6.12.
3
.tgz"
,
"integrity"
:
"sha512-
4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA
=="
,
"dev"
:
true
,
"requires"
:
{
"fast-deep-equal"
:
"^3.1.1"
,
...
...
@@ -2884,9 +2884,9 @@
}
},
"caniuse-lite"
:
{
"version"
:
"1.0.3000110
5
"
,
"resolved"
:
"https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.3000110
5
.tgz"
,
"integrity"
:
"sha512-
JupOe6+dGMr7E20siZHIZQwYqrllxotAhiaej96y6x00b/48rPt42o+SzOSCPbrpsDWvRja40Hwrj0g0q6LZJg
=="
,
"version"
:
"1.0.3000110
6
"
,
"resolved"
:
"https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.3000110
6
.tgz"
,
"integrity"
:
"sha512-
XqSQKt9Fd3Z9BoN0cpSaITcTInKhMNGkaWtQ4rDnyQU1BJzzWDWCUi3cJflaPWk2kbrkYkfMrMrjIFzb3kd6NQ
=="
,
"dev"
:
true
},
"canonical-path"
:
{
...
...
@@ -4312,9 +4312,9 @@
"dev"
:
true
},
"electron-to-chromium"
:
{
"version"
:
"1.3.50
2
"
,
"resolved"
:
"https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.50
2
.tgz"
,
"integrity"
:
"sha512-
TIeXOaHAvfP7FemGUtAJxStmOc1YFGWFNqdey/4Nk41L9b1nMmDVDGNMIWhZJvOfJxix6Cv5FGEnBK+yvw3UT
g=="
,
"version"
:
"1.3.50
9
"
,
"resolved"
:
"https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.50
9
.tgz"
,
"integrity"
:
"sha512-
cN4lkjNRuTG8rtAqTOVgwpecEC2kbKA04PG6YijcKGHK/kD0xLjiqExcAOmLUwtXZRF8cBeam2I0VZcih919U
g=="
,
"dev"
:
true
},
"elliptic"
:
{
...
...
@@ -4650,9 +4650,9 @@
"dev"
:
true
},
"events"
:
{
"version"
:
"3.
1
.0"
,
"resolved"
:
"https://registry.npmjs.org/events/-/events-3.
1
.0.tgz"
,
"integrity"
:
"sha512-
Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgW
g=="
,
"version"
:
"3.
2
.0"
,
"resolved"
:
"https://registry.npmjs.org/events/-/events-3.
2
.0.tgz"
,
"integrity"
:
"sha512-
/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnl
g=="
,
"dev"
:
true
},
"eventsource"
:
{
...
...
@@ -7790,9 +7790,9 @@
}
},
"node-releases"
:
{
"version"
:
"1.1.
59
"
,
"resolved"
:
"https://registry.npmjs.org/node-releases/-/node-releases-1.1.
59
.tgz"
,
"integrity"
:
"sha512-
H3JrdUczbdiwxN5FuJPyCHnGHIFqQ0wWxo+9j1kAXAzqNMAHlo+4I/sYYxpyK0irQ73HgdiyzD32oqQDcU2Osw
=="
,
"version"
:
"1.1.
60
"
,
"resolved"
:
"https://registry.npmjs.org/node-releases/-/node-releases-1.1.
60
.tgz"
,
"integrity"
:
"sha512-
gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA
=="
,
"dev"
:
true
},
"normalize-package-data"
:
{
...
...
@@ -9055,15 +9055,43 @@
}
},
"postcss-modules-local-by-default"
:
{
"version"
:
"3.0.
2
"
,
"resolved"
:
"https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.
2
.tgz"
,
"integrity"
:
"sha512-
jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ
=="
,
"version"
:
"3.0.
3
"
,
"resolved"
:
"https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.
3
.tgz"
,
"integrity"
:
"sha512-
e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw
=="
,
"dev"
:
true
,
"requires"
:
{
"icss-utils"
:
"^4.1.1"
,
"postcss"
:
"^7.0.
16
"
,
"postcss"
:
"^7.0.
32
"
,
"postcss-selector-parser"
:
"^6.0.2"
,
"postcss-value-parser"
:
"^4.0.0"
"postcss-value-parser"
:
"^4.1.0"
},
"dependencies"
:
{
"postcss"
:
{
"version"
:
"7.0.32"
,
"resolved"
:
"https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz"
,
"integrity"
:
"sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw=="
,
"dev"
:
true
,
"requires"
:
{
"chalk"
:
"^2.4.2"
,
"source-map"
:
"^0.6.1"
,
"supports-color"
:
"^6.1.0"
}
},
"source-map"
:
{
"version"
:
"0.6.1"
,
"resolved"
:
"https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
,
"integrity"
:
"sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
,
"dev"
:
true
},
"supports-color"
:
{
"version"
:
"6.1.0"
,
"resolved"
:
"https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz"
,
"integrity"
:
"sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ=="
,
"dev"
:
true
,
"requires"
:
{
"has-flag"
:
"^3.0.0"
}
}
}
},
"postcss-modules-scope"
:
{
...
...
@@ -12362,12 +12390,12 @@
"dev"
:
true
},
"watchpack"
:
{
"version"
:
"1.7.
2
"
,
"resolved"
:
"https://registry.npmjs.org/watchpack/-/watchpack-1.7.
2
.tgz"
,
"integrity"
:
"sha512-
ymVbbQP40MFTp+cNMvpyBpBtygHnPzPkHqoIwRRj/0B8KhqQwV8LaKjtbaxF2lK4vl8zN9wCxS46IFCU5K4W0
g=="
,
"version"
:
"1.7.
4
"
,
"resolved"
:
"https://registry.npmjs.org/watchpack/-/watchpack-1.7.
4
.tgz"
,
"integrity"
:
"sha512-
aWAgTW4MoSJzZPAicljkO1hsi1oKj/RRq/OJQh2PKI2UKL04c2Bs+MBOB+BBABHTXJpf9mCwHN7ANCvYsvY2s
g=="
,
"dev"
:
true
,
"requires"
:
{
"chokidar"
:
"^3.4.
0
"
,
"chokidar"
:
"^3.4.
1
"
,
"graceful-fs"
:
"^4.1.2"
,
"neo-async"
:
"^2.5.0"
,
"watchpack-chokidar2"
:
"^2.0.0"
...
...
22-july-2020/my-app/package.json
View file @
92c8f837
{
"name"
:
"my
-
app"
,
"name"
:
"myapp"
,
"version"
:
"0.0.0"
,
"scripts"
:
{
"ng"
:
"ng"
,
...
...
22-july-2020/my-app/src/app/app-routing.module.ts
View file @
92c8f837
import
{
NgModule
}
from
'@angular/core'
;
import
{
Routes
,
RouterModule
}
from
'@angular/router'
;
import
{
HomeComponent
}
from
'./home/home.component'
;
import
{
StudentComponent
}
from
'./student/student.component'
;
import
{
LecturerComponent
}
from
'./lecturer/lecturer.component'
;
import
{
ScoreComponent
}
from
'./score/score.component'
;
const
routes
:
Routes
=
[];
const
routes
:
Routes
=
[
{
path
:
''
,
component
:
HomeComponent
},
{
path
:
'student'
,
component
:
StudentComponent
},
{
path
:
'lecturer'
,
component
:
LecturerComponent
},
{
path
:
'score'
,
component
:
ScoreComponent
},
];
@
NgModule
({
imports
:
[
RouterModule
.
forRoot
(
routes
)],
exports
:
[
RouterModule
]
exports
:
[
RouterModule
]
,
})
export
class
AppRoutingModule
{
}
export
class
AppRoutingModule
{}
22-july-2020/my-app/src/app/app.component.html
View file @
92c8f837
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host
{
...
...
@@ -299,237 +291,82 @@
</style>
<!-- Toolbar -->
<div
class=
"toolbar"
role=
"banner"
>
<!-- Toolbar -->
<nav
class=
"navbar navbar-expand-lg navbar-light bg-light"
>
<img
width=
"40"
alt=
"Angular Logo"
src=
"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>
{{ title }}
</span>
<div
class=
"spacer"
></div>
<a
aria-label=
"Angular on twitter"
target=
"_blank"
rel=
"noopener"
href=
"https://twitter.com/angular"
title=
"Twitter"
>
<svg
id=
"twitter-logo"
height=
"24"
data-name=
"Logo"
xmlns=
"http://www.w3.org/2000/svg"
viewBox=
"0 0 400 400"
>
<rect
width=
"400"
height=
"400"
fill=
"none"
/>
<path
d=
"M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
fill=
"#fff"
/>
</svg>
</a>
</div>
<div
class=
"content"
role=
"main"
>
<!-- Highlight Card -->
<div
class=
"card highlight-card card-small"
>
<svg
id=
"rocket"
alt=
"Rocket Ship"
xmlns=
"http://www.w3.org/2000/svg"
width=
"101.678"
height=
"101.678"
viewBox=
"0 0 101.678 101.678"
>
<g
id=
"Group_83"
data-name=
"Group 83"
transform=
"translate(-141 -696)"
>
<circle
id=
"Ellipse_8"
data-name=
"Ellipse 8"
cx=
"50.839"
cy=
"50.839"
r=
"50.839"
transform=
"translate(141 696)"
fill=
"#dd0031"
/>
<g
id=
"Group_47"
data-name=
"Group 47"
transform=
"translate(165.185 720.185)"
>
<path
id=
"Path_33"
data-name=
"Path 33"
d=
"M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z"
transform=
"translate(0.371 3.363)"
fill=
"#fff"
/>
<path
id=
"Path_34"
data-name=
"Path 34"
d=
"M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z"
transform=
"translate(0 0.005)"
fill=
"#fff"
/>
</g>
</g>
</svg>
<span>
{{ title }} app is running!
</span>
<svg
id=
"rocket-smoke"
alt=
"Rocket Ship Smoke"
xmlns=
"http://www.w3.org/2000/svg"
width=
"516.119"
height=
"1083.632"
viewBox=
"0 0 516.119 1083.632"
>
<path
id=
"Path_40"
data-name=
"Path 40"
d=
"M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z"
transform=
"translate(-147.025 -140.939)"
fill=
"#f5f5f5"
/>
</svg>
<a
class=
"navbar-brand"
href=
"#"
>
{{ title }}
</a>
<button
class=
"navbar-toggler"
type=
"button"
data-toggle=
"collapse"
data-target=
"#navbarTogglerDemo02"
aria-controls=
"navbarTogglerDemo02"
aria-expanded=
"false"
aria-label=
"Toggle navigation"
>
<span
class=
"navbar-toggler-icon"
></span>
</button>
<div
class=
"collapse navbar-collapse"
id=
"navbarTogglerDemo02"
>
<ul
class=
"navbar-nav mr-auto mt-2 mt-lg-0"
>
<li
class=
"nav-item active"
>
<a
class=
"nav-link"
href=
"/"
>
Home
<span
class=
"sr-only"
>
(current)
</span></a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"/student"
>
Student
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link"
href=
"/lecturer"
>
Lecturer
</a>
</li>
<li
class=
"nav-item"
>
<a
class=
"nav-link disabled"
href=
"/score"
>
Score
</a>
</li>
</ul>
<form
class=
"form-inline my-2 my-lg-0"
>
<input
class=
"form-control mr-sm-2"
type=
"search"
placeholder=
"Search"
>
<button
class=
"btn btn-outline-success my-2 my-sm-0"
type=
"submit"
>
Search
</button>
</form>
</div>
<!-- Resources -->
<h2>
Resources
</h2>
<p>
Here are some links to help you get started:
</p>
<div
class=
"card-container"
>
<a
class=
"card"
target=
"_blank"
rel=
"noopener"
href=
"https://angular.io/tutorial"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"
/></svg>
<span>
Learn Angular
</span>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
/></svg>
</a>
<a
class=
"card"
target=
"_blank"
rel=
"noopener"
href=
"https://angular.io/cli"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"
/></svg>
<span>
CLI Documentation
</span>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
/></svg>
</a>
<a
class=
"card"
target=
"_blank"
rel=
"noopener"
href=
"https://blog.angular.io/"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"
/></svg>
<span>
Angular Blog
</span>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
/></svg>
</a>
</div>
<!-- Next Steps -->
<h2>
Next Steps
</h2>
<p>
What do you want to do next with your app?
</p>
<input
type=
"hidden"
#
selection
>
<div
class=
"card-container"
>
<div
class=
"card card-small"
(
click
)="
selection
.
value =
'component'
"
tabindex=
"0"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
/></svg>
<span>
New Component
</span>
</div>
</nav>
<div
class=
"card card-small"
(
click
)="
selection
.
value =
'material'
"
tabindex=
"0"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
/></svg>
<span>
Angular Material
</span>
</div>
<div
class=
"card card-small"
(
click
)="
selection
.
value =
'pwa'
"
tabindex=
"0"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
/></svg>
<span>
Add PWA Support
</span>
</div>
<div
class=
"card card-small"
(
click
)="
selection
.
value =
'dependency'
"
tabindex=
"0"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
/></svg>
<span>
Add Dependency
</span>
</div>
<div
class=
"card card-small"
(
click
)="
selection
.
value =
'test'
"
tabindex=
"0"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
/></svg>
<span>
Run and Watch Tests
</span>
</div>
<div
class=
"card card-small"
(
click
)="
selection
.
value =
'build'
"
tabindex=
"0"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
/></svg>
<div
class=
"content"
role=
"main"
>
<router-outlet></router-outlet></div>
<span>
Build for Production
</span>
</div>
</div>
<!-- Links -->
<!-- Footer -->
<footer
class=
"page-footer font-small pt-5"
>
<!-- Footer Elements -->
<div
class=
"container"
>
<!-- Call to action -->
<ul
class=
"list-unstyled list-inline text-center py-2"
>
<li
class=
"list-inline-item"
>
<h5
class=
"mb-1"
>
Register for free
</h5>
</li>
<li
class=
"list-inline-item"
>
<a
href=
"#!"
class=
"btn btn-outline-white btn-rounded"
>
Sign up!
</a>
</li>
</ul>
<!-- Call to action -->
<!-- Terminal -->
<div
class=
"terminal"
[
ngSwitch
]="
selection
.
value
"
>
<pre
*
ngSwitchDefault
>
ng generate component xyz
</pre>
<pre
*
ngSwitchCase=
"'material'"
>
ng add @angular/material
</pre>
<pre
*
ngSwitchCase=
"'pwa'"
>
ng add @angular/pwa
</pre>
<pre
*
ngSwitchCase=
"'dependency'"
>
ng add _____
</pre>
<pre
*
ngSwitchCase=
"'test'"
>
ng test
</pre>
<pre
*
ngSwitchCase=
"'build'"
>
ng build --prod
</pre>
</div>
<!-- Footer Elements -->
<!-- Links -->
<div
class=
"card-container"
>
<a
class=
"circle-link"
title=
"Animations"
href=
"https://angular.io/guide/animations"
target=
"_blank"
rel=
"noopener"
>
<svg
id=
"Group_20"
data-name=
"Group 20"
xmlns=
"http://www.w3.org/2000/svg"
width=
"21.813"
height=
"23.453"
viewBox=
"0 0 21.813 23.453"
>
<path
id=
"Path_15"
data-name=
"Path 15"
d=
"M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z"
transform=
"translate(-4088.702 -972.736)"
fill=
"#ffa726"
/>
<path
id=
"Path_16"
data-name=
"Path 16"
d=
"M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z"
transform=
"translate(-4170.633 -972.736)"
fill=
"#fb8c00"
/>
<path
id=
"Path_17"
data-name=
"Path 17"
d=
"M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z"
transform=
"translate(-4125.003 -1058.315)"
fill=
"#ffe0b2"
/>
<path
id=
"Path_18"
data-name=
"Path 18"
d=
"M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z"
transform=
"translate(-4125.003 -1036.757)"
fill=
"#fff3e0"
/>
<path
id=
"Path_19"
data-name=
"Path 19"
d=
"M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z"
transform=
"translate(-4125.003 -1015.199)"
fill=
"#fff"
/>
</svg>
</a>
<a
class=
"circle-link"
title=
"CLI"
href=
"https://cli.angular.io/"
target=
"_blank"
rel=
"noopener"
>
<svg
alt=
"Angular CLI Logo"
xmlns=
"http://www.w3.org/2000/svg"
width=
"21.762"
height=
"23.447"
viewBox=
"0 0 21.762 23.447"
>
<g
id=
"Group_21"
data-name=
"Group 21"
transform=
"translate(0)"
>
<path
id=
"Path_20"
data-name=
"Path 20"
d=
"M2660.313,313.618h0l-10.833,3.9,1.637,14.4,9.2,5.152,9.244-5.152,1.685-14.4Z"
transform=
"translate(-2649.48 -313.618)"
fill=
"#37474f"
/>
<path
id=
"Path_21"
data-name=
"Path 21"
d=
"M2741.883,313.618v23.447l9.244-5.152,1.685-14.4Z"
transform=
"translate(-2731.05 -313.618)"
fill=
"#263238"
/>
<path
id=
"Path_22"
data-name=
"Path 22"
d=
"M2692.293,379.169h11.724V368.618h-11.724Zm11.159-.6h-10.608v-9.345h10.621v9.345Z"
transform=
"translate(-2687.274 -362.17)"
fill=
"#fff"
/>
<path
id=
"Path_23"
data-name=
"Path 23"
d=
"M2709.331,393.688l.4.416,2.265-2.28-2.294-2.294-.4.4,1.893,1.893Z"
transform=
"translate(-2702.289 -380.631)"
fill=
"#fff"
/>
<rect
id=
"Rectangle_12"
data-name=
"Rectangle 12"
width=
"3.517"
height=
"0.469"
transform=
"translate(9.709 13.744)"
fill=
"#fff"
/>
</g>
</svg>
</a>
<a
class=
"circle-link"
title=
"Augury"
href=
"https://augury.rangle.io/"
target=
"_blank"
rel=
"noopener"
>
<svg
alt=
"Angular Augury Logo"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
width=
"21.81"
height=
"23.447"
viewBox=
"0 0 21.81 23.447"
>
<defs>
<clipPath
id=
"clip-path"
>
<rect
id=
"Rectangle_13"
data-name=
"Rectangle 13"
width=
"10.338"
height=
"10.27"
fill=
"none"
/>
</clipPath>
</defs>
<g
id=
"Group_25"
data-name=
"Group 25"
transform=
"translate(0)"
>
<path
id=
"Path_24"
data-name=
"Path 24"
d=
"M3780.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z"
transform=
"translate(-3769.274 -311.417)"
fill=
"#4a3493"
/>
<path
id=
"Path_25"
data-name=
"Path 25"
d=
"M3862.088,311.417v23.447l9.244-5.152,1.685-14.4Z"
transform=
"translate(-3851.207 -311.417)"
fill=
"#311b92"
/>
<g
id=
"Group_24"
data-name=
"Group 24"
transform=
"translate(6.194 6.73)"
opacity=
"0.5"
>
<g
id=
"Group_23"
data-name=
"Group 23"
transform=
"translate(0 0)"
>
<g
id=
"Group_22"
data-name=
"Group 22"
clip-path=
"url(#clip-path)"
>
<path
id=
"Path_26"
data-name=
"Path 26"
d=
"M3832.4,373.252a5.168,5.168,0,1,1-5.828-4.383,5.216,5.216,0,0,1,2.574.3,3.017,3.017,0,1,0,3.252,4.086Z"
transform=
"translate(-3822.107 -368.821)"
fill=
"#fff"
/>
</g>
</g>
</g>
<path
id=
"Path_27"
data-name=
"Path 27"
d=
"M3830.582,370.848a5.162,5.162,0,1,1-3.254-4.086,3.017,3.017,0,1,0,3.252,4.086Z"
transform=
"translate(-3814.311 -359.969)"
fill=
"#fff"
/>
</g>
</svg>
</a>
<a
class=
"circle-link"
title=
"Protractor"
href=
"https://www.protractortest.org/"
target=
"_blank"
rel=
"noopener"
>
<svg
alt=
"Angular Protractor Logo"
xmlns=
"http://www.w3.org/2000/svg"
width=
"21.81"
height=
"23.447"
viewBox=
"0 0 21.81 23.447"
>
<g
id=
"Group_26"
data-name=
"Group 26"
transform=
"translate(0)"
>
<path
id=
"Path_28"
data-name=
"Path 28"
d=
"M4620.155,311.417h0l-10.881,3.9,1.637,14.4,9.244,5.152,9.244-5.152,1.685-14.4Z"
transform=
"translate(-4609.274 -311.417)"
fill=
"#e13439"
/>
<path
id=
"Path_29"
data-name=
"Path 29"
d=
"M4702.088,311.417v23.447l9.244-5.152,1.685-14.4Z"
transform=
"translate(-4691.207 -311.417)"
fill=
"#b52f32"
/>
<path
id=
"Path_30"
data-name=
"Path 30"
d=
"M4651.044,369.58v-.421h1.483a7.6,7.6,0,0,0-2.106-5.052l-1.123,1.123-.3-.3,1.122-1.121a7.588,7.588,0,0,0-4.946-2.055v1.482h-.421v-1.485a7.589,7.589,0,0,0-5.051,2.058l1.122,1.121-.3.3-1.123-1.123a7.591,7.591,0,0,0-2.106,5.052h1.482v.421h-1.489v1.734h15.241V369.58Zm-10.966-.263a4.835,4.835,0,0,1,9.67,0Z"
transform=
"translate(-4634.008 -355.852)"
fill=
"#fff"
/>
</g>
</svg>
</a>
<a
class=
"circle-link"
title=
"Find a Local Meetup"
href=
"https://www.meetup.com/find/?keywords=angular"
target=
"_blank"
rel=
"noopener"
>
<svg
alt=
"Meetup Logo"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24.607"
height=
"23.447"
viewBox=
"0 0 24.607 23.447"
>
<path
id=
"logo--mSwarm"
d=
"M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z"
transform=
"translate(0 0.123)"
fill=
"#f64060"
/>
</svg>
</a>
<a
class=
"circle-link"
title=
"Join the Conversation on Gitter"
href=
"https://gitter.im/angular/angular"
target=
"_blank"
rel=
"noopener"
>
<svg
alt=
"Gitter Logo"
xmlns=
"http://www.w3.org/2000/svg"
width=
"19.447"
height=
"19.447"
viewBox=
"0 0 19.447 19.447"
>
<g
id=
"Group_40"
data-name=
"Group 40"
transform=
"translate(-1612 -405)"
>
<rect
id=
"Rectangle_19"
data-name=
"Rectangle 19"
width=
"19.447"
height=
"19.447"
transform=
"translate(1612 405)"
fill=
"#e60257"
/>
<g
id=
"gitter"
transform=
"translate(1617.795 408.636)"
>
<g
id=
"Group_33"
data-name=
"Group 33"
transform=
"translate(0 0)"
>
<rect
id=
"Rectangle_15"
data-name=
"Rectangle 15"
width=
"1.04"
height=
"9.601"
transform=
"translate(2.304 2.324)"
fill=
"#fff"
/>
<rect
id=
"Rectangle_16"
data-name=
"Rectangle 16"
width=
"1.04"
height=
"9.601"
transform=
"translate(4.607 2.324)"
fill=
"#fff"
/>
<rect
id=
"Rectangle_17"
data-name=
"Rectangle 17"
width=
"1.04"
height=
"4.648"
transform=
"translate(6.91 2.324)"
fill=
"#fff"
/>
<rect
id=
"Rectangle_18"
data-name=
"Rectangle 18"
width=
"1.04"
height=
"6.971"
transform=
"translate(0 0)"
fill=
"#fff"
/>
</g>
</g>
</g>
</svg>
</a>
</div>
<!-- Footer -->
<footer>
Love Angular?
<a
href=
"https://github.com/angular/angular"
target=
"_blank"
rel=
"noopener"
>
Give our repo a star.
<div
class=
"github-star-badge"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M0 0h24v24H0z"
fill=
"none"
/><path
d=
"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
/></svg>
Star
</div>
</a>
<a
href=
"https://github.com/angular/angular"
target=
"_blank"
rel=
"noopener"
>
<svg
class=
"material-icons"
xmlns=
"http://www.w3.org/2000/svg"
width=
"24"
height=
"24"
viewBox=
"0 0 24 24"
><path
d=
"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
fill=
"#1976d2"
/><path
d=
"M0 0h24v24H0z"
fill=
"none"
/></svg>
</a>
</footer>
</footer>
<!-- Footer -->
<svg
id=
"clouds"
alt=
"Gray Clouds Background"
xmlns=
"http://www.w3.org/2000/svg"
width=
"2611.084"
height=
"485.677"
viewBox=
"0 0 2611.084 485.677"
>
<path
id=
"Path_39"
data-name=
"Path 39"
d=
"M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z"
transform=
"translate(142.69 -634.312)"
fill=
"#eee"
/>
</svg>
</div>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<router-outlet></router-outlet>
22-july-2020/my-app/src/app/app.component.spec.ts
View file @
92c8f837
...
...
@@ -20,16 +20,16 @@ describe('AppComponent', () => {
expect
(
app
).
toBeTruthy
();
});
it
(
`should have as title 'my
-
app'`
,
()
=>
{
it
(
`should have as title 'myapp'`
,
()
=>
{
const
fixture
=
TestBed
.
createComponent
(
AppComponent
);
const
app
=
fixture
.
componentInstance
;
expect
(
app
.
title
).
toEqual
(
'my
-
app'
);
expect
(
app
.
title
).
toEqual
(
'myapp'
);
});
it
(
'should render title'
,
()
=>
{
const
fixture
=
TestBed
.
createComponent
(
AppComponent
);
fixture
.
detectChanges
();
const
compiled
=
fixture
.
nativeElement
;
expect
(
compiled
.
querySelector
(
'.content span'
).
textContent
).
toContain
(
'my
-
app app is running!'
);
expect
(
compiled
.
querySelector
(
'.content span'
).
textContent
).
toContain
(
'myapp app is running!'
);
});
});
22-july-2020/my-app/src/app/app.component.ts
View file @
92c8f837
...
...
@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
@
Component
({
selector
:
'app-root'
,
templateUrl
:
'./app.component.html'
,
styleUrls
:
[
'./app.component.scss'
]
,
styleUrls
:
[
'./app.component.scss'
]
})
export
class
AppComponent
{
title
=
'
Cumulative Record
'
;
title
=
'
myapp
'
;
}
22-july-2020/my-app/src/app/app.module.ts
View file @
92c8f837
...
...
@@ -3,10 +3,18 @@ import { NgModule } from '@angular/core';
import
{
AppRoutingModule
}
from
'./app-routing.module'
;
import
{
AppComponent
}
from
'./app.component'
;
import
{
HomeComponent
}
from
'./home/home.component'
;
import
{
StudentComponent
}
from
'./student/student.component'
;
import
{
LecturerComponent
}
from
'./lecturer/lecturer.component'
;
import
{
ScoreComponent
}
from
'./score/score.component'
;
@
NgModule
({
declarations
:
[
AppComponent
AppComponent
,
HomeComponent
,
StudentComponent
,
LecturerComponent
,
ScoreComponent
],
imports
:
[
BrowserModule
,
...
...
22-july-2020/my-app/src/app/home/home.component.html
0 → 100644
View file @
92c8f837
<div
class=
"container"
>
<br
/>
<div>
<h1>
{{ title }}
</h1>
</div>
<div
*
ngFor=
"let course of courses; let i = index"
>
<h5>
{{ course.title }}
</h5>
<p>
{{ course.description }}
</p>
<p>
<span
style=
"font-weight: bold;"
>
Lecturer:
</span>
{{ lecturers[i].name }}
</p>
<p>
รายชื่อนักศึกษา
</p>
<table
class=
"table"
>
<thead>
<tr>
<th
scope=
"col"
>
#
</th>
<th
scope=
"col"
>
ID
</th>
<th
scope=
"col"
>
Name
</th>
<th
scope=
"col"
>
Email
</th>
<th
scope=
"col"
>
Score
</th>
<th
scope=
"col"
>
Full_mark
</th>
</tr>
</thead>
<tbody>
<tr
*
ngFor=
"let student of students; let i = index"
>
<th
scope=
"row"
>
{{ i + 1 }}
</th>
<td>
{{ student.id }}
</td>
<td>
{{ student.name }}
</td>
<td>
{{ student.email }}
</td>
<td>
{{ scores[i].score }}
</td>
<td>
{{ scores[i].full_mark }}
</td>
</tr>
</tbody>
</table>
<div
class=
"space"
></div>
<hr
/>
</div>
</div>
22-july-2020/my-app/src/app/home/home.component.scss
0 → 100644
View file @
92c8f837
22-july-2020/my-app/src/app/home/home.component.spec.ts
0 → 100644
View file @
92c8f837
import
{
async
,
ComponentFixture
,
TestBed
}
from
'@angular/core/testing'
;
import
{
HomeComponent
}
from
'./home.component'
;
describe
(
'HomeComponent'
,
()
=>
{
let
component
:
HomeComponent
;
let
fixture
:
ComponentFixture
<
HomeComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
HomeComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
HomeComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'should create'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
22-july-2020/my-app/src/app/home/home.component.ts
0 → 100644
View file @
92c8f837
import
{
Component
,
OnInit
}
from
'@angular/core'
;
import
{
Student
}
from
'../models/students'
;
import
{
STUDENTS
}
from
'../mock/mock-students'
;
import
{
Lecturer
}
from
'../models/lecturers'
;
import
{
LECTURER
}
from
'../mock/mock-lecturers'
;
import
{
Score
}
from
'../models/scores'
;
import
{
SCORES
}
from
'../mock/mock-scores'
;
import
{
Course
}
from
'../models/courses'
;
import
{
COURSES
}
from
'../mock/mock-courses'
;
@
Component
({
selector
:
'app-home'
,
templateUrl
:
'./home.component.html'
,
styleUrls
:
[
'./home.component.scss'
],
})
export
class
HomeComponent
implements
OnInit
{
title
=
'Course Web Application and Mobile Application'
;
descriptiion
=
'คำอธิบายรายวิชา'
;
students
:
Student
[]
=
STUDENTS
;
lecturers
:
Lecturer
[]
=
LECTURER
;
scores
:
Score
[]
=
SCORES
;
courses
:
Course
[]
=
COURSES
;
constructor
()
{}
ngOnInit
():
void
{}
}
22-july-2020/my-app/src/app/lecturer/lecturer.component.html
0 → 100644
View file @
92c8f837
<div
class=
"container"
>
<br>
<h1>
{{ title }}
</h1>
<div>
<table
class=
"table"
style=
"text-align: center;"
>
<thead>
<tr>
<th>
ID
</th>
<th>
Name
</th>
</tr>
</thead>
<tr
*
ngFor=
"let lecturer of lecturers"
>
<td>
{{ lecturer.id }}
</td>
<td>
{{ lecturer.name }}
</td>
</tr>
</table>
<div
class=
"space"
></div>
</div>
</div>
22-july-2020/my-app/src/app/lecturer/lecturer.component.scss
0 → 100644
View file @
92c8f837
22-july-2020/my-app/src/app/lecturer/lecturer.component.spec.ts
0 → 100644
View file @
92c8f837
import
{
async
,
ComponentFixture
,
TestBed
}
from
'@angular/core/testing'
;
import
{
LecturerComponent
}
from
'./lecturer.component'
;
describe
(
'LecturerComponent'
,
()
=>
{
let
component
:
LecturerComponent
;
let
fixture
:
ComponentFixture
<
LecturerComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
LecturerComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
LecturerComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'should create'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
22-july-2020/my-app/src/app/lecturer/lecturer.component.ts
0 → 100644
View file @
92c8f837
import
{
Component
,
OnInit
}
from
'@angular/core'
;
import
{
Lecturer
}
from
'../models/lecturers'
;
import
{
LECTURER
}
from
'../mock/mock-lecturers'
;
@
Component
({
selector
:
'app-lecturer'
,
templateUrl
:
'./lecturer.component.html'
,
styleUrls
:
[
'./lecturer.component.scss'
],
})
export
class
LecturerComponent
implements
OnInit
{
title
=
'รายชื่ออาจารย์'
;
lecturers
:
Lecturer
[]
=
LECTURER
;
constructor
()
{}
ngOnInit
():
void
{}
}
22-july-2020/my-app/src/app/mock/mock-courses.ts
0 → 100644
View file @
92c8f837
import
{
Course
}
from
'../models/courses'
;
export
const
COURSES
:
Course
[]
=
[
{
title
:
'Vue.JS'
,
description
:
'ปัจจุบัน Vue.js เป็นหนึ่งใน Web Framework ที่คนนิยมนำมาพัฒนาเว็บไซต์ (3 เจ้าใหญ่ๆ คือ React, Vue, Angular นั่นเอง) วันนี้ผมจะมาทำ Tutorial อธิบายว่า Vue.js คืออะไร? ไปจนถึงสอนวิธีการใช้งาน Vue.js ตั้งแต่เริ่มต้น เข้าใจ Concept ภาพรวม จนจบบทความ ทุกคนสามารถสร้างเว็บไซต์ได้เองโดยใช้ Vue.js'
},
{
title
:
'Flutter'
,
description
:
'Flutter คือ Framework ที่ใช้สร้าง UI สำหรับ mobile application ที่สามารถทำงานข้ามแพลตฟอร์มได้ทั้ง iOS และ Android ในเวลาเดียวกัน โดยภาษาที่ใช้ใน Flutter นั้นจะเป็นภาษา dart ซึ่งถูกพัฒนาโดย Google และที่สำคัญคือเป็น open source ที่สามารถใช้งานได้แบบฟรี ๆ อีกด้วย'
},
{
title
:
'Laravel'
,
description
:
'Laravel คือ PHP Framework รูปแบบ MVC และเป็นที่นิยมใช้มากของนักพัฒนาเระบบ หรือเว็บแอพพลิเคชั่นในปัจจุบันเพราะมีความสามรถที่ช่วยในการทำงานให้ง่ายและเป็นระเบียบมากขึ้น'
},
{
title
:
'Ionic'
,
description
:
'Ionic Framework คือเครื่องมือในการสร้าง HTML , CSS และ JavaScript เพื่อใช้ในการสร้าง Mobile Application ซึ่งสามารถใช้งานได้ค่อนข้างง่าย Ionic Framework เป็นเครื่องมือสร้างแอพมือถือที่สามารถสร้างทีเดียว สามารถใช้งานได้บนระบบปฏิบัติการ iOS, Android และ Windows'
},
{
title
:
'React'
,
description
:
'React เป็น Javascript Library หรือจะเรียกว่าเป็น Javascript Framework ก็ได้ ที่เราใช้สำหรับสร้างหน้าเว็บของเราให้ออกมาเจ๋ง และแจ๋ว พร้อมด้วย action ต่างๆ ที่ทำให้เว็บของเราดูน่าสนใจ'
},
];
22-july-2020/my-app/src/app/mock/mock-lecturers.ts
0 → 100644
View file @
92c8f837
import
{
Lecturer
}
from
'../models/lecturers'
;
export
const
LECTURER
:
Lecturer
[]
=
[
{
id
:
487985632
,
name
:
'Huxley Ashley'
},
{
id
:
798652132
,
name
:
'Otis Monaghan'
},
{
id
:
123548546
,
name
:
'Tyler-Jay Donovan'
},
{
id
:
788596413
,
name
:
'Jak Drummond'
},
{
id
:
489762156
,
name
:
'Kiya Walter'
},
];
22-july-2020/my-app/src/app/mock/mock-scores.ts
0 → 100644
View file @
92c8f837
import
{
Score
}
from
'../models/scores'
;
export
const
SCORES
:
Score
[]
=
[
{
student
:
'Emeli Neville'
,
score
:
82
,
full_mark
:
100
},
{
student
:
'Ibrahim Alfaro'
,
score
:
78
,
full_mark
:
100
},
{
student
:
'Sofija Ford'
,
score
:
65
,
full_mark
:
100
},
{
student
:
'Conal Quintana'
,
score
:
98
,
full_mark
:
100
},
{
student
:
'Dion Avila'
,
score
:
61
,
full_mark
:
100
},
];
22-july-2020/my-app/src/app/mock/mock-students.ts
View file @
92c8f837
import
{
Student
}
from
'../models/student
'
;
import
{
Student
}
from
'../models/students
'
;
export
const
STUDENTS
:
Student
[]
=
[
{
id
:
60111111
,
name
:
'Tom Hank'
,
email
:
'tom@gmail.com'
},
{
id
:
60111112
,
name
:
'Jack Daniel'
,
email
:
'jack@gmail.com'
},
{
id
:
60111113
,
name
:
'Tommy Lee Jones'
,
email
:
'tjones@gmail.com'
},
{
id
:
60111114
,
name
:
'Jack Dawson'
,
email
:
'jdawson@gmail.com'
},
{
id
:
60114440374
,
name
:
'Emeli Neville'
,
email
:
'Emeli.ne@gmail.com'
},
{
id
:
60114440375
,
name
:
'Ibrahim Alfaro'
,
email
:
'Ibrahim.al@gmail.com'
},
{
id
:
60114440376
,
name
:
'Sofija Ford'
,
email
:
'Sofija.fo@gmail.com'
},
{
id
:
60114440377
,
name
:
'Conal Quintana'
,
email
:
'Conal.qu@gmail.com'
},
{
id
:
60114440378
,
name
:
'Dion Avila'
,
email
:
'Dion.av@gmail.com'
},
];
22-july-2020/my-app/src/app/models/courses.ts
0 → 100644
View file @
92c8f837
export
interface
Course
{
title
:
string
;
description
:
string
;
}
22-july-2020/my-app/src/app/models/lecturers.ts
0 → 100644
View file @
92c8f837
export
interface
Lecturer
{
id
:
number
;
name
:
string
;
}
\ No newline at end of file
22-july-2020/my-app/src/app/models/scores.ts
0 → 100644
View file @
92c8f837
export
interface
Score
{
student
:
string
;
score
:
number
;
full_mark
:
number
;
}
22-july-2020/my-app/src/app/models/student.ts
→
22-july-2020/my-app/src/app/models/student
s
.ts
View file @
92c8f837
File moved
22-july-2020/my-app/src/app/score/score.component.html
0 → 100644
View file @
92c8f837
<div
class=
"container"
>
<br
/>
<h1>
{{ title }}
</h1>
<div>
<table
class=
"table"
style=
"text-align: center;"
>
<thead>
<tr>
<th>
Student
</th>
<th>
Score
</th>
<th>
Max_score
</th>
</tr>
</thead>
<tr
*
ngFor=
"let score of scores"
>
<td>
{{ score.student }}
</td>
<td>
{{ score.score }}
</td>
<td>
{{ score.full_mark }}
</td>
</tr>
</table>
<div
class=
"space"
></div>
</div>
</div>
22-july-2020/my-app/src/app/score/score.component.scss
0 → 100644
View file @
92c8f837
22-july-2020/my-app/src/app/score/score.component.spec.ts
0 → 100644
View file @
92c8f837
import
{
async
,
ComponentFixture
,
TestBed
}
from
'@angular/core/testing'
;
import
{
ScoreComponent
}
from
'./score.component'
;
describe
(
'ScoreComponent'
,
()
=>
{
let
component
:
ScoreComponent
;
let
fixture
:
ComponentFixture
<
ScoreComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
ScoreComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
ScoreComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'should create'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
22-july-2020/my-app/src/app/score/score.component.ts
0 → 100644
View file @
92c8f837
import
{
Component
,
OnInit
}
from
'@angular/core'
;
import
{
Score
}
from
'../models/scores'
;
import
{
SCORES
}
from
'../mock/mock-scores'
;
@
Component
({
selector
:
'app-score'
,
templateUrl
:
'./score.component.html'
,
styleUrls
:
[
'./score.component.scss'
],
})
export
class
ScoreComponent
implements
OnInit
{
title
=
'คะแนน'
;
scores
:
Score
[]
=
SCORES
;
constructor
()
{}
ngOnInit
():
void
{}
}
22-july-2020/my-app/src/app/student/student.component.html
0 → 100644
View file @
92c8f837
<div
class=
"container"
>
<br
/>
<h1>
{{ title }}
</h1>
<div>
<table
class=
"table"
style=
"text-align: center;"
>
<thead>
<tr>
<th>
ID
</th>
<th>
Name
</th>
<th>
E-mail
</th>
</tr>
</thead>
<tr
*
ngFor=
"let student of students; let i = index"
>
<td>
{{ student.id }}
</td>
<td>
{{ student.name }}
</td>
<td>
{{ student.email }}
</td>
</tr>
</table>
<div
class=
"space"
></div>
</div>
</div>
22-july-2020/my-app/src/app/student/student.component.scss
0 → 100644
View file @
92c8f837
22-july-2020/my-app/src/app/student/student.component.spec.ts
0 → 100644
View file @
92c8f837
import
{
async
,
ComponentFixture
,
TestBed
}
from
'@angular/core/testing'
;
import
{
StudentComponent
}
from
'./student.component'
;
describe
(
'StudentComponent'
,
()
=>
{
let
component
:
StudentComponent
;
let
fixture
:
ComponentFixture
<
StudentComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
StudentComponent
]
})
.
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
StudentComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'should create'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
22-july-2020/my-app/src/app/student/student.component.ts
0 → 100644
View file @
92c8f837
import
{
Component
,
OnInit
}
from
'@angular/core'
;
import
{
Student
}
from
'../models/students'
;
import
{
STUDENTS
}
from
'../mock/mock-students'
;
@
Component
({
selector
:
'app-student'
,
templateUrl
:
'./student.component.html'
,
styleUrls
:
[
'./student.component.scss'
],
})
export
class
StudentComponent
implements
OnInit
{
title
=
'รายชื่อนักศึกษา'
;
students
:
Student
[]
=
STUDENTS
;
constructor
()
{}
ngOnInit
():
void
{}
}
22-july-2020/my-app/src/index.html
View file @
92c8f837
<!doctype html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<title>
Toppic
</title>
<title>
Myapp
</title>
<base
href=
"/"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<link
rel=
"icon"
type=
"image/x-icon"
href=
"favicon.ico"
>
<link
rel=
"stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin=
"anonymous"
>
</head>
<body>
<app-root></app-root>
<script
src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin=
"anonymous"
></script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity=
"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin=
"anonymous"
></script>
<script
src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity=
"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin=
"anonymous"
></script>
</body>
</html>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment