It might help to break up the technologies into their functions when trying to understand. For instance, Angular is a JavaScript framework and is used to build out structure to the application, just like .NET is a framework for .NET applications. C# is one of the languages used in .NET.
In Angular, TypeScript (a language) is used to write code inside the application. There is also (in native angular) HTML, CSS and TypeScript.
TypeScript is awesome because you can now leverage object-oriented programming and data types not natively supported in JavaScript. It shares similarities with C#.
Sample TypeScript inside a component:
dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
console.log(date);
//let x=this.adminService.dateFormat(date)
//this.openAppointmentList(x)
if (isSameMonth(date, this.viewDate)) {
if (
(isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
events.length === 0
) {
this.activeDayIsOpen = false;
} else {
this.activeDayIsOpen = true;
this.viewDate = date;
}
}
}
Angular apps are build on Components (which are a grouping of CSS for page styling, HTML for page rendering/markup, and TypeScript for business logic). Components are referenced in other components and all served up by the main component app.module.
Main App Component TypeScript:
Main App Component HTML (view):
Notice how the first HTML in this component is referencing the Header component of this application, referenced by . Thats how individual components are consumed.
TypeScript file of Header Component:
HTML file:
It’s got its dependency injection and methods and constructors, etc. like any other app.
Obviously Kinetic is not going to make you do all this yourself and wraps the custom product up but this is just a quick demo of what an Angular app looks like under the hood.
I’m not super well versed in Angular (though I did take a class) but it’s pretty slick for building out single page applications (SPAs).
JSON is a data structure using a standard serialization and is composed of keys and values. Think of it as a way to pass data in a standardized way.
{
"Key1":"StringValue",
"Key2":intValue
}
There’s really nothing special about it other than the structure.
