So, I started angular this weekend and I wrote myself a nice carousel app to begin with, good fun!
I wrote a neat directive for the carousel making it easy to use for whoever wants to install my carousel app. Unfortunatly I am getting stuck on retrieving the scope of the directive containing the functions I create there (I want to test them).
My karma.config.js contains the following related lines of code:
...
files: [
// My templates
'javascript/vendor/Directives/carousel/carousel.html',
]
...
...
preprocessors: {
'javascript/vendor/Directives/carousel/carousel.html' : ['ng-html2js']
},
...
...
ngHtml2JsPreprocessor: {
moduleName: 'myDirectives'
},
...
...
// Which plugins to enable
plugins: [
'karma-jasmine',
'karma-chrome-launcher',
'karma-ng-html2js-preprocessor'
],
...
In my carouselDirective.js this is the relevant code:
angular.module('carouselApp').directive('carousel', function() {
return {
restrict : 'E',
templateUrl : 'javascript/vendor/Directives/carousel/carousel.html',
controller : controller,
scope : {
images : '=',
theme : '='
}
};
function controller ($scope, $interval) {
...
$scope.resetInterval = function () {
$interval.cancel(carouselInterval);
return carouselInterval = $interval(function() {
$scope.nextImage();
}, 5000);
};
...
};
And finally in my controllerSpec.js
describe("Unit: Testing carouselApp - ", function() {
var scope = undefined,
ctrl = undefined;
beforeEach(module('carouselApp'));
beforeEach(module('myDirectives'));
beforeEach(
inject(function($rootScope, $controller, $injector, $compile) { //injects the dependencies
var $carouselService = $injector.get('carouselService'),
carouselElement = angular.element('<carousel images="images" theme="theme"></carousel>');
scope = $rootScope.$new();
ctrl = $controller('carouselController', {
$scope : scope,
theme : 'fantasy',
images : $carouselService.getFantasyImages()
});
$compile(carouselElement)(scope);
scope.$digest();
// THIS HERE IS THE PROBLEM:
// the first parameter in the log contains the scope I created from $rootScope and the isolateScope is simply undefined.
// How can I get the scope from the directive containing the resetInterval function?
console.log(carouselElement.scope(), carouselElement.isolateScope());
})
);
});
This is the situation, for those that skipped reading the code.. I added the problem I am encountering in the comments of the controllerSpec.js!
Any help is much appreciated. I have scoured google and stackoverflow.. I am not saying the answer to my problem is not there, but if it is I may need a bit more of a hand to understand whats going on :)
Regards,
A new angular enthusiast!
Yikes, it turned out.. the code I had was fine. The instance of karma in my terminal seems to have bugged out somehow. Closing the terminal and opening a whole new one somehow solved the problem!
Partially happy it seems like I'm getting the hang of this, but that was a big chunk of my nights rest just for that! haha :)
Thanks for those that pondered upon the question!
Related
I am having no joy with implementing require: {} property as part of an angular component. Allow me to demonstrate with an example I have.
This is the component/directive that supposed to fetch a list of judgements. Nothing very fancy, just a simple factory call.
// judgements.component.js
function JudgementsController(GetJudgements) {
var ctrl = this;
ctrl.Get = function () {
GetJudgements.get().$promise.then(
function (data) {
ctrl.Judgements = data.judgements;
}, function (error) {
// show error message
});
}
ctrl.$onInit = function () {
ctrl.Get();
};
}
angular
.module('App')
//.component('cJudgements', {
// controller: JudgementsController,
//});
.directive('cJudgements', function () {
return {
scope: true,
controller: 'JudgementsController',
//bindToController: true,
};
});
I am trying to implement component require property to give me access to ctrl.Judgements from the above component/directive as follows:
// list.component.js
function ListController(GetList, GetJudgements) {
var ctrl = this;
ctrl.list = [];
ctrl.Get = function () {
GetList.get().$promise.then(
function (data) {
ctrl.list = data.list;
}, function (error) {
// show error message
});
};
//ctrl.GetJudgements = function () {
// GetJudgements.get().$promise.then(
// function (data) {
// ctrl.Judgements = data.judgements;
// }, function (error) {
// // show error message
// });
//}
ctrl.$onInit = function () {
ctrl.Get();
//ctrl.GetJudgements();
};
}
angular
.module('App')
.component('cTheList', {
bindings: {
listid: '<',
},
controller: ListController,
controllerAs: 'ctrl',
require: {
jCtrl: 'cJudgements',
},
template: `
<c-list-item ng-repeat="item in ctrl.list"
item="item"
judgements="ctrl.Judgements"></c-list-item>
<!--
obviously the reference to judgements here needs to change
or even better to be moved into require of cListItem component
-->
`,
});
Nice and simple no magic involved. A keen reader probably noticed GetJudgement service call in the ListController. This is what I am trying to remove from TheList component using require property.
The reason? Is actually simple. I want to stop database being hammered by Judgement requests as much as possible. It's a static list and there is really no need to request it more than once per instance of the app.
So far I have only been successful with receiving the following error message:
Error: $compile:ctreq
Missing Required Controller
Controller 'cJudgements', required by directive 'cTheList', can't be found!
Can anyone see what I am doing wrong?
PS: I am using angular 1.5
PSS: I do not mind which way cJudgement is implemented (directive or component).
PSSS: If someone wonders I have tried using jCtrl: '^cJudgements'.
PSSSS: And multiple ^s for that matter just in case.
Edit
#Kindzoku posted a link to the article that I have read before posting the question. I hope this also helps someone in understanding $onInit and require in Angular 1.5+.
Plunker
Due to popular demand I made a plunker example.
You should use required components in this.$onInit = function(){}
Here is a good article https://toddmotto.com/on-init-require-object-syntax-angular-component/
The $onInit in your case should be written like this:
ctrl.$onInit = function () {
ctrl.jCtrl.Get();
};
#iiminov has the right answer. No parent HTML c-judgements was defined.
Working plunker.
I'm attempting to create a Showdown extension in my Angular app which will show scope variables. I was able to get it setup to show basic scope variables easily enough, but now I'd like to get it to where I can use the results of an ng-repeat and I can't get anything other than [[object HTMLUListElement]] to show.
Here's my controller so far:
app.controller('MyCtrl', ['$scope', '$window', '$compile', function($scope, $window, $compile){
$scope.machines = [
{ abbv: 'DNS', name: 'Did Not Supply' },
{ abbv: 'TDK', name: 'The Dark Knight' },
{ abbv: 'NGG', name: 'No Good Gofers'}
];
$scope.machine = $scope.machines[0];
$scope.machine_list = $compile('<ul><li ng-repeat="m in machines">{{m.abbv}}: {{m.name}}</li></ul>')($scope);
$scope.md = "{{ machine_list }}";
var scopevars = function(converter) {
return [
{ type: 'lang', regex: '{{(.+?)}}', replace: function(match, scope_var){
scope_var = scope_var.trim();
return $scope.$eval(scope_var);
}}
];
};
// Client-side export
$window.Showdown.extensions.scopevars = scopevars;
}]);
Plunkr: code so far
I feel like I've got to be close, but now I don't know if I'm on the completely wrong track for this, or if it's a showdown thing or an angular thing or what.
I realized I was fighting Angular (and losing quiet badly) with the way I was doing that. DOM in a controller is a no-no. And now I'm kind of angry about how easy it is once I started thinking properly and looking at the directive.
Now instead of trying to do the compile and everything within the controller, I included the $compile service in the directive I'm using, so:
htmlText = converter.makeHtml(val);
element.html(htmlText);
became:
htmlText = converter.makeHtml(val);
element.html(htmlText);
$compile(element.contents())(scope);
With that change in place I no longer need the portion of the extension that just did the basic evaluation, since it's being compiled {{ machine.name }} is automatically converted.
But that still left me not being able to specify a variable to insert a template, just variables. But now that the output is going to be compiled through angular I can put the template in a partial and use an extension to convert from a pattern to an ng-include which works.
New Controller Code:
app.controller('MyCtrl', ['$scope', '$window', '$compile', function($scope, $window, $compile){
$scope.machines = [
{ abbv: 'DNS', name: 'Did Not Supply' },
{ abbv: 'TDK', name: 'The Dark Knight' },
{ abbv: 'NGG', name: 'No Good Gofers'},
{ abbv: 'TotAN', name:'Tales of the Arabian Nights'}
];
$scope.machine = $scope.machines[0];
$scope.tpls = {
'machinelist': 'partials/ml.html'
};
$scope.md = "{{machines.length}}\n\n{{include machinelist}}";
var scopevars = function(converter) {
return [
{ type: 'lang', regex: '{{include(.+?)}}', replace: function(match, val){
val = val.trim();
if($scope.tpls[val] !== undefined){
return '<ng-include src="\''+$scope.tpls[val]+'\'"></ng-include>';
} else {
return '<pre class="no-tpl">no tpl named '+val+'</pre>';
}
}}
];
};
// Client-side export
$window.Showdown.extensions.scopevars = scopevars;
}]);
And of course the new plunkr
Hope this can help someone later down the road
I'm writing tests for a directive. I want pass in a templateURL and then test various functionality of it using the built in JQlite library.
For some reason my template doesn't seem to compile, though Jasmine doesn't give me any errors.
my relevant app structure is:
/app
../partials/
../tests/
I have my karma.conf setup so:
files: [
...
'tests/*.js',
'partials/*.html'
],
preprocessors: {
'partials/*.html':'ng-html2js'
},
plugins: [
'karma-chrome-launcher',
'karma-jasmine',
'karma-ng-html2js-preprocessor',
'karma
]
My test code looks like this:
describe('mapInputs.customForm', function () {
var elm, scope;
beforeEach(module('myApp'));
beforeEach(module('partials/test/tmpl.html'));
beforeEach(inject( function (_$rootScope_, _$compile_) {
$rootScope = _$rootScope_;
$compile = _$compile_;
elm = angular.element('<div><ng-map-inputs map-inputs=""></ng-map-inputs></div>');
console.log('elm', elm);
elm = $compile(elm)($rootScope);
$rootScope.$digest();
console.log('elm', elm);
}));
it('should reveal custom form', function () {
// elm.find('div') returns an empty object
});
});
And the output:
LOG: 'elm', Object{length: 1, 0: <div><ng-map-inputs map-inputs=""></ng-map-inputs></div>}
LOG: 'elm', Object{length: 1, 0: <div class="ng-scope"><ng-map-inputs map-inputs=""></ng-map-inputs></div>}
As I said, I don't get any errors, but the output of the console logs is not what I expect. It seems like the template is not being compiled? But surely Jasmine would complain if no template was found?
The issue for me was that I wasn't loading the actual directive in the karma.conf.js:
files: [
...
'path/to/directive/map-inputs.directive.js', // <-- wasn't being loaded before
'tests/*.js',
'partials/*.html'
],
I'm using Require.js in combination with Angular.js.
Some controllers need huge external dependencies which others don't need, for example, FirstController requires Angular UI Codemirror. That's a extra 135 kb, at least:
require([
"angular",
"angular.ui.codemirror" // requires codemirror itself
], function(angular) {
angular.module("app", [ ..., "ui.codemirror" ]).controller("FirstController", [ ... ]);
});
I don't want to have to include the directive and the Codemirror lib everytime my page loads just to make Angular happy.
That's why I'm right now loading the controller only when the route is hit, like what's done here.
However, when I need something like
define([
"app",
"angular.ui.codemirror"
], function(app) {
// ui-codemirror directive MUST be available to the view of this controller as of now
app.lazy.controller("FirstController", [
"$scope",
function($scope) {
// ...
}
]);
});
How can I tell Angular to inject ui.codemirror module (or any other module) in the app module aswell?
I don't care if it's a hackish way to accomplish this, unless it involves modifying the code of external dependencies.
If it's useful: I'm running Angular 1.2.0.
I have been trying to mix requirejs+Angular for some time now. I published a little project in Github (angular-require-lazy) with my effort so far, since the scope is too large for inline code or fiddles. The project demonstrates the following points:
AngularJS modules are lazy loaded.
Directives can be lazy loaded too.
There is a "module" discovery and metadata mechanism (see my other pet project: require-lazy)
The application is split into bundles automatically (i.e. building with r.js works)
How is it done:
The providers (e.g. $controllerProvider, $compileProvider) are captured from a config function (technique I first saw in angularjs-requirejs-lazy-controllers).
After bootstraping, angular is replaced by our own wrapper that can handle lazy loaded modules.
The injector is captured and provided as a promise.
AMD modules can be converted to Angular modules.
This implementation satisfies your needs: it can lazy-load Angular modules (at least the ng-grid I am using), is definitely hackish :) and does not modify external libraries.
Comments/opinions are more than welcome.
(EDIT) The differentiation of this solution from others is that it does not do dynamic require() calls, thus can be built with r.js (and my require-lazy project). Other than that the ideas are more or less convergent across the various solutions.
Good luck to all!
Attention: use the solution by Nikos Paraskevopoulos, as it's more reliable (I'm using it), and has way more examples.
Okay, I have finally found out how to achieve this with a brief help with this answer.
As I said in my question, this has come to be a very hacky way. It envolves applying each function in the _invokeQueue array of the depended module in the context of the app module.
It's something like this (pay more attention in the moduleExtender function please):
define([ "angular" ], function( angular ) {
// Returns a angular module, searching for its name, if it's a string
function get( name ) {
if ( typeof name === "string" ) {
return angular.module( name );
}
return name;
};
var moduleExtender = function( sourceModule ) {
var modules = Array.prototype.slice.call( arguments );
// Take sourceModule out of the array
modules.shift();
// Parse the source module
sourceModule = get( sourceModule );
if ( !sourceModule._amdDecorated ) {
throw new Error( "Can't extend a module which hasn't been decorated." );
}
// Merge all modules into the source module
modules.forEach(function( module ) {
module = get( module );
module._invokeQueue.reverse().forEach(function( call ) {
// call is in format [ provider, function, args ]
var provider = sourceModule._lazyProviders[ call[ 0 ] ];
// Same as for example $controllerProvider.register("Ctrl", function() { ... })
provider && provider[ call[ 1 ] ].apply( provider, call[ 2 ] );
});
});
};
var moduleDecorator = function( module ) {
module = get( module );
module.extend = moduleExtender.bind( null, module );
// Add config to decorate with lazy providers
module.config([
"$compileProvider",
"$controllerProvider",
"$filterProvider",
"$provide",
function( $compileProvider, $controllerProvider, $filterProvider, $provide ) {
module._lazyProviders = {
$compileProvider: $compileProvider,
$controllerProvider: $controllerProvider,
$filterProvider: $filterProvider,
$provide: $provide
};
module.lazy = {
// ...controller, directive, etc, all functions to define something in angular are here, just like the project mentioned in the question
};
module._amdDecorated = true;
}
]);
};
// Tadaaa, all done!
return {
decorate: moduleDecorator
};
});
After this has been done, I just need, for example, to do this:
app.extend( "ui.codemirror" ); // ui.codemirror module will now be available in my application
app.controller( "FirstController", [ ..., function() { });
The key to this is that any modules your app module depends on also needs to be a lazy loading module as well. This is because the provider and instance caches that angular uses for its $injector service are private and they do not expose a method to register new modules after initialization is completed.
So the 'hacky' way to do this would be to edit each of the modules you wish to lazy load to require a lazy loading module object (In the example you linked, the module is located in the file 'appModules.js'), then edit each of the controller, directive, factory etc calls to use app.lazy.{same call} instead.
After that, you can continue to follow the sample project you've linked to by looking at how app routes are lazily loaded (the 'appRoutes.js' file shows how to do this).
Not too sure if this helps, but good luck.
There is a directive that will do this:
https://github.com/AndyGrom/loadOnDemand
example:
<div load-on-demand="'module_name'"></div>
The problem with existing lazy load techniques is that they do things which I want to do by myself.
For example, using requirejs, I would like to just call:
require(['tinymce', function() {
// here I would like to just have tinymce module loaded and working
});
However it doesn't work in that way. Why? As I understand, AngularJS just marks the module as 'to be loaded in the future', and if, for example, I will wait a bit, it will work - I will be able to use it. So in the function above I would like to call some function like loadPendingModules();
In my project I created simple provider ('lazyLoad') which does exactly this thing and nothing more, so now, if I need to have some module completely loaded, I can do the following:
myApp.controller('myController', ['$scope', 'lazyLoad', function($scope, lazyLoad) {
// ........
$scope.onMyButtonClicked = function() {
require(['tinymce', function() {
lazyLoad.loadModules();
// and here I can work with the modules as they are completely loaded
}]);
};
// ........
});
here is link to the source file (MPL license):
https://github.com/lessmarkup/less-markup/blob/master/LessMarkup/UserInterface/Scripts/Providers/lazyload.js
I am sending you sample code. It is working fine for me. So please check this:
var myapp = angular.module('myapp', ['ngRoute']);
/* Module Creation */
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$controllerProvider', function ($routeProvider, $controllerProvider) {
app.register = {
controller: $controllerProvider.register,
//directive: $compileProvider.directive,
//filter: $filterProvider.register,
//factory: $provide.factory,
//service: $provide.service
};
// so I keep a reference from when I ran my module config
function registerController(moduleName, controllerName) {
// Here I cannot get the controller function directly so I
// need to loop through the module's _invokeQueue to get it
var queue = angular.module(moduleName)._invokeQueue;
for (var i = 0; i < queue.length; i++) {
var call = queue[i];
if (call[0] == "$controllerProvider" &&
call[1] == "register" &&
call[2][0] == controllerName) {
app.register.controller(controllerName, call[2][1]);
}
}
}
var tt = {
loadScript:
function (path) {
var result = $.Deferred(),
script = document.createElement("script");
script.async = "async";
script.type = "text/javascript";
script.src = path;
script.onload = script.onreadystatechange = function (_, isAbort) {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
if (isAbort)
result.reject();
else {
result.resolve();
}
}
};
script.onerror = function () { result.reject(); };
document.querySelector(".shubham").appendChild(script);
return result.promise();
}
}
function stripScripts(s) {
var div = document.querySelector(".shubham");
div.innerHTML = s;
var scripts = div.getElementsByTagName('script');
var i = scripts.length;
while (i--) {
scripts[i].parentNode.removeChild(scripts[i]);
}
return div.innerHTML;
}
function loader(arrayName) {
return {
load: function ($q) {
stripScripts(''); // This Function Remove javascript from Local
var deferred = $q.defer(),
map = arrayName.map(function (obj) {
return tt.loadScript(obj.path)
.then(function () {
registerController(obj.module, obj.controller);
})
});
$q.all(map).then(function (r) {
deferred.resolve();
});
return deferred.promise;
}
};
};
$routeProvider
.when('/first', {
templateUrl: '/Views/foo.html',
resolve: loader([{ controller: 'FirstController', path: '/MyScripts/FirstController.js', module: 'app' },
{ controller: 'SecondController', path: '/MyScripts/SecondController.js', module: 'app' }])
})
.when('/second', {
templateUrl: '/Views/bar.html',
resolve: loader([{ controller: 'SecondController', path: '/MyScripts/SecondController.js', module: 'app' },
{ controller: 'A', path: '/MyScripts/anotherModuleController.js', module: 'myapp' }])
})
.otherwise({
redirectTo: document.location.pathname
});
}])
And in HTML Page:
<body ng-app="app">
<div class="container example">
<!--ng-controller="testController"-->
<h3>Hello</h3>
<table>
<tr>
<td>First Page </td>
<td>Second Page</td>
</tr>
</table>
<div id="ng-view" class="wrapper_inside" ng-view>
</div>
<div class="shubham">
</div>
</div>
I am working with twitter's typeahead.js and I was wondering if it was possible to modify hogan.js to use something other than {{}}?
I am looking at the minified code now and I have no idea what to change for something so simple. Doing a find and replace breaks it.
I am asking this mainly because I'm using Angular JS but twitter's typeahead requires a templating engine, causing hogan and angular's {{}} to clash. An even better solution would be simply modifying Angular JS (I know it's not a templating engine) and ditching Hogan to fit the following criteria:
Any template engine will work with typeahead.js as long as it adheres to the following API:
// engine has a compile function that returns a compiled template
var compiledTemplate = ENGINE.compile(template);
// compiled template has a render function that returns the rendered template
// render function expects the context to be first argument passed to it
var html = compiledTemplate.render(context);
Ignore the documentation on this, just look at the source code:
function compileTemplate(template, engine, valueKey) {
var renderFn, compiledTemplate;
if (utils.isFunction(template)) {
renderFn = template;
} else if (utils.isString(template)) {
compiledTemplate = engine.compile(template);
renderFn = utils.bind(compiledTemplate.render, compiledTemplate);
} else {
renderFn = function(context) {
return "<p>" + context[valueKey] + "</p>";
};
}
return renderFn;
}
It happens you can just pass a function to template, callable with a context object which contains the data you passed in the datum objects at the time of instantiation, so:
$('#economists').typeahead({
name: 'economists',
local: [{
value: 'mises',
type: 'austrian economist',
name: 'Ludwig von Mises'
}, {
value: 'keynes',
type: 'keynesian economist',
name: 'John Maynard Keynes'
}],
template: function (context) {
return '<div>'+context.name+'<span>'+context.type.toUpperCase()+'</span></div>'
}
})
If you want to use Hogan.js with Angular, you can change the delimiters by doing something like:
var text = "my <%example%> template."
Hogan.compile(text, {delimiters: '<% %>'});
It appears that the template engine result that typeahead.js expects is an html string and not the dom element (in dropdown_view.js). So I am not sure there is a good solution for using an angular template. As a test I was able to get it binding the result to an angular template but it has to render to an element and then get the html value from the element after binding with the data. I don't like this approach but I figured someone might find it useful. I think I will go with a template function like in the previous post.
Jade template looks like
.result
p {{datum.tokens}}
p {{datum.value}}
Directive
angular.module('app').directive('typeahead', [
'$rootScope', '$compile', '$templateCache',
function ($rootScope, $compile, $templateCache) {
// get template from cache or you can load it from the server
var template = $templateCache.get('templates/app/typeahead.html');
var compileFn = $compile(template);
var templateFn = function (datum) {
var newScope = $rootScope.$new();
newScope.datum = datum;
var element = compileFn(newScope);
newScope.$apply();
var html = element.html();
newScope.$destroy();
return html;
};
return {
restrict: 'A',
link: function (scope, element, attrs, ctrl) {
element.typeahead({
name: 'server',
remote: '/api/search?q=%QUERY',
template: templateFn
});
element.on('$destroy', function () {
element.typeahead('destroy');
});
element.on('typeahead:selected', function () {
element.typeahead('setQuery', '');
});
}
};
}
]);