I'm building an app using the latest release of ASP Boilerplate, it's using the AngularJs template. The problem I am having is that whenever I add a new module dependency to an Angular controll that is not part of the Angular framework, it breaks my app. For example:
angular.module('app').controller('app.views.cbTesting', [ '$scope', 'ui-grid', 'abp.services.app.cbTesting', '$location', function ($scope, grid, cbtService, $location) {.....
Using $location is fine, everything works, no issues. However, adding the dependency for UI-GRID breaks the functionality of my page that I am trying to use it on. Adding $filter, etc., all fine, but it seems that adding anything outside of the Angular core framework doesn't work.
I've made no changes to the ABP template. I am adding the JS file for UI-GRID to the cshtml page that I am using it on. I have tried to use other Angular-UI and third party modules, and they all break whatever page I put it on.
Please help, thanks!
2 Answer(s)
-
0
Hi,
You first need to add ui-grid (or all others you are adding) to app module definition here. <a class="postlink" href="https://github.com/aspnetboilerplate/module-zero-template/blob/master/src/AbpCompanyName.AbpProjectName.WebSpaAngular/App/Main/app.js#L4">https://github.com/aspnetboilerplate/mo ... /app.js#L4</a>
You can see that ui.bootstrap is added in the same way.
Then you can inject it in your controllers.
-
0
I tried that as well. For example, I am attempting to use ui.bootstrap.modal on a page, which I shouldn't have to inject since ui.boostrap is already declared in app.js, but if I do I hidden elects are shown, CSS goes crazy, etc.
In the case of the bootstrap modal, if I don't inject it in my controller, the modal CSS is applied to the buttons, but the modal isn't hidden upon page load like it should be, and button click events do not work.
