Dropzonejs with ng-view of angularjs - javascript

I have particular problem with making dropzonejs working with ng-view directive:
Below is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Museum">
<meta charset="utf-8">
<title>Login page</title>
<link rel="stylesheet" href="framework/bootstrap-3.2.0/css/bootstrap.css">
<script src="framework/angular-1.3.0-beta.19/angular.js"></script>
<script src="framework/angular-1.3.0-beta.19/angular-resource.js"></script>
<script src="framework/angular-1.3.0-beta.19/angular-route.js"></script>
<script src="framework/angularUI-0.11.0/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="framework/dropzone-3.10.2/dropzone.min.js"></script>
<link rel="stylesheet" href="framework/dropzone-3.10.2/css/dropzone.css">
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
<body>
<div ng-view></div>
</body>
</html>
My app.js:
var app = angular.module('Museum', ['ui.bootstrap', 'ngResource', 'ngRoute']).config(['$resourceProvider', function ($resourceProvider) {
// Don't strip trailing slashes from calculated URLs
$resourceProvider.defaults.stripTrailingSlashes = false;
}]).config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'components/login/login.html',
controller: 'Login',
css: 'components/login/css/login.css'
})
.when('/create', {
templateUrl: 'components/inventory/create.html',
controller: 'Add'
}
);
}]);
And my create.html page with dropzonejs:
<form action="/upload" class="dropzone" id="file-dropzone"></form>
It all works fine when I put dropzone form directly in index.html but when I route to create.html with dropzonjs using ng-view directive it does now work. Dropzone form is not process, e.g class is not "dropzone ng-pristine ng-valid dz-clickable" but "dropzone ng-pristine ng-valid", no div with message is added, etc.
Anyone has any idea?

Couldn't get the drop in method to work nicely, and indeed. it seems its only when there is a view involved.
Make sure that dropzone.js is loaded, and that the area/div you are dropping onto has an id.
on my view, I have an ng-init="initDropZone()" attribute. doesn't matter where really, just has to be in the view template.
Then, in my controller :
var myDropzone = new Dropzone("#my-dropzone",{url:'/myuploadscript.php', createImageThumbnails:false});
//I have used a success event so i can use the result from the save.
myDropzone.on("success", function(file,response) {
//remove the thumbnail that gets chucked on the dropzone element
myDropzone.removeAllFiles(true);
//result is treated as a string, I've responded in json from my
//upload script on the server.
//{success:true, newfile:'myfilepath.jpg'}
result = JSON.parse(response);
if (result.success)
{
//I originally tried using the angular ng-src bound var,
//shown as model.data.Image (using model instead of $scope)
model.data.Image = "//:0";
model.data.Image = result.newFile;
//but this was outright ignored. like no change.
//accepted defeat and just jqlite hacking to manually change
//the source of the img element.
$('#mainImg').attr("src", "/" + result.newFile);
}
});
This will change the image source immediately once the file has been uploaded and the server responds. I wish angular was more friendly and someone will no doubt point out a better solution, so if this gets a response out of a guru then we both win. otherwise, this will do as you are trying to do.
Oh and just confirming, there is no dropzone class/element defined on the html, its just a div that has an id of my-dropzone

Related

Not load a JS file for a specific path

I have a website by mean-stack.
Normally, all my external references are listed in index.html
I realize that one external JS library (e.g., https://cdnjs.cloudflare.com/troublelibrary.js) I am using has some conflit with a part of my website. So a workaround I am looking for is to NOT load it for a specific path https://www.myexample.com/specific.
Does anyone know how to achieve this in the routing?
Edit 1: (see the full question here)
Actually, the library that has conflit is history.js. My initial code which loads it all the time is as follows. As a result https://localhost:3000/home in a browser is always https://localhost:3000/home (i.e., will not add # because of history.js)
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>
Then, if I try the following code, as Ben suggests:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script>
var newScript = document.createElement('script');
newScript.src = 'https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js';
document.head.appendChild(newScript);
console.log(window.location.href)
</script>
I realize that for the first time of loading https://localhost:3000/home will not change. But, if I refresh the browser, it can change to https://localhost:3000/#/home.
So appending the script is not exactly the same as a direct reference, does anyone know why?
I see your problem in a different perspective. You mentioned that you use the history.js to avoid # on the URL. But you do not need history.js to do that. I think you understood your problem in the wrong way. There is an inbuilt Angular functionality to get rid off # paths. Because # is used to keep track of the relative path on any route. If we want we can override that default functionality.
But if you use this approach the server should responsible to redirect the user to index or home page on any application route since Angular handle all the routing in the application.
First you should add
<base href="/" />
in your HTML file.
Then you should enable HTML5 Mode inside Angular application as follows.
$locationProvider.html5Mode(true);
By adding these two attributes you can get rid off the # path and this is the recommended way.
Following is a complete example.
var app = angular.module("app", ["ngRoute"]);
app.controller("MainController", function($scope){
});
//Add route handler
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
template: '<h1>Home</h1>',
reloadOnSearch: true
})
.when('/about', {
template: '<h1>About</h1>',
reloadOnSearch: true
}).otherwise({
redirectTo: '/'
});
// This will remove hash bang from the routes
$locationProvider.html5Mode(true);
}]);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.js"></script>
<base href="/" />
</head>
<body>
<div>
Home
About
</div>
<div ng-app="app" ng-controller="MainController">
<ng-view></ng-view>
</div>
</body>
</html>
As you can see on the above example when you click on the about link the server responds with not found on /about. This means the # bang is removed.
This is one way to do it:
if(window.location.href !== 'https://url.com/path/to/trouble/page'){
var newScript = document.createElement('script');
newScript.src = 'https://url.com/path/to/script';
document.head.appendChild(newScript);
}
Add this to the <head> of the document. It will not load the trouble script on the page you specify in the if statement. Make sure not to load the trouble script anywhere else on the page as well.
you can do lazy loading of script in angular
<script type="text/javascript" ng-src="{{exUrl1}}"></script>
and somewhere in your code (based on whatever logic you want)
$rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);

