In a pure JS app you initialize agGrid like this:
var agGrid = require('ag-grid');
(function(angular) {
agGrid.initialiseAgGridWithAngular1(angular);
angular.module('myApp', []);
I can't figure out how to initialize it with an AngularJS TypeScript app. I've tried this:
import * as angular from 'angular';
import * as agGrid from 'ag-grid/main';
agGrid.initialiseAgGridWithAngular1(angular);
angular.module('myApp', []);
I'm pretty sure the initialization code is in the wrong place, but I'm not sure where to put it?
The following worked for me.
import { initialiseAgGridWithAngular1 } from 'ag-grid-community';
initialiseAgGridWithAngular1(angular);
angular.module('myApp', ['agGrid']);
Related
I'm using angularJs and i'm trying to use webpack but i can't understand how to add libraries like angular-material / devextreme.
Here is an example of my app.js file - as you can see - the import of devextreme is probably wrong ...
import angular from 'angular';
import { DxButtonModule } from 'devextreme-angular'; // not sure about it
var mainApp = angular.module('mainApp', [DxButtonModule]); // really not sure about it...
mainApp.controller('appController', ['$scope', function ($scope) {
$scope.title ='Hello Angular';
}]
)
b.t.w - can i import all devextreme modules in one time instead of each of them manually?
This one it might be an oldy but anyway I guess there are a lot of front-end developers with the wisdom.
I'm trying not to declare a plug-in into the main module of my application.
Let's say I have the following modularization:
SUB-COMPONENT MODULE
(function () {
'use strict';
angular.module('app.modules.table.detail', []);
})();
COMPONENT MODULE
(function () {
'use strict';
angular.module('app.modules.table', [
'app.modules.table.detail'
]);
})();
MAIN APP MODULE
(function() {
'use strict';
angular.module('app.modules',
[ 'app.modules.table' <----// inside here is the table.detail
,'app.modules.other.component'
]);
angular.module('app', ['app.modules',
'smoothScroll'])
So, with this structure, can I hide the smoothScroll third-party away from the app module array? I just want to declare app.modules and that's it for the app.
I tried to include it as a dependency in the component array, but no luck. I've been reading about and I guess it has to be on the app for the $injector to know his $provider.
Anyone have nailed this?
I will answer myself because it was easier than I thougt.
I was not declaring the third-party in the sub-component / component modules.
CHILD module component
(function () {
'use strict';
angular.module('app.modules.table.detail', ['smoothScroll']); <-- HERE!
})();
PARENT module component
(function () {
'use strict';
angular.module('app.modules.table', ['app.modules.table.detail', 'smoothScroll' <--- ALSO HERE
]);
})();
So now I can bootstrap the app with no need of declaring the third-party on the main module. Therefore it is hidden from the main app module file
What am I doing wrong to get started with an angular codepen?
https://codepen.io/TylerL-uxai/pen/mwqNLW
(function () {
'use strict';
angular
.module('timeOff')
.controller('TimeOffController', TimeOffController);
TimeOffController.$inject = ['$scope'];
function TimeOffController($scope) {
You need to pass empty dependency array to your module,
angular.module('timeOff',[])
WORKING CODEPEN
I'm working on a mobile app using OnsenUI for the UI, running within the Monaca / Cordova framework, using Firebase as a BaaS through the angularfire module.
I've setup the module without Firebase as follows:
var myAppController = angular.module('myApp', ['onsen.directives']);
myAppController.controller('EventListCtrl', ['$scope', function($scope) {
However, as soon as I add Firebase as a module, the app stops working.
var myAppController = angular.module('myApp', ['onsen.directives', 'firebase']);
myAppController.controller('EventListCtrl', ['$scope', '$firebase', function($scope, $firebase) {
Can you please tell me what I'm doing wrong?
Thanks
According to this link, how about trying it this way:
var myAppController = angular.module('myApp', ['onsen.directives', 'firebase']);
myAppController.controller('EventListCtrl', function($scope, $firebase) {
Thought I should answer this myself to help anyone else facing the same situation.
My issue was that the firebase js script reference was wrong., ie. I was careless.
Regards
Could please explain the difference between two methods to load your controllers,service.... etc
var appModule = angular.module("myApp", []);
appModule.controller("MyController", ["$scope", ($scope)
=> new Application.Controllers.MyController($scope)]);
module todos {
'use strict';
var todomvc = angular.module('todomvc', [])
.controller('todoCtrl', TodoCtrl)
.directive('todoBlur', todoBlur)
.directive('todoFocus', todoFocus)
.service('todoStorage', TodoStorage);
}
The first method does dependency injection inline. The second method depends on $inject/constructor argument being setup properly in the controller.
Suggestion : http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1