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
Related
I was installed cordova-plugin-media in ionic v1 . But media is not define by the app when I running it in the browser .
ionic.bundle.js:26794 ReferenceError: Media is not defined
at ChildScope.$scope.playPodcast (controllers.js:1405)
at fn (eval at compile (ionic.bundle.js:27638), <anonymous>:4:232)
at ionic.bundle.js:65427
at ChildScope.$eval (ionic.bundle.js:30395)
at ChildScope.$apply (ionic.bundle.js:30495)
at HTMLElement.<anonymous> (ionic.bundle.js:65426)
at defaultHandlerWrapper (ionic.bundle.js:16787)
at HTMLElement.eventHandler (ionic.bundle.js:16775)
at triggerMouseEvent (ionic.bundle.js:2953)
at tapClick (ionic.bundle.js:2942)
and this is my code
$scope.playPodcast = function($audioId) {
new Media("http://www.viaviweb.in/envato/cc/online_mp3_app_demo/uploads/40655_Overboard.mp3").play();
}
Just a quick search to that plugin's github page shows the way to use that method.
Specifically if you want to play a media file, this is the correct way to use it.
function playAudio(url) {
// Play the audio file at url
var my_media = new Media(url,
// success callback
function () { console.log("playAudio():Audio Success"); },
// error callback
function (err) { console.log("playAudio():Audio Error: " + err); }
);
// Play audio
my_media.play();
// Pause after 10 seconds
setTimeout(function () {
my_media.pause();
}, 10000);
}
Ok, depending on how you have the script file injected, you need to call it one of two ways:
If the media plugin is being loaded as a script file that is in your index.html by itself and it attaches itself to the global namespace, then add the following to your app.js:
angular.module('Media', [])
.factory('Media', function () {
return window.Media;
});
Later, in your app.js module definition, add the following:
angular.module('myApp',
[
'ionic',
'Media'
])
.run(
[
'ionicReady',
'Media',
function (
ionicReady,
Media,
) {
//Media initialization code here
}
This allows angular to use its Dependency Injection to ensure "Media" gets initialized in your main module. You'll have to import it to your other modules if you want to use it somewhere else in your application.
If you're using NgCordova, which provides angular wrappers for common Cordova plugins, then you'd import it the same way you'd import any other AngularJS library. There's sample code for the media plugin here.
I'm building a Chrome extension and surprisingly, I could create one AngularJS app for the extension side and another for the content script side. The latter is useful to work with a modal-like element injected in the page. I injected this app with this content script:
var myApp = angular.module('ContentApp', []);
/**
* Append the app to the page.
*/
$.get(chrome.runtime.getURL('templates/modal.html'), function(data) {
$($.parseHTML(data)).appendTo('body');
// Manually bootstrapping AngularJS app because template was also manually imported.
angular.element(document).ready(function() {
angular.bootstrap(document, ['ContentApp']);
});
});
The problem comes now that modal.html is getting big and I still have to add more elements. I thought that I could start creating components in Angular and did it like this:
angular.module('ContentApp').
component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
This actually works. I can see the Hello, world message in the rendered page. But when I changed template for templateUrl, it failed:
// This doesn't work
templateUrl: 'templates/component.html',
// Neither does this
templateUrl: 'templates/component.html',
// Although this is similar to the way I got the main template, it didn't worked either
templateUrl: chrome.runtime.getURL('templates/component.html'),
Worth to mention that I added the permission to manifest.json:
"web_accessible_resources": [
"templates/*"
],
The error that I got in the console is this:
Error: [$sce:insecurl] http://errors.angularjs.org/1.5.11/$sce/insecurl?p0=chrome-extension%3A%2F%2Fext_id%2Ftemplates%2Fmodal.html
at chrome-extension://ext_id/scripts/lib/angular.min.js:6:426
at getTrusted (chrome-extension://ext_id/scripts/lib/angular.min.js:154:156)
Does anyone know how to make it work? Or am I asking too much for a Chrome extension?
I found the answer in this link. Thanks to faboolous who pointed me in the right direction ;)
Since templateURL is processed before $scope execution, the proper way to secure a template path in a Chrome extension is this:
// This works. Yay!
angular.module('ContentApp').
component('greetUser', {
templateUrl: ['$sce', function ($sce) {
return $sce.trustAsResourceUrl(chrome.runtime.getURL('templates/component.html'));
}],
controller: function ($scope) {
...
Background: I have a gui I'm putting together for an application I've been working on. The app loads its last state from a YAML file, and is supposed to save that state to the YAML file when the app closes. I'm using the following event listener...
// Handle close event
window.addEventListener('beforeunload', function(event) {
if(doc) {
// This line gives error: "Uncaught ReferenceError: main is not defined"
doc.project_notes.text = main.summernoteText;
fs.writeFile('../resources/project.yml', yaml.safeDump(doc), function (error) {
if (error) {
throw error
}
});
}
console.log("Bye...");
});
angular
.module('inspinia')
.controller('MainCtrl', MainCtrl)
(and in my index.html)
<body ng-controller="MainCtrl as main">
I'm saving all of the states in a global variable called doc. It loads the yml file just fine using the following
function MainCtrl() {
activeProject = LoadActiveProject();
/**
* summernoteText - used for Summernote plugin
*/
this.summernoteText = doc.project_notes.text;
};
My issue is primarily with scope of the angular controller/variables.
First, am I handling this correctly in general?
If this is reasonable, how can I update doc.project_notes.text from my unload function OR link the two variables by reference?
I'm pretty new to Javascript.
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.
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
};
});
})();