Angularjs: How To Call Controller Function After Routing

I'm learning angularjs and there is one aspect of it that I'm struggling to understand.
My desired/expected behavior of the code below is:
User clicks the Paris link (anchor tag)
The routeProvider intercepts the request, loads the paris.html page into the ng-view.
The 'getCity' function in the controller gets the data and sets the scope variables, which are displayed in the london.html expressions.
However, I can't figure out how to config angularjs to use the 'getCity' function when the html page is loaded into the ng-view. The closest I can get is calling the 'getCity' function from within the CityController itself, bit this seems to have the undesired effect of calling the function when the whole app (index.html) is loaded instead of only when the link is clicked. The controller will have a number of different functions.
I also know you can use ng-click to call a controller's function, but I'm unsure how this would work with loading a html page into an ng-view through the route provider.
Any help would be appreciated. Please see code below from a small app built for learning purposes:
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
</head>
<body>
<ol>
<li>Paris</li>
</ol>
<div class="content-wrapper" ng-controller="CityController">
<div ng-view></div>
</div>
<script src="resources/js/app.js"></script>
<script src="resources/js/CityController.js"></script>
</body>
</html>
app.js
var app = angular.module("mainApp", [ 'ngRoute' ]);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.
when('/cities/paris', {
templateUrl : 'resources/paris.html',
controller : 'CityController'
}).
otherwise({
redirectTo : ''
});
} ]);
CityController.js
app.controller('CityController', function($scope, $http) {
$scope.getCity = function() {
$http.get('city')
.success(function(response) {
$scope.name = response.name;
$scope.country = response.country;
}).error(function() {
//Output error to console
});
};
//$scope.getCity();
});
I don't want to call getCity here because it means the http get request to
the 'city' endpoint is called when index.html is loaded
paris.html
This is Paris.
<br><br><br>
Name: {{name}}<br>
Country: {{country}}
<br><br><br>
I think what you are looking for is the router resolve option.
A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before showing a view, and simplify the initialization of the model inside a controller because the initial data is given to the controller instead of the controller needing to go out and fetch the data.
Check the explanation and usage here
You can call getCity() from paris.html using ,ng-init=getCity() ,ng-init will call your function as soon as paris.html is loaded into your ng-view .
For Eg.
This is Paris.
<br><br><br>
<div ng-init=getCity() >
Name: {{name}}<br>
Country: {{country}}
</div>
<br><br><br>

Angular ngRoute can't load template: Error [$compile:tpload]

