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.
Related
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");
});
};
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
In my project, I hope the lazy loaded modules can add their own state, so I found the ui-router-extras. It's really useful for me, but when I want to use ng-grid in the lazy loaded module like the module1 in demo, the module1.js file looks like this:
define(['angularAMD', 'ngGrid'], function () {
var app = angular.module("module1", ['ui.router','ngGrid']);
...
and the main.js file looks like this:
require.config({
waitSeconds: 100,
paths: {
"angularAMD": "../../lib/angularAMD",
...
"jQuery": "../../lib/jquery",
"ngGrid": "../../lib/ng-grid-2.0.14.debug"
},
shim: {
"angular": { exports: "angular" },
...
"ngGrid": ["angular", "jQuery"],
},
deps: ["app"]
});
But I got an exception from ng-grid : "Uncaught TypeError: Cannot read property 'factory' of undefined". I found the ng-grid source code where the exception happened:
angular.module('ngGrid.services').factory('$domUtilityService',['$utilityService', '$window', function($utils, $window) {....}
So I found in the lazy loaded module, get module by angular.module('mymodule') returns the undefined. Is there something I forgot to write, or is there another way to use ng-grid or other plugin in the lazy load module with ui-router-extras future?
You need to use the 'ngload' plugin for AngularAMD to load a module on the fly.
Excerpt from the docs:
3rd Party AngularJS Modules
3rd party AngularJS modules, meaning any module created using angular.module syntax, can be loaded as any normal JavaScript file before angularAMD.bootstrap is called. After bootstraping, any AngularJS module must be loaded using the included ngload RequireJS plugin.
define(['app', 'ngload!dataServices'], function (app) {...});
In case you need to load your module using the RequireJS plugin or if you have complex dependecies, you can create a wrapper RequireJS module as below:
define(['angularAMD', 'ui-bootstrap'], function (angularAMD) {
angularAMD.processQueue();
});
In this case, all dependencies will be queued up and when .processQueue() is called, it will go through the queue and copy them into current app using app.register:
https://github.com/marcoslin/angularAMD
I am trying to integrate Angular in to parts of my web application. When i say parts, i mean there are a number of pages with either just static text or images which it does not make sense to load a +100kb library, especially as many users will be using a mobile device.
I am currently using requireJS.. Is there a way i can only load Angular when a specific page/s are laoded, for example:
Home.html: Angular Not Required
Contact Us.html: Angular Not Required
About Us.html: Angular Not Required
Product.html: **Angular Required**
Order.html: **Angular Required**
Order Confirmation.html: Angular Not Required
Our Offices.html: Angular Not Required
At the moment, i am loading Angular in my main.js file using:
(function(require) {
'use strict';
require.config({
baseUrl: '/resources/js',
paths: {
.......
.......
.......
},
shim: {
.......
.......
.......
}
});
require(['angular', 'myApp'], function (angular, myApp) {
angular.bootstrap(document,['myApp']);
});
})(this.require);
Ideally i would like to achieve this without including script tags in the HTML.
Thanks