Conflict of modules in AngularJS - angularjs

I am trying to show the content using pagination so I have used "angularUtils.directives.dirPagination" directive in module as angularJS doesn't support pagination inherently. Along with that I want to use angular strap so I can improve UX. To do so I have to put "mgcrea.ngStrap" directive. But when I use these both directives I don't get anything working out.
This is what I am doing.
var xyz = angular.module('test',
['angularUtils.directives.dirPagination','mgcrea.ngStrap']);
xyz.controller('LoadConnectors', function ($scope) {
....
});
Can any one help me out? I am really stuck. Thanks in advance.

There is one solution for this problem
First make sure your js refrences are correct
Then make sure you include refrences for 'angularUtils.directives.dirPagination','mgcrea.ngStrap' before js file which contains refrence for angular.module

Related

HTML and JAVASCRIPT Editor in Angularjs

I have an angularjs 1.5.8 application created using Jhipster.
For my website I want to make a HTML and JAVASCRIPT editor. Need to allow user to write HTML Code but JAVASCRIPT also.
Using this library I know I can achieve the follow.
https://github.com/incuna/angular-bind-html-compile
1: Bind HTML Code.
2: Bind Angular code if present in HTML
Eg: <h1>{{$scope.test}}</h1>
Would render correct value in the scope.
But what about something like this in the html
<script>
console.log($scope);
</script>
I get a $scope not defined error, somehow the $scope value is not available in the script tag.
If anyone curious that why I need to do this because we want to provide users of the application to create there own Angularjs Forms.
I solved using ng-include, here is the example source.
I wanted to do two things.
1: Make ng-include work from a scope variable which will contain html and javascript.
2: In the included string if I have a script tag I wanted it to render correct in the ng-include.
To achieve the #1 I did the following.
Used $templateCache service.
Sample code.
$templateCache.put('template-form', vm.html + vm.script);
For point #2
I made sure the script tag is structured in the following way.
<script>
(function() {
'use strict';
angular.module('myApp').controllerProvider.register('AppTemplateController',AppTemplateController);
AppTemplateController.$inject = ['$scope'];
function AppTemplateController($scope){
// WRITE YOUR CODE IN THIS CONTROLLER
// YOU CAN WRITE YOUR VARIABLES/FUNCTIONS HERE.
// MAKE SURE TO CALL THE method "vm.submitForm", to submit your form and pass the form object.
};
})();
</script>
This way you can inject a controller.
My requirement was very very specific to my projecct, I am not sure if others who did not face this issue even would understand what I am talking about. But for those who do face it, I hope you it helpful

Why angular.injector(), when we have angular.module('moduleName', [<Dependencies If any>]);

everybody, As you can see the title, i have to confirm my understanding, that
If we have :
angular.module('moduleName', [<Dependencies If any>]);
Then, do we really need this angular.injector, or is it just an another alternative.
If there is any other advantages of using the angular.injector, please let me know.
I have couple of other doubts.
we can use $filter in controller to get the particular filter and use its functions if any.
1. so how to use/call filters in directives.
2. how to call one controller function in another controller, is it possible?
Please Let me know the advantage of using angular.injector over angular.module('moduleName', [<Dependencies If any>]); And when it is good/needed to use it. not the implementaion of angular.injector
I needed it to get some services outside of the angular scope. For example my application is running on some legacy one. To change some parameters in the angular applicaion I needed to access an angular service from javascript outside of the angular. Then I used angular.injector to get the service.
injector = angular.element('#myangularDiv')).injector()
service = injector.get('theService')

browser.executeScript doesn't see $scope

i am making a test with protractor for my angularjs app
and i came accross the following problem
what i want to do is :
browser.executeScript('$scope.$apply')
i want to do this so that my screen updates/renders so i can get the values on screen
only when i do this it says : $scope is not defined
if have also tried multiple javascript render ways who also failed ,but i am not sure if i have used the right methods for that...
does anybody has the same problem or know how to fix this?
Perhaps you should be using an ng-view directive in your container markup to render html snippets or partials within your index page. Take a look at what ng-view can do (http://docs.angularjs.org/api/ngRoute.directive:ngView) :-)

Angular JS - Tree View not recognizing code

I'm new at Angular JS and I'm having some problems with it. I'm trying to use this module: http://ngmodules.org/modules/angular.treeview but it's not recognizing the Angular code. You can see my plunker here: http://plnkr.co/edit/xigaA37RieS70CwcK834?p=preview
I wish to know where is the error and I also have a question: if I want to use other modules/plugins and stuff like these, how should I code it? I mean, I would have another .js like:
(function(){
angular.module('myApp').controller('CONTROLLER_NAME', function($scope){
...
}
}
and I should retrieve it on app.js by doing:
var myApp = angular.module('myApp', ['angularTreeview','CONTROLLER_NAME']);
Tell me if I missed something..
Thanks in advance,
Lucas.

Structuring RequireJS + AngularJS

I'd like to work with both angularjs and requirejs. Before that, I worked with backbonejs and requirejs. I felt a bit more comfortable with that combination.
I also got the bower-seed from github, but it's too nested for the beginning.
Here's what I don't understand:
Require forces me to bootstrap angular myself.
Therefore I create a module named by my app.
Then I bootstrap that module to the document.
angular.module('app', []);
angular.bootstrap(document, ['app']);
That happens after the document ist ready, which is checked by this function:
angular.element(document).ready(function() { ... bootstraping ... }
So far I get it. But how and at what point do I put the ng-app into the header?
app.js has the function to put all my controllers, routers etc. into the app. By returning all modules I loaded inside the require-module. In my case I only load controllers
///app.js///
define(['angular', 'controller'], function (angular){
return angular.module('app',[
'app.controller',
'app.router'
]);
});
My controller:
define(['index', 'uirouter'], function(controllers){
controllers.controller('homeCtrl', function($scope, $routeParams){
$scope.logId = "testId";
});
});
Each controller puts it's content in a collection inside the index-module
my Index file:
///index///
define(['angular'], function(angular){
return angular.module('app.controllers',[]);
});
The Index file returs the controller-module to every controller-file requiring it. So I have all controllers in one module, by loading different controller-files
Here's my question: is this procedure correct and can I go on loading all angular-modules like this?
Im confused by working with angular-modules and require-modules ... Maybe anyone got a nice instruction in how to set up a angular-require project easily :)
Here's a link to the project:LINK ;)
Maybe anyone could help me a little bit :)
I am experimenting with this example: https://github.com/nikospara/angular-require-lazy
I also mentioned it in this SO question.
It needs work, but it is working; discussion on this topic really interests me.

Resources