I tried some simple Angular Routing, but I cant specify what's the error. Chrome just tells me that Angular can't compile the Template.
In the following Link you can see my directory structure.
directory-structure
-- angular.js
var testApp = angular.module('testApp', ['ngRoute']);
testApp.config(function($routeProvider){
$routeProvider.when('/list', {
templateUrl: 'pages/list.html',
controller: 'mainController'
}).when('/insert', {
templateUrl: 'pages/new.html',
controller: 'newController'
});
});
testApp.controller('mainController', function($scope){
$scope.message = 'main';
});
testApp.controller('newController', function($scope){
$scope.message = 'new';
});
--index.html
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<meta charset="UTF-8">
<title>Barfly</title>
<script src="/angular/angular.min.js"></script>
<script src="/angular-route/angular-route.min.js"></script>
<script src="/js/angularApp.js"></script>
</head>
<body ng-controller="mainController">
list
new
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
This is my error,
Browser Error
Thank you in advance!
EDIT. Sorry, I didn't see your directory structure. Are you sure pages directory is accessible to the public? Should the pages directory be moved into public directory?
Old answer:
The error is saying the templateUrl /pages/list.html does not exists. You should either save a template file into /pages/list.html file or add an inline template in the html body like this:
<script type="text/ng-template" id="/pages/list.html">
my template here
</script>
I encountered a sort of similar problem: templateUrl files could be not loaded (all resources didn't). In my case it happened when app was loaded on a browser on a mobile device. It was caused by Content Security Policy restrictions (How does Content Security Policy work?)
I got the CSP to permit all resources except for the templates referenced by templateUrl.
I also tried loading the templates through the script directive (https://docs.angularjs.org/api/ng/directive/script), but to no avail.
Eventually I decided to embed the templates in the route itself, like this:
testApp.config(function($routeProvider){
$routeProvider.when('/list', {
template: '<li ng-repeat="etcetera"></li>',
controller: 'mainController'
});
});
<a data-target="#list">list</a>
<a data-target="#insert">new</a>

angularjs routing,am being mixed up with the real path

am new to angularJS routing. am folowing a simple tutorial on routing but no +ve results
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>angularJS routing</title>
<link type="text/css" rel="stylesheet" href="js/foundation.min.css">
</head>
<body>
<div ng-app="viewApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ng-view.js"></script>
</body>
</html>
ng-view.js
var app = angular.module('viewApp', []);
app.config(function($routeProvider) {
$routeProvider.when('http://localhost/eclipse_PHP_Workspace/AngularJS/', {
templateUrl : "ng-view-template.html",
controller : "viewCtrl"
});
});
app.controller('viewCtrl', function($scope) {
$scope.model = {
message : "Helo ng-view !"
}
})
in the ng-view file above($routeProvider.when('http://localhost/eclipse_PHP_Workspace/AngularJS/',), what does the path here realy mean .is it the application root folder or the server route folder coz all the tutorials am seeing even for john linquist he is using the server root folder.and is my path correct coz my angularJS app is in http://localhost/eclipse_PHP_Workspace/AngularJS/
$routeProvider.when paths refer to the client-side route only. So this:
$routeProvider.when('/', ...
would be equal to:
http://localhost/eclipse_PHP_Workspace/AngularJS/#/
Anything after the # will be the angular app's "route". Anything before the # is where the app lives on the server, which should never change in a single-page app.
This gets trickier if using html5mode, but this is the basic idea.

Simplest way to use ng-include

I have been trying to write a simple angular.js app, that includes another file using ng-include. I must have done something/missed something so that the included file does not get included. I must be doing something fundamentally wrong but can't see what it is.
Here is Index.html
<!DOCTYPE html>
<html>
<head ng-app="app">
<title>Demo</title>
<script data-require="angular.js#1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script data-require="angular-resource#1.2.0" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular-resource.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="appctrl">
<h1>Airports</h1>
<div ng-include="'extra.html'"></div>
<h1>Airports</h1>
</div>
</body>
</html>
file extra.html contains the element to be included
<h2>Inside</h2>
and script.js is the file to initialise angular
(function () {
'use strict';
var app = angular.module('app', []);
app.run(['$route', function ($route) { // Include $route to kick start the router.
}]);
angular.module('app').controller('appctrl', [function AppCtrl() { }]);
});
I created to Plunk to demonstrate what I mean. There's not much there: the ng-app defined, references to the angular files and a couple of titles to delineate the insert point. Nothing is shown between.
What is the simplest way to use ng-include in angular.js?
Place ng-app on your body section.
Include angular-route.js (eg. <script src="http://code.angularjs.org/1.2.0/angular-route.js"></script>) and add this dependency to your app initialization (var app = angular.module('app',['ngRoute'])
Don't put your script.js code inside (function(){}). (If you want to do this, call this function (function(){})();)
Your code with changes: http://plnkr.co/edit/k1dFPeb9E2B2pjTthi1K?p=preview
This is a script of mine:
HTML:
<div id="superhero-nav-container">
<ul id="superhero-nav">
<li><a ng-click='template = templates[0]'>Biography & Stats</a></li>
<li><a ng-click='template = templates[1]'>History</a></li>
<li><a ng-click='template = templates[2]'>Powers</a></li>
<li><a ng-click='template = templates[3]'>Enemies</a></li>
</ul>
</div>
<div class="superhero-templates" ng-include src='template.url'></div>
JS in the controller:
$scope.templates = [
{ url: '/views/superheroes/biography.html' },
{ url: '/views/superheroes/history.html' },
{ url: '/views/superheroes/powers.html' },
{ url: '/views/superheroes/enemies.html' }
];
$scope.template = $scope.templates[0];
I have something like menu that changes the html in the bottom div. Hope that helps.
EDIT (for the comment below):
Your mistakes were:
Put your ng-app attribute in the html tag of the
document not in the head
Include angular-resource.js (eg. <script src="https://code.angularjs.org/1.2.15/angular-resource.js"></script>) and add this dependency to your app initialization:
angular.module('app', ['ngResource']) ...
Don't put your script.js code inside (function(){}). If you want to do this, call this
function (function(){})();
Here is your working code: Plunker

Categories

Resources