Sameer Dighe Sameer Dighe - 11 days ago 6
AngularJS Question

How john papa's style works?

So, I have some code written in john papa style. I tried a lot to understand it but as I am beginner, I didn't get it properly , I didn't get from where code starts running ?. I think I will get some help from here so I am uploading code here and expecting at least code execution entry point.

So here are my some files.

1. index.html

<!doctype html>
<html ng-app="fuse">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Fuse - Admin Theme</title>
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700italic,700,900,900italic'
rel='stylesheet' type='text/css'>
</head>

<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->

<body md-theme="{{vm.themes.active.name}}" md-theme-watch ng-controller="IndexController as vm"
class="{{state.current.bodyClass || ''}}">

<!-- SPLASH SCREEN -->
<ms-splash-screen id="splash-screen">
<div class="center">
<div class="logo">
<span>F</span>
</div>
<!-- Material Design Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="inner">
<div class="gap"></div>
<div class="left">
<div class="half-circle"></div>
</div>
<div class="right">
<div class="half-circle"></div>
</div>
</div>
</div>
</div>
<!-- / Material Design Spinner -->
</div>
</ms-splash-screen>
<!-- / SPLASH SCREEN -->

<div id="main" class="animate-slide-up" ui-view="main" layout="column"></div>

<ms-theme-options></ms-theme-options>

</body>
</html>


2. index.run.js

(function ()
{
'use strict';

angular
.module('fuse')
.run(runBlock);

/** @ngInject */
function runBlock($rootScope, $timeout, $state, editableThemes)
{
// 3rd Party Dependencies
editableThemes.default.submitTpl = '<md-button class="md-icon-button" type="submit" aria-label="save"><md-icon md-font-icon="icon-checkbox-marked-circle" class="md-accent-fg md-hue-1"></md-icon></md-button>';
editableThemes.default.cancelTpl = '<md-button class="md-icon-button" ng-click="$form.$cancel()" aria-label="cancel"><md-icon md-font-icon="icon-close-circle" class="icon-cancel"></md-icon></md-button>';

// Activate loading indicator
var stateChangeStartEvent = $rootScope.$on('$stateChangeStart', function ()
{
$rootScope.loadingProgress = true;
});

// De-activate loading indicator
var stateChangeSuccessEvent = $rootScope.$on('$stateChangeSuccess', function ()
{
$timeout(function ()
{
$rootScope.loadingProgress = false;
});
});

// Store state in the root scope for easy access
$rootScope.state = $state;

// Cleanup
$rootScope.$on('$destroy', function ()
{
stateChangeStartEvent();
stateChangeSuccessEvent();
});
}
})();


3. index.route.js

(function ()
{
'use strict';

angular
.module('fuse')
.config(routeConfig);

/** @ngInject */
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider)
{
$locationProvider.html5Mode(true);

$urlRouterProvider.otherwise('/dashboard-project');

// Inject $cookies
var $cookies;

angular.injector(['ngCookies']).invoke([
'$cookies', function (_$cookies)
{
$cookies = _$cookies;
}
]);

// Get active layout
var layoutStyle = $cookies.get('layoutStyle') || 'verticalNavigation';

var layouts = {
verticalNavigation : {
main : 'app/core/layouts/vertical-navigation.html',
toolbar : 'app/toolbar/layouts/vertical-navigation/toolbar.html',
navigation: 'app/navigation/layouts/vertical-navigation/navigation.html'
},
verticalNavigationFullwidthToolbar : {
main : 'app/core/layouts/vertical-navigation-fullwidth-toolbar.html',
toolbar : 'app/toolbar/layouts/vertical-navigation-fullwidth-toolbar/toolbar.html',
navigation: 'app/navigation/layouts/vertical-navigation/navigation.html'
},
verticalNavigationFullwidthToolbar2 : {
main : 'app/core/layouts/vertical-navigation-fullwidth-toolbar-2.html',
toolbar : 'app/toolbar/layouts/vertical-navigation-fullwidth-toolbar-2/toolbar.html',
navigation: 'app/navigation/layouts/vertical-navigation-fullwidth-toolbar-2/navigation.html'
},
horizontalNavigation: {
main : 'app/core/layouts/horizontal-navigation.html',
toolbar : 'app/toolbar/layouts/horizontal-navigation/toolbar.html',
navigation: 'app/navigation/layouts/horizontal-navigation/navigation.html'
},
contentOnly : {
main : 'app/core/layouts/content-only.html',
toolbar : '',
navigation: ''
},
contentWithToolbar : {
main : 'app/core/layouts/content-with-toolbar.html',
toolbar : 'app/toolbar/layouts/content-with-toolbar/toolbar.html',
navigation: ''
}
};
// END - Layout Style Switcher

// State definitions
$stateProvider
.state('app', {
abstract: true,
views : {
'main@' : {
templateUrl: layouts[layoutStyle].main,
controller : 'MainController as vm'
},
'toolbar@app' : {
templateUrl: layouts[layoutStyle].toolbar,
controller : 'ToolbarController as vm'
},
'navigation@app': {
templateUrl: layouts[layoutStyle].navigation,
controller : 'NavigationController as vm'
},
'quickPanel@app': {
templateUrl: 'app/quick-panel/quick-panel.html',
controller : 'QuickPanelController as vm'
}
}
});
}

})();


4. index.module.js

(function ()
{
'use strict';

/**
* Main module of the Fuse
*/
angular
.module('fuse', [

// Common 3rd Party Dependencies
'uiGmapgoogle-maps',
'textAngular',
'xeditable',

// Core
'app.core',

// Navigation
'app.navigation',

// Toolbar
'app.toolbar',

// Quick Panel
'app.quick-panel',

// Apps
'app.dashboards',
'app.calendar',
'app.e-commerce',
'app.mail',
'app.chat',
'app.file-manager',
'app.gantt-chart',
'app.scrumboard',
'app.todo',
'app.contacts',
'app.notes',

// Pages
'app.pages',

// User Interface
'app.ui',

// Components
'app.components'
]);
})();


5. index.controller.js

(function ()
{
'use strict';

angular
.module('fuse')
.controller('IndexController', IndexController);

/** @ngInject */
function IndexController(fuseTheming)
{
var vm = this;

// Data
vm.themes = fuseTheming.themes;

//////////
}
})();

Answer

You need to include your JS files in your index.html file in some way. You could do this as easily as adding script tags manually in your index file. They'd look something like this:

<script src="YOUR-FILE-NAME"></script>

Your angular app is declared in index.module.js and specifies your application's dependencies.

Most of the code you have provided looks right. This answers your question though regarding the application's entry point: index.html includes your javascript files which contain your application code.

Hope this helps!

Comments