BFC logo BFC One Documentation

HTML

  • Basic Requirements

    To run the BFC-One build tasks you will need any Modern browser e.g. Chrome, Firefox etc...
    To edit the BFC-One you will need any text editor e.g. Notepad++, Visual Studio Code, Sublime etc...

  • BFC-One comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain BFC-One's entire file structure and how to adapt it to your project.


    Path Description
    theme The BFC-One theme folder.
    assets Contains images, CSS, JS, Fonts
    css Contains All usefull CSS files.
    animate.css
    bootstrap.min.css
    font-awesome.min.css
    LineIcons.css
    slick.css

    style.css
    default.css
    custom.css
    3rd Party Libraries, Don't Edit if not required.


    style.css : Theme default css file - 1
    default.css : Theme default css file - 2
    custom.css : Theme custom changes file (You can put your changes here)
    fonts Contains All usefull fonts files.
    FontAwesome.*
    LineIcons.*
    3rd Party Libraries FontAwesome & LineIcons
    images Contains All usefull images files.
    js Contains All usefull js files.
    main.js main.js is a theme default js file, you can customize anything there, other files are 3rd party Libraries

Angular

Overview

Angular is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser.

The html version theme has static CSS only components. Those components are by default available in the angular version as well. You can copy and paste the html and use it in angular components.

Angular code structure

Angular source code can be found in [BFC-One]/angular/. Below is the list of demo file structure in Angular app.

Path Description
dist The build output of Angular. This folder does not included in the package. Run command ng build to build it.
e2eEnd-to-end tests using Protractor. Visit link https://angular.io/cli/e2e for more info.
node_modulesThe package.json file in the app root defines what libraries will be installed into node_modules/ when you run npm install.
srcYour app lives in the src folder. All Angular components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app.
appMain app folder
app.component.htmlMain app template.
app.component.tsMain app typescript.
app.module.tsMain app module. The place where to import and declare required components.
app-routing.module.tsBase routing for the app. Disable unused demo layout in this file to exclude the module.
assetsThis folder will contain all the BFC-One core assets needed for the Angular application.
environmentsThis folder contains one file for each of destination environments, each exporting simple configuration variables to use in application
environment.prod.tsProduction environment config
environment.tsDevelopment environment config
index.htmlThe index.html lives at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements.
main.tsThe main entry point for your app.
polyfills.tsAngular is built on the latest standards of the web platform. A particular browser may require at least one polyfill to run any Angular application. You may need additional polyfills for specific features.
IE9, IE10 and IE11 requires to enable polyfills. Read more angular.io/guide/browser-support
style.angular.scssGlobal styles go here which styles that affect all of your app need to be in a central place.
.editorconfigEditor configuration, see http://editorconfig.org
.gitignoreGit uses it to determine which files and directories to ignore, before you make a commit.
angular.jsonConfiguration for Angular CLI. In this file you can set several defaults and also configure what files are included when your project is built. Check out the official documentation if you want to know more.
package.jsonA package.json file contains meta data about app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.
package-lock.jsonpackage-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json
tsconfig.jsontsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.
tslint.jsonLinting configuration for TSLint together with Codelyzer, used when running ng lint. Linting helps keep your code style consistent.
webpack-rtl.config.jsRTL webpack configuration.
ngcc.config.jsIVY renderer compatibility settings file.

Installation

  1. Install Node.jsĀ® and npm if they are not already on your machine.

  2. Angular CLI is a command line interface for the latest Angular. Install it before start with the Angular app.

    npm install --global @angular/cli@latest

    If you have Angular CLI installed previously, update it to the latest Angular CLI. Remove the older version and re-install it.

    npm uninstall --global @angular/cli
    npm install --global @angular/cli@latest

Angular Quick Start:

  1. To start the Angular, change the directory to [BFC-One]/angular/.

    cd BFC-One/angular
  2. Install the Angular local project dependencies by executing following commands:

    a. npm clear cache --force This command will clear your old cached node_modules.

    b. npm install This command will install the dependencies in the local node_modules folder. By default, npm install will install all modules listed as dependencies in package.json.

    c. ng serve This command launches the server, watches your files, and rebuilds the app as you make changes to those files. Using the --open (or use -o) option will automatically open your browser on http://localhost:4200/. * This command will take some time to finsh. Please wait for it to complete.

For more detailed information to install the Angular application, visit this official Angular documentation website.