How to use my own AngularJS controllers with 3.0.1 dashboards?

Reply to How to use my own AngularJS controllers with 3.0.1 dashboards? on Sun, 24 Apr 2016 02:42:45 GMT

nyoa — Sun, 24 Apr 2016 02:42:45 GMT

I finally got it to work. Thank you a lot, this would have been quite a bit harder for me to achieve without your fast and accurate help!

Reply to How to use my own AngularJS controllers with 3.0.1 dashboards? on Sat, 23 Apr 2016 23:54:42 GMT

Jared Wiltshire — Sat, 23 Apr 2016 23:54:42 GMT

You're missing the single quotes around $scope. See below.

myApp.controller('myCtrl',['$scope', 
function ($scope) {
	$scope.test = function(){
		console.log('Logg meh');
	};
}]);

The scope variable is injected into your controller using Angular's dependency injection. Have a look here for more information on the syntax.

Reply to How to use my own AngularJS controllers with 3.0.1 dashboards? on Sat, 23 Apr 2016 20:39:32 GMT

nyoa — Sat, 23 Apr 2016 20:39:32 GMT

Thank you for your help so far. Should my .js file look like this with the added custom function? I'm getting ReferenceError: $scope is not defined

/**
 * @copyright 2016 {@link http://infiniteautomation.com|Infinite Automation Systems, Inc.} All rights reserved.
 * @author Jared Wiltshire
 */

define([
    'angular',
    'mango-3.0/maMaterialDashboards'
], function(angular, maMaterialDashboards) {
'use strict';

var myApp = angular.module('myApp', ['maMaterialDashboards']);

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.pi = function() {
        return Math.PI;
    }
}]);

myApp.directive('myCustomComponent', function() {
    return {
        restrict: 'E',
        scope: {
            name: '@'
        },
        template: 'Hello {{name}}!'
    };
});

myApp.controller('myCtrl',[$scope, 
function ($scope) {
	$scope.test = function(){
		console.log('Logg meh');
	};
}]);

angular.element(document).ready(function() {
    angular.bootstrap(document.documentElement, ['myApp']);
});

}); // define

Here is the HTML file just in case. I changed it to the template file because i thought it would be a lot easier to troubleshoot in case it was needed. The main thing I need right now in any case is to get the custom functions work before actually adding them to my dashboard




    
    
    My Custom App
    
    
    
    
    
    



    
        App is loading..
    

    
        
        Pi is {{pi() | number:5}}.
        
    
	
		Push me

Thanks a lot for your help!

Reply to How to use my own AngularJS controllers with 3.0.1 dashboards? on Sat, 23 Apr 2016 18:58:00 GMT

Will Geller — Sat, 23 Apr 2016 18:58:00 GMT

So basically for what you are trying to do, which is extend a mango dashboard app with your own logic you will want to start with the extendApp template. I'm sorry I know it is a bit confusing but here are the steps:

Start with the Extend app template and paste in your custom HTML that you have started on:




    
    
    My Custom App
    
    
    
    
    



    
        App is loading..
    

    ........YOUR HTML.......

Add your custom css file and the mdPickers CSS ref to the head which is missing from the template (a bug we need to add it to this template for datepickers):

See that require JS command at the bottom? This is what your will need to update to your custom JS file. So if your export.js and index.html is in a folder called custom you will reference it like (the .js is left out when using require):

Now you will need to update the export.js to use the JS portion of the extendApp template.
(http://localhost:8080/modules/dashboards/web/mdAdmin/#/dashboard/examples/templates/extend-app)

/**
 * @copyright 2016 {@link http://infiniteautomation.com|Infinite Automation Systems, Inc.} All rights reserved.
 * @author Jared Wiltshire
 */

define([
    'angular',
    'mango-3.0/maMaterialDashboards'
], function(angular, maMaterialDashboards) {
'use strict';

var myApp = angular.module('myApp', ['maMaterialDashboards']);

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.pi = function() {
        return Math.PI;
    }
}]);

myApp.directive('myCustomComponent', function() {
    return {
        restrict: 'E',
        scope: {
            name: '@'
        },
        template: 'Hello {{name}}!'
    };
});

angular.element(document).ready(function() {
    angular.bootstrap(document.documentElement, ['myApp']);
});

}); // define

you should now be able to define your controller on the myApp module. So below the directive definition block add:

myApp.controller('myCtrl',[$scope, 
function ($scope) {
	$scope.test = function(){
		console.log('Logg meh');
	}
}]);

The function defined in the controller should now be available to use within your

...

There is also a directive definition template in the JS file that you can use to create your own HTML directives that you would use like (camel case in JS directive definition > dash lowercase in html)

If you still have issues please update the post with complete HTML / JS files.

Cheers
Will

Reply to How to use my own AngularJS controllers with 3.0.1 dashboards? on Sat, 23 Apr 2016 17:48:06 GMT

nyoa — Sat, 23 Apr 2016 17:48:06 GMT

Thank you for a fast reply!

Here is my complete HTML file called index.html



	
		
		
		JAMK Fosfaattianalysaattori
		
		
		
		
		
		
		
		
	
	
		
			
		
		
			
				 
			
			
				 
			
			
			
				

				
				

				
				
				
				
					
					   Date preset
					   
					
					
					   From date
					   
					
					
						To date
						
					
				
				
					
						Statistics
						Statistics
						Data
						Data
					
					
						Push me
					
					
						

						
					
                                        
						
							
								
									Value
									Time
								
							
							
								
									{{item.value}}
									{{item.timestamp | moment:'format':'lll' }}

Value	Time
{{item.value}}	{{item.timestamp \| moment:'format':'lll' }}

And here is my .js file called export.js. Right now it only has this one test function.

var testing = angular.module('testing', []);
testing.controller('myCtrl',[$scope, 
function ($scope) {
	$scope.test = function(){
		console.log('Logg meh');
	}
}]);

Reply to How to use my own AngularJS controllers with 3.0.1 dashboards? on Sat, 23 Apr 2016 17:34:44 GMT

Will Geller — Sat, 23 Apr 2016 17:34:44 GMT

Hi Nyoa,

At first glance the code looks OK. But if you are getting the error saying angular is not defined then it must have something to do with angular not getting loaded properly into your JS file.

Could you please attach your complete JS and HTML file so I can help debug.

Thanks
Will