In my project i want to drag external files with extension ".opgs" into the browser drop zone.
How can i achieve this using angular js ?
I used an module: ng-file-upload - https://github.com/danialfarid/ng-file-upload.
Install with bower bower i ng-file-upload -S.
Load it in your head tag:
<script src="/admin/assets/vendor/ng-file-upload/ng-file-upload.min.js"></script>
You hook the drop action to your dom element like this:
<div ngf-drop="upload($files)"></div>
Inject it into your app:
your_app = angular.module('your_app', ['ngFileUpload'], function () {
Then you get the file in the controller like this:
$scope.upload = function (file) {
console.log(file)
var extension = file[0].name.match(/\.(.*)$/)[0]
if (extension == 'opgs') {
upload_service.upload(file[0])
}
}
Works quite well.
Use ng-file-uplaod plugin
it give different directive to upload / drag-drop file
<div ngf-drop="upload($files)" ngf-accept="[YOUR FILE TYPES]" ngf-multiple="true"></div>
See the DEMO page
Related
I am new to angular js. I have downloaded ui-grid.js and ui-grid.css to implement ng-grid in our existing angular js project. I have added the path for both of them in Index.html like below.
<link href="app/assets/vendor/css/ui-grid.css" rel="stylesheet" />
<script src="app/assets/vendor/scripts/ui-grid.js"></script>
But when I try to use it in tPController.js file like below, the page is not loading, application itself is not coming up.
(function () {
angular.module('dApp',['ui.grid']).controller('tPController', function ($timeout, $scope) {
var vm = this,
---------------
});
})();
Note that i have not yet started using ng-grid in the html file. Only using ['ui.grid'] in .js file is causing the issue.
I am attemtping to implement a file explorer using the Amazon S3 Explorer Plugin from here: https://github.com/awslabs/aws-js-s3-explorer/tree/v2-alpha within a Django Project.
The 'placeholders' for the template in the HTML page are the same Django uses so I am getting errors while attempting to render the template with the same code provided in the index.html file. When I used Vue a bit ago I remember being able to change the selectors from {{ }} to whatever I wanted, how can I do this here?
This is Angular.js code.
I have tried to do this here without success:
angular.module('aws-js-s3-explorer', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}).factory('SharedService', SharedService)
.controller('ErrorController', ErrorController)
.controller('ViewController', ViewController)
.controller('AddFolderController', AddFolderController)
.controller('InfoController', InfoController)
.controller('SettingsController', SettingsController)
.controller('UploadController', UploadController)
.controller('TrashController', TrashController);
You need a config() block for configuring $interpolateProvider
angular.module('aws-js-s3-explorer', [])
.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}).factory...
I'm trying to include typical javascript library(JSZip) in to my angularjs application.
At first i have added included JSZip library in to my application and then added script reference to my index page.
Next i have created a simple object of JSZip in one of my module and trying to create zip. but all of sudden, i am getting compilation error in typescript while building my application in VS2015(visual studio), saying that "Cannot find name JSZip".
How to load non angular dependency in angular application. i have spent a complete day. i didn't find any clue.
i have tried multiple ways to get the dependency dynamically and also tried oclazyload to load JSZip dependency ..but not helps.
var zip = new JSZip(); <=== this is where the problem is..
zip.file("File1", atob(response.Data));
zip.file("File2", atob(response.Data));
zip.generateAsync({ type: "blob" })
.then(function (content) {
// saveAs is from FileSaver.js
saveAs(content, "example.zip");
});
Inject non-angular JS libraries
Include the JS file into your HTML file
<script src="http://stuk.github.io/jszip/dist/jszip.js"></script>
In your module angular add constant 'jszip' for exemple
var app = angular.module('myApp', [])
.constant('jszip', window.JSZip)
.run(function($rootScope) {
$rootScope.JSZip = window.JSZip;
})
Inject 'jszip' in your controller, and you will solve your problem
app.controller('myCtrl', function($scope, 'jszip') {
var zip = new jszip();
...
});
For the downloading part (saveAs function), include FileSaver.js into your HTML file
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.js"></script>
In your controller for exemple
$scope.exportZip = function(){
var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
zip.generateAsync({type:"blob"})
.then(function(content) {
saveAs(content, "example.zip");
});
};
I am creating a NodeJS app which uses AngularJS for it's front-end. I am Also using RequireJS to load in the JS dependencies and then instantiate the Angular app. Here is what I am trying to do:
Within my HTML file (written in Jade) I include the RequireJS files and then call the RequireJS config using the 'data-main' attribute:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
script(type="text/javascript" src="/bower_components/requirejs/require.js" data-main="/main.js")
My main.js file looks as follows:
"use strict";
function(require) {
require(['/assets/requiredPathsAndShim.js'], function(requiredPathsAndShim) {
require.config({
maps : {
// Maps
},
paths : requiredPathsAndShim.paths,
shim : {
// Modules and their dependent modules
}
});
angular.bootstrap(document, ['appNameInHere']);
});
})(require);
I have an external file which contains an object with my routes '/assets/requiredPathsAndShim.js' and it looks like follows:
"use strict";
(function(define) {
define([], function() {
return {
paths : {
'angular' : '/bower_components/angular/angular'
}
};
});
})(define);
I will add that my NodeJS/Express app has the 'bower_components' folder set to serve static files and this is working fine.
Whenever I try and instantiate the AngularJS app using the 'angular.bootstrap...' method it tells me Angular is not defined. I can't see why this is happening and haven't been able to figure it out yet. O can't see any problem with my routes to the Angular files. Can anyone see or suggest why this may be happening?
Thanks!
Just managed to crack it! I had to place the 'angular.bootstrap' call in a callback function of the require.config method as the app was trying to call AngularJS before it had been defined.
Hope this helps anyone in the future.
I am in the middle of developing a web app. I am using AngularJS for loading all the files dynamically into the UI.
I have an index.html file into which all the files will be loaded dynamically on-click or on-load.
//index.html
<signin button> <signup button> // etc.,
//on-clicking signin button a SignIn-page will load in the below div
<div id="bodyview"></div>
// end of index.html
Now my sign-in page looks somewhat like the below structure
/*a div where my accordion menu will load when the
*below submit button is clicked*/
<div id="menu"></div>
//other sign-in-form stuff will follow on...
//submit button at the end
<submit button> //only on clicking the submit button the menu will be loaded
Now my problem is, though I'm able to load the accordion menu.html file, I'm not able to load the css and js files it is dependent on. I have researched on stackoverflow but none worked for me.
Can anybody please help in determining a way for loading the css and js dependencies using AngularJS
Just write a service to add CSS and JS files to the <head>
Here is a example service which is used to dynamically load CSS files.You can modify it easily to load JS files.
https://github.com/Yappli/angular-css-injector
Currently I use angular-css: https://github.com/door3/angular-css
Imho, it's one of the best and most flexible solutions at the moment.
Instead of going by AngularJS way, i tried to load the files using JQuery. It worked for me.
You can check this link for reference
I used jquery to do the hardwork like this
/** resolve will come inside your route .when() function **/
resolve: {
theme: function ($route, $q) {
changeCss($route, $q);
}
}
/** This will come just outside your route .when() function, make sure the following function shall be in scope of the route provider **/
var changeCss = function ($route, $q) {
var defer = $q.defer();
// Change the CSS as per the param received
if ($route.current.params.css != undefined) {
if ($route.current.params.css === ‘dark’) {
loadCSS(“assets / css / dark.css”);
defer.resolve();
}
if ($route.current.params.css === ‘light’) {
loadCSS(“assets / css / light.css”);
defer.resolve();
} else {
defer.resolve();
}
}
return defer.promise;
}
var loadCSS = function (href) {
var cssLink = $(“ < link rel = ’stylesheet’ type = ’text / css’ href = ’”+href + “‘ > ”);
$(“head”).append(cssLink);
};
I have used Promise because this will make sure to load the css before it shows/load the angularjs route/page.
app.controller('MyCtrl', function($scope,$compile) {
$("#my").append( $compile("<script src='my.js'>")($scope) );
});