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>
Related
I'm new to angularjs and I'm using ui-router for this but it throws Error: $injector:modulerr
Module Error in console.
What is the mistake?
I've included the script as well.
var app = angular.module("SearchAPP", ['ngRoute', 'bw.paging', 'ui.router']);
app.config(['$stateProvider',
function($stateProvider) {
var helloState = {
name: 'tab1',
url: '/tab1/',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'tab2',
url: '/tab2',
template: '<h3>hello world!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
}
]);
<html>
<head>
</head>
<body ng-app="myApp">
<a ui-sref="hello">Hello</a>
<a ui-sref="about">About</a>
<ui-view></ui-view>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="//npmcdn.com/angular-ui-router#0.3.1/release/angular-ui-router.js">
</html>
I'm attempting to make a simple Hello World page with an inline template defined as home.html. The routing used is ui.router, and when the code is run I receive an infinite loop of
GET /home.html 404 0.868 ms - 1076
which indicates to me that angular can't find the home.html template that was defined.
app.js
var app = angular.module('HelloWorld', ['ui.router']);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0
});
$scope.title = ''; //Set title to empty
$scope.link = ''; // Set link to empty
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
}]);
app.factory('posts', [function(){
var o = {
posts: [
{title: 'post 1', upvotes: 5}
]
};
return o;
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
index.ejs
<!DOCTYPE html>
<html ng-app="HelloWorld">
<head>
<title>Hello World</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="javascripts/app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="home.html">
<div class="page-header">
<h1>Hello World</h1>
</div>
</script>
</body>
</html>
I can't spot what seems to be going wrong in the code. I've also tried variations using /home.html in both the app config and html to no avail. I could use some insight on how I missed up the configuration/inline template.
If this is exactly your code you have a missing " in id of template. See below for correction
<script type="text/ng-template" id="home.html">
Your code is working fine for me. To further test it I added the following to the html:
<a ui-sref='home'>Home</a>
<a ui-sref='about'>About</a>
....
<script type="text/ng-template" id="about.html">
<div class="page-header">
<h1>About</h1>
</div>
</script>
I then added the following route to the javascript:
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'MainCtrl'
});
This adds links to the top left allowing you to switch views. You can see the working code at http://codepen.io/amartin007/pen/rLOvqa
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
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....
I am having a problem trying to get angular working with this setup. I think I have the script referenced in the right location. Just isn't working for some reason. Here is the code...the error I am getting in Chrome is 'angular is not defined'.
<!DOCTYPE html>
<html data-ng-app = "demoApp">
<head>
<title></title>
</head>
<body>
<div>
<div data-ng-view="">
</div>
</div<
<script src="angular.min.js"></script>
<script>
var demoApp = angular.module("demoApp", []);
demoApp.config(function ($routeProvider){
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateUrl: 'partials/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'partials/view2.html'
})
.otherwise({ redirectTo: '/view1' });
});
demoApp.controller('SimpleController', function($scope){
$scope.customers = [
{name:'Nicholas Rodgers',city:'New Providence'},
{name:'Michael Roker', city: 'Nassau Bahamas'},
{name:'Jane Doe', city: 'Arizona California'}
];
$scope.addCustomer = function(){
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
})
</script>
</body>
</html>
use this link to get angular js file and check you have written wrong </div< tag
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>