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 ****** <!-- notice the use of test1 - it is an angular directive that we defines in the js further down --> <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));