I am trying to execute the simplest angular piece of code that is as follows. I have defined ng-app="budgetTracker" in the div tag. Whenever I try to execute the html, it gives me the following error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=budgetTracker&p1=E…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A18%3A387)
Code:
(function() {
var app = angular.module("budgetTracker", []);
app.directive("categories", function(){
return {
//User Attribute directives for mixin behavior such as a tooltip, else mostly use element directives
//Directive definition object - a configuration that defines how a directive is going to behave
restrict: 'E', // we are declaring a new html element
templateUrl : 'js/templates/categories.html' // url of the template to be injected
};
});
});
Would anyone know why? I am pointing to the google cdn for angular and I am also including the app.js file in the head tag.
I guess you are missing to execute the function in which you have written module.
Change your app.js to
(function(){
var app = angular.module("budgetTracker", []);
app.directive("categories", function(){
return {
//User Attribute directives for mixin behavior such as a tooltip, else mostly use element directives
//Directive definition object - a configuration that defines how a directive is going to behave
restrict: 'E', // we are declaring a new html element
templateUrl : 'js/templates/categories.html' // url of the template to be injected
};
});
})();
Related
I'm using angular 1.5.3 with es6, webpack and jade templates.
Everything works as expected except for the component's templates.
This works
var cmpnt = {
template: '<div>test</div>'
}
This also works (when I manually create the html file)
var cmpnt = {
template: require('./component.html')
}
This does NOT work
var cmpnt = {
template: require('./component.jade')
}
In the browser console, I get
Error: [$injector:unpr] Unknown provider: localsProvider <- locals
The .jade file exists, and I'm using require('./template.jade') in many other places of the app without problems.
Any ideas? Any more info I can provide?
jade-loader returns a function. You cannot to pass that function to template, you must to invoke the function before pass it
var cmpnt = {
template: require('./component.jade')();
}
note the call of function after require
I am new to angular and am currently converting my conventional html/javascript website into an Angular application.
I am stuck on a custom directive where the problem is that it is not rendering in the view.
From reading the angular docs, I understand the camel-casing convention and that if you don't have the 'restrict' property set, Angular will automatically assume that its an attribute so I know that there are no issues there.
Here is how I have structured my directive:
var directives = angular.module('app.directives', []);
directives.directive("dataPercent", [function() {
return {
restrict: 'E',
template: 'Click me to go to Google '
}
}]);
How it is in the DOM:
<data-percentage></data-percentage>
And the reference to the directive in the header of index.html
<script src="assets/directives/dataPercentDirective.js"></script>
Also just in case this is how I init my controllers, directives and services in app.js:
angular.module('app', ['app.controllers', 'app.directives', 'app.services']);
The strange part is that there are no errors displayed in dev tools
Use datPercent as data is reserved keyword
data is reserved keyword.
jsbin http://jsbin.com/yexonayoho/edit?html,js,output
I'm trying to create a simple Angular 1 + 2 hybrid application in TypeScript using the component directive pattern as described here: https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code
I got it working with the regular directive declaration, but I can't get it to work with the component directive.
Just to contextualize: I'm actually creating a new Angular 2 application, but I need a component that hasn't been converted yet, called Formly, so I'm thinking about using the Angular 1 version in the meantime.
The full code is here: https://plnkr.co/edit/J5rK48?p=preview
I created a component directive following the heroDetail sample on the guide:
export const tstv1 = {
template: `<a>Angular 1: {{value}}</a><br/>`,
controller: function($scope) {
$scope.value = 'Angular 1';
}
};
Then I tried to use it by upgrading the component:
const tstv1 = upgradeAdapter.upgradeNg1Component('tstv1')
However this throws an error:
[$injector:unpr] Unknown provider: tstv1DirectiveProvider <- tstv1Directive
http://errors.angularjs.org/1.5.0-rc.1/$injector/unpr?>p0=tstv1DirectiveProvider%20%3C-%20tstv1Directive
What am I doing wrong?
Also, the examples don't have a import statement for the component directive. Should I add it or not? I have tried both and it doesn't work either way. If there isn't a import, how would Angular know where to get the directive from?
I tried it like this:
import {tstv1} from 'src/tstv1/tstv1.component'
Like I said I got it working using a regular directive:
app.directive('tstv1directive', function() {
return {
restrict: 'E',
require: '?ngModel',
template: '<a>Inside directive: {{value}}</a>',
controller: function($scope) {
$scope.value = "Works!"
}
}
}))
and I can upgrade and use it just fine:
upgradeAdapter.upgradeNg1Component('tstv1directive')
see the working one: https://plnkr.co/edit/nAiqX2w4ENkYd6Z8db7M?p=preview
The way you 'create' the component directive was actually just create an object, you have to register it as a component.
see main.ts
app.component('tstv1', tstv1);
and you have to import the tstv1 object as well in main.ts
after that, just downgrade it like the one you did with the regular directive.
Of course, I can check it myself.
It's more conceptual/architectural question and why it was build so.
angular.module('appmodule1').directive('mydir', function(){});
angular.module('appmodule2').directive('mydir', function(){});
so what should we expect from mydir?
UPD:
dependencies between the modules:
angular.module('app',['appmodule1', 'appmodule2'])
or
angular.module('appmodule1', ['appmodule2']);
One trivial thing is that if your module only directly/indirectly loads only one of the module then that directive factory only will be used. But if your question is what if both the modules are loaded say for example angular.module('app',['appmodule1', 'appmodule2']) and your application is bootstrapped with the module app then the directive factories will be added together, i.e directive factories are additive and such component when used will render with both the factories.
angular.module('app1', []).directive('mydir', function() {
return {
restrict: 'E',
link: function() {
console.log("App1");
}
}
});
angular.module('app2', []).directive('mydir', function() {
return {
restrict: 'E',
link: function() {
console.log("App2");
}
}
});;
angular.module('app', ['app1', 'app2']).config(function($provide) {
$provide.decorator('ngRequiredDirective', function($delegate) {
console.log($delegate); //Check the console on the configuration you will see array of 2 configurations
return $delegate;
})
});;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app">
<mydir></mydir>
<test ng-required="true"></test>
</div>
Generally the scoping, template etc cannot be specified in both (Rules are same as when an element has more than one directives mentioned) and these kind of directives are generally defined in the same module (or even in a different module) with intend and for special purpose. For example angular internally has a directive with the selector select which works along with ng-options directive, now say in your application you want to convert all the select to a bootstrap select option or with ng-repeated material select. You can abstract them out an still create another directive with the selector select and add your logic to render it by parsing the ng-options expression and render the new dropdown.
An example is within angular itself, the way ng-required and other similar directives are implemented, see this answer for example. You can check it out by doing a console log of ng-required directive factory as below.
.config(function($provide) {
$provide.decorator('ngRequiredDirective', function($delegate) {
console.log($delegate); //Check the console on the configuration you will see array of 2 configurations
return $delegate;
})
});
Why it was built?
By bet would be on extensibility and dividing different responsibility in different factories.
So in short if at all you have multiple directive factories for the same selector it should not be accidental, but created with clear purpose, otherwise it could turn out to be a disaster!
It will depend under which module the directive is instantiated. If you're under the appmodule1, the corresponding directive would be used. There would be no conflict here, unless I'm missing something.
I'm new to Angular and I'm from jQuery background.
My question is How to initialize angularjs module by passing values/configurations. Here is the scenario.
We will have core module (which will load/integrate other modules based on the need)
We're planned to create a module for each major feature
We need to load the module's based on the need
The only one approach till now I'm able to figure out is below,
Creating a custom attribute/tag directive
Create a custom controller to initialize the module
Create a new variable in the $scope and specify the configuration options
With this approach I'm able to access the options specified in the controller scope using the link function in the directive. The code is something like below,
// Main angular module
angular.module('myApp').directive('myDirective', function() {
return {
restrict: 'EA',
scope: {
configOptions: '='
},
link: function(scope, element, attribute) {
// configurations will be available in scope.configOptions
console.log(scope.configOptions);
}
};
});
// Module & Controller to initialize the main module.
angular.module('consumerApp', ['myApp']).controller('HomeCtrl', ['$scope', function($scope) {
$scope.configOptions= {
path: "xxxxx",
height: xxx,
width: xxx
};
}]);
// HTML code
<div ng-controller='HomeCtrl'>
<div myDirective></div>
</div>
Is this valid/best approach or do we have better solutions to achieve the same. On further note is there any way available to initialize the app like we do in jQuery.