Layout
The theme uses a main layout to start the application and then all views are managed by Angular framework
Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>@ViewData["Title"] - Angle</title>
<base href="/" />
<link rel="stylesheet" href="~/preloader/preloader.css" asp-append-version="true" />
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
</head>
<body>
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>
Views/Home/Index.cshtml
@{
ViewData["Title"] = "App";
}
<app-root></app-root>
<div class="preloader">
<div class="preloader-progress">
<div class="preloader-progress-bar"></div>
</div>
</div>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
<script src="~/preloader/preloader.js" asp-append-version="true"></script>
@section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
This last file is what includes all files to be served as the main index of the application.
Polyfills
Polyfills are declared in file ClientApp/app/polyfills.ts
Use this file to import anything necessary according to your application needs to make it work in the browser. The current imported assets are the requried to run Angular application and for es6 and IE. As you can see, this file is already included in the template.
Vendor Assets
Vendor assets are declared in the following files:
- ClientApp/app/vendor.ts (3rd party scripts)
- ClientApp/app/vendor.scss (3rd party styles)
Use those files to import all your 3rd party related dependencies. Webpack will automatically include them into the application.
Webapck Commands
Wepack configuration is defined in one single file, webpack.config.js.
In package.json we have included two script to run webpack manually when necessary. Manually execution could be useful when you need to debug some errors that are not visible on browser console and you need a command line output.
The following commands run the same location, where package.json exists:
This command will compile the application and will generate the vendor and polyfills files, all for development.
$ npm run compile-app
This command is the same but for production environment, the production environment is configured to compile the code using the AOT compiler with scripts and styles minification
$ npm run compile-app-prod
The application is compiled in file main-client.js and lazyloaded bundle are the numerated files. All files are generated in *wwwroot/dist *folder.
Testing
Testing is based in Karma/Jasmine and can be executed using the following command in the project folder (where package.json exists)
> npm run test
Such command will start Karma and will executed all test files named *.spec.ts under the folder ClientApp/
As a convention (as used in @angular/cli) all *.spec.ts files should be placed in the same location where the component file, that is being tested, resides.
We used the following files to configure the test execution:
- karma.conf.js: karma configuration
- webpack.text.js: webpack configuration file for testing
- spec.bundle.js: setup file for testing enviroment
Example test file can be located in: ClientApp/app/routes/home/home/home.component.spec.ts
This contains a minimum testing code to show access to markup and component instance. More advanced testing can be performed according to your application needs.
You can include more information in the Official Angular guide: here
Preloader
The preloader files can be found in folder wwwroot/preloader/
It's enabled by adding the following markup to the index file like follows
<div class="preloader">
<div class="preloader-progress">
<div class="preloader-progress-bar"></div>
</div>
</div>
*Background color *
Background color can be changed be editing class .preloader in file wwwroot/preloader/preloader.scss
Image logo
To generate the loading effect with text we use two images that are the same but one fully colored and the other with a little opacity.
Both images can be found and replaced in the following paths
wwwroot/assets/img/preloader/preloader.empty.png
wwwroot/assets/img/preloader/preloader.full.png
If you change this images, try to respect the original size. Otherwise, you will need to change a bit of the css to make the expected size matches with the real one.
Note: While the preloader is included within the structure of the application, it works independently and is even required independently because it must be available from as soon as possible to show the loading screen while the application is starting.
Creating the preloader PSD
- Create a psd with a canvas size of 190x60
- Add your custom text, for example in color white, and leave the background layer transparent. Save it as png with transparency and name it preloader.full.png. The font used is "Open Sans" 45px.
- Duplicate the above PSD file, open and set 30% opacity to the Text layer. Save it as png with transparency and name it preloader.empty.png
jQuery and Wrapper script
Starting from version 4.1, this template doesn't need jQuery as a mandatory dependency for core files, this means it is only required when using jQuery based plugins for some features included.
Seed project versions no more include jQuery by default..
The wrapper.js (~ 7k minified) is a new script introduced to emulate some specific jQuery functions used in the template. This made possible to significantly cut the refactoring changes in the code, keeping it readable in a jQuery way and avoiding extra bytes, mainly when loops are repeatedly used to work with multiple elements.
Important The Wrapper script is NOT a replacement for jQuery. All methods were designed for an adequate and specific use and they don't do a deep validation on the arguments provided. It's suggested NOT to use this library extensively. Instead, use pure JS or you might even need jQuery.