In the Turnkey Web application you will find a folder EXT_Components.

In the EXT_Components folder you can put sub folders

- each sub folder will constitue one Component - the name of the folder is the component name.

Each component can have js scripts to be loaded when angular app starts - all js found here will be loaded

Each component must have a cshtml file for content structure - name this <component name>.cshtml

Each component probably has css style sheets - all css found here will be loaded - if <name>.min.css is found then <name>.css is skipped

Use in the model

Use a component in MDriven Designer by setting UIOverride on ViewModelColumn and:

tagged value Angular_Ext_Component=<component name>

Implement a Component with js,css and html

Example:

****** HTML - save as EXT_Components/test1/test1.cshtml ******

<div test1  class="test1background">

</div>

****** CSS - save as EXT_Components/test1/test1.css ******

.test1background {

background: pink;

}

****** Javascript - save as EXT_Components/test1/test1.js ******

function InstallTheDirectiveFor_test1(streamingAppController) {

streamingAppController.directive('test1', ['$document', function ($document) {

return {

link: function (scope, element, attr) {

// THIS IS WHERE YOU SEE THE HTML(element) AND THE DATA (scope) FOR EVERYTHING THAT USE OUR DIRECTIVE (test1)

var c = document.createElement('canvas');

element[0].appendChild(c);

}

};

}]);

console.trace("test1 component Loaded");

}

InstallTheDirectiveFor_test1(angular.module(MDrivenAngularAppModule));