I'm trying to embed the dalliance genome browser into an Angular application.
It works fine when placed on the main page.
However, because the app is large, I am trying to use a Template-expanding directive.
I read some posts about inline javascript not playing well along Angular, and the solution. In particular I added this gist to my app.
My app now looks like this plunker.
Question: The genome browser plugin does not appear :-( What's wrong?
app.js:
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.title = "Genome Browser";
}])
.directive('genomeBrowser', function() {
return {
templateUrl: 'genomeBrowser.html'
};
});
})(window.angular);
genomeBrowser.html:
<h2>Embedded page:</h2>
<script type='text/javascript-lazy' language="javascript">
new Browser(options);
</script>
<div id="svgHolder"></div>
(The options are not relevant here but can be seen in the plunker.)
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Genome browser</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
<script src="angular-loadscript.js"></script>
<script src="http://www.biodalliance.org/release-0.13/dalliance-compiled.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<h1>{{title}}</h1>
<div genome-browser></div>
</div>
</body>
</html>
You forgot to include 'ngLoadScript' as a dependency:
angular.module('docsTemplateUrlDirective', [])
should be
angular.module('docsTemplateUrlDirective', ['ngLoadScript'])
Also, there was a missing quote in your partial in console.log('debug');
To solve this, I moved all inline javascript into the directive.
app.js:
(function() {
'use strict';
angular.module('app', []);
angular.module('app').controller('mainCtrl', ['$scope', function($scope) {
$scope.title = "Genome Browser";
}]);
angular.module('app').directive('genomeBrowser', function() {
return {
templateUrl: 'genomeBrowser.html',
restrict: 'E',
controller: function($scope) {
var browser = new Browser({
pageName: 'dalliance', // Target element ID.
chr: '22',
viewStart: 30000000,
viewEnd: 30030000,
cookieKey: 'human',
coordSystem: {
speciesName: 'Human',
taxon: 9606,
auth: 'NCBI',
version: '36',
ucscName: 'hg18'
},
sources: [{
name: 'Genome',
uri: 'http://www.derkholm.net:8080/das/hg18comp/',
tier_type: 'sequence',
provides_entrypoints: true
}, {
name: 'Genes',
desc: 'Gene structures from Ensembl 54',
uri: 'http://www.derkholm.net:8080/das/hsa_54_36p/',
collapseSuperGroups: true,
provides_karyotype: true,
provides_search: true
}, {
name: 'Repeats',
uri: 'http://www.derkholm.net:8080/das/hsa_54_36p/',
stylesheet_uri: 'http://www.derkholm.net/dalliance-test/stylesheets/ens-repeats.xml'
}, {
name: 'MeDIP raw',
uri: 'http://www.derkholm.net:8080/das/medipseq_reads'
}, {
name: 'MeDIP-seq',
uri: 'http://www.ebi.ac.uk/das-srv/genomicdas/das/batman_seq_SP/'
}]
});
}
};
});
})();
genomeBrowser.html:
<div id="dalliance"></div>
I still have things to learn about how to properly control this browser my for next homework, but this answers the question.
Plunk: http://plnkr.co/edit/KSUVq8?p=preview
Related
I'm really struggling with this issue and I don't know what the matter is...
I'm going to leave out a lot of code, but this is essentially the jist of it... Based off the Angular material design guidelines this should work. I can't figure out for the life of me why it doesn't.
When I run the code I simply get an error:
TypeError: Cannot read property 'show' of undefined
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Main">
<!-- some stuff here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.css">
</head>
<body ng-controller="MainCtrl as ctrl">
<div ng-click="executeToast()">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.js"></script>
</body>
</html>
controller:
angular.module('MainController', [
'MainService',
'MainDirective',
'ngMaterial',
'ngMessages',
'ngSanitize'
])
.controller('MainCtrl', [ '$scope', '$sce', '$mdToast', function($scope, Main, $sce, $apply, $rootScope, $mdToast) {
$scope.executeToast() = function() {
$mdToast.show($mdToast.simple({
hideDelay: 3000,
position: 'top left',
content: 'testing',
toastClass: 'success'
}));
}
}]);
Any thoughts or possible solutions? Thanks!
A couple of mistakes you made here :
1, In dependency injection sequence must be same, check more here
2, No need to pass $apply as a dependency,
Try this
.controller('MainCtrl', [ '$scope', '$rootScope', '$mdToast','$sce', function($scope, $rootScope, $mdToast, $sce) {
$scope.executeToast() = function() {
$mdToast.show($mdToast.simple({
hideDelay: 3000,
position: 'top left',
content: 'testing',
toastClass: 'success'
}));
I just started AngularJS. When I try to implemt following example, I am getting
404 Not Found
This is my main.html
<!DOCTYPE html>
<html ng-app="demoApp">
<script src="angular.min.js"></script>
<head>
<title>main page</title>
</head>
<body>
<div ng-view></div>
<script>
var demo = angular.module('demoApp',[]);
demo.config(function ($routeProvider){
$routeProvider
.when ('foo',{
controller : 'SimpleController',
templateUrl: 'first.html'
})
});
demo.controller('SimpleController',function($scope){
$scope.customers = [
{name: 'sac',city:'abcd'},
{name: 'mac',city:'efgh'},
{name: 'nalaka',city:'ijkl'}
];
});
</script>
</body>
</html>
My first.html
<ul>
<li ng-repeat="cus in customers ">{{ cus.name }}</li>
</ul>
When I visit localhost/foo I am getting 404 exception. I just started AngularJS. So any help/guide to solve this problem will be a great help for me.
Thanks in advance
You should refer angular-route.min.js file on page & then include ngRoute module in your application.
var demo = angular.module('demoApp',['ngRoute']);
You should correct your .when condition to below
.when('/foo',
As you did't enabled html5mode in your routing, you could access the page via localhost/#/foo URL.
var demo = angular.module('demoApp', ['ngRoute']);
demo.config(function($routeProvider) {
$routeProvider
.when('/foo', {
controller: 'SimpleController',
templateUrl: 'first.html'
})
// By default it will open foo
.otherwise({redirectTo: '/foo'})
});
demo.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'sac',
city: 'abcd'
},
{
name: 'mac',
city: 'efgh'
},
{
name: 'nalaka',
city: 'ijkl'
}
];
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<div ng-app="demoApp">
<div ng-view></div>
<script type="text/ng-template" id="first.html">
Content of the template.
</script>
</div>
I have a question about how to pass scope to a template rendered from a directive. This seems like it should be so straight forward but somehow I am having a lot of trouble getting it to work.
My HTML (simplified for brevity) is as follows:
<div ng-app="myApp">
<md-content>
<!-- strangely TestController as tc doesnt work -->
<div ng-controller="TestController">
<div ng-click="showDialog();">Show</div> <!-- this also doesnt seem to work.. -->
</div>
</md-content>
</div>
And then the application (contained in a script tag on index.html):
// app -- using components
var app = angular.module('ctrlApp',
['components', 'ngMaterial']);
// removed app.config from ngMaterial for brevity
The app contains a controller that has a function to show a mdDialog:
//controller
app.controller('TestController', function($scope, $log, $mdDialog) {
$scope.items = [{'title': 1},{'title': 2}];
// open modal
$scope.showDialog = function() {
$mdDialog.show({
templateUrl: 'dialog.html',
parent: angular.element(document.body),
clickOutsideToClose:true,
controller: function() {
// scope from parent persists here as expected
console.dir($scope.items);
// used to wire up dialog specific UI behavior
$scope.cancel = function() { $mdDialog.hide(); }
}
});
};
});
Dialog.html just renders out the directive in a modal:
<md-dialog aria-label="test">
<form ng-cloak>
<!-- rendering a directive here -->
<my-directive></my-directive>
</form>
</md-dialog>
And finally, returning back to the app, here is the directive:
// link up a directive that is rendered in the model form
var d = angular.module('components', []);
d.directive('myDirective', function() {
function link(scope, element, attributes ) {
console.log("scope.items are ", scope.items); }
return({
restrict: "E",
controller: 'TestController',
link: link,
templateUrl: 'directive.html',
});
});
And finally the directive.html template:
<div>
<h1>my Directive template</h1>
<pre> Empty!: {scope.items}</pre>
</div>
I am confused as to how I can get the scope that is created by the TestController into the template that is rendered by the directive. It works fine all the way up to the 'link' function but not in the directive's template...
Any advice would be much appreciated!
Thanks
- X
You have done mistake in directive.html,
Your code:
<div>
<h1>my Directive template</h1>
<pre> Empty!: {scope.items}</pre>
</div>
Expected code:
<div>
<h1>my Directive template</h1>
<pre> Empty!: {{scope.items[0]}}</pre> //Here you need to pass Array index
</div>
Here i given you running code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" media="screen" title="no title" charset="utf-8">
<script src="bower_components/angular/angular.min.js" charset="utf-8"></script>
<script src="bower_components/angular-animate/angular-animate.min.js" charset="utf-8"></script>
<script src="bower_components/angular-aria/angular-aria.min.js" charset="utf-8"></script>
<script src="bower_components/angular-messages/angular-messages.min.js" charset="utf-8"></script>
<script src="bower_components/angular-material/angular-material.js" charset="utf-8"></script>
</head>
<body>
<div ng-app="ctrlApp">
<md-content>
<!-- strangely TestController as tc doesnt work -->
<div ng-controller="TestController">
<div ng-click="showDialog();">Show</div>
<!-- this also doesnt seem to work.. -->
</div>
</md-content>
</div>
<script type="text/javascript">
/** Own Module **/
var d = angular.module('components', []);
d.directive('myDirective', function() {
function link(scope, element, attributes) {
console.log("scope.items are ", scope.items);
}
return ({
restrict: "E",
controller: 'TestController',
link: link,
template: '<div>\
<h1>my Directive template</h1>\
<pre> Empty!: {{items[0]}}</pre>\
</div>',
});
});
var app = angular.module('ctrlApp', ['components', 'ngMaterial']);
app.controller('TestController', function($scope, $log, $mdDialog) {
$scope.items = [{
'title': 1
}, {
'title': 2
}];
// open modal
$scope.showDialog = function() {
$mdDialog.show({
template: '<md-dialog aria-label="test">\
<form ng-cloak>\
<my-directive></my-directive> </form>\
</md-dialog>',
parent: angular.element(document.body),
clickOutsideToClose: true,
controller: function() {
// scope from parent persists here as expected
console.dir($scope.items);
// used to wire up dialog specific UI behavior
$scope.cancel = function() {
$mdDialog.hide();
}
}
});
};
});
</script>
</body>
</html>
If you want to pass the scope to template try something like this
In Dialog.html
In Directive just add the following line
return({
restrict: "E",
controller: 'TestController',
scope:{
item:'='
},
link: link,
templateUrl: 'directive.html',
});
Hope this helps.
If you want to pass scope to $mdDialog look at the link below.
https://github.com/angular/material/issues/1531
I'm trying to inject my factory into a controller. If I list the factory as one of the controller's parameters, I get this error:
Error: [$injector:unpr] Unknown provider: wordRushFacProvider <- wordRushFac <- wordrushCtrl
http://errors.angularjs.org/1.6.1/$injector/unpr?p0=wordRushFacProvider%20%3C-%20wordRushFac%20%3C-%20wordrushCtrl
Here is the code for my factory:
(function() {
"use strict";
angular
.module("wordrush")
.factory("wordRushFac", function($http) {
function getValidWords() {
return $http.get('../data/valid-words.txt');
}
return {
getValidWords : getValidWords
}
})
})
And the code for my controller:
(function() {
'use strict'
angular
.module('wordrush')
.controller('wordrushCtrl', function($scope, $http, wordRushFac) {
wordRushFac.getValidWords().then(function(words) {
$scope.words = words.data;
});
$scope.words = 'Hello'
});
})();
And for my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Word Rush</title>
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="components/wordrush.ctr.js"></script>
<script src="components/wordrush.fac.js"></script>
</head>
<body ng-app="wordrush" ng-controller="wordrushCtrl">
<h1> {{ words }} </h1>
</body>
</html>
And for my app.js:
angular
.module('wordrush', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('green');
})
I made a program with code identical to this except the names and variables were changed, and it worked fine. So what am I doing wrong here?
Here is a plunkr that says "Hello": https://plnkr.co/edit/MyxcXQ8YI4QYqeFsyVJz?p=preview
You have an extra set of open / close parenthesis in your controller definition, remove those:
angular
.module('wordrush')
.controller('wordrushCtrl', function($scope, $http, wordRushFac) {
wordRushFac.getValidWords().then(function(words) {
$scope.words = words.data;
});
$scope.words = 'Hello'
});
Also, are you sure you are including the ng-material JS file? I didn't see that listed in your HTML.
You're not injecting in the controller, should be:
.controller('wordrushCtrl', ['$scope', '$http', 'wordRushFac', function($scope, $http, wordRushFac) {
// Rest of controller code;
}]);
Switch your scripts. Factory script should be first then controller
Ther order should be,
<script src="scripts/app.js"></script>
<script src="components/wordrush.fac.js"></script>
<script src="components/wordrush.ctr.js"></script>
DEMO
I made the following changes and it worked fine.
(function() {
"use strict";
angular
.module("wordrush")
.factory("wordRushFac", function($http) {
function getValidWords() {
return $http.get('../data/valid-words.txt');
};
return {
getValidWords : getValidWords
};
});
}());
The official tutorial is from here:
https://docs.angularjs.org/guide/directive
I copied the official code from "Creating Directives", sub-header "Template-expanding directive". Example 1 works perfectly (the example where there are only script.js and index.html), with my browser rendering the desired results. Example 2 is a simple expansion of Example 1, replacing the "template" line from the directive file with a "templateUrl" line, and adding a my-customer.html file as the template. However, this doesn't work for me.
The copied code are as follows. All files are put in the same folder:
index3.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example12-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"> </script>
<script src="script3.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<div my-customer></div>
</div>
</body>
</html>
script3.js:
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html'
};
});
my-customer.html:
Name: {{customer.name}} Address: {{customer.address}}
Why do I get a blank page when I open index3.html in my browser?
Fixed it by disabling cache when developer tool is on (option chosen in the js console preferences of Chrome). The code was correct. It wasn't rendered correctly because of cache.
index.html
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="script.js"></script>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<div my-customer></div>
</div>
</body>
my-customer.html
Name: {{customer.name}} Address: {{customer.address}}
script.js
var app=angular.module('docsTemplateUrlDirective', []);
app.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}]);
app.directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html'
};
});
above code fine work in my pc....