I'm studying angularjs and little find constraint error :
$compile:tpload Error Loading Template
index.html:
<!DOCTYPE html>
<html ng-app="latihan7">
<head>
<title>Learn</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div header-page></div>
<script>
var app = angular.module('latihan7',[]);
app.directive('headerPage',function(){
return{
templateUrl : 'header.html'
}
});
</script>
</body>
</html>
header.html
<h2>test header</h2>
It means your template is not accessible. Note that you can provide your template in the same HTML like this to avoid dealing with relative path troubles:
<script type="text/ng-template" id="header.html">
<h2>test template</h2>
</script>
Also, here's your working example
Error: [$compile:tpload] Failed to load template tells you that the template is not accessible. Make sure the path to your header.html file is correct.
you can test the html path is correct by opening the template in the browser, like this.
http://localhsot:80/ur_app/header.html
working Demo
Related
For some reason when I try to run Angular 1.5 I get a 404 error. Also I am using typescript with typings to compile my files. I noticed that two angular.min.js files are compiled, one that has all the code and another one that is an empty file. The 404 error directs to the empty file.
This is my HTML
<!doctype html>
<html>
<head>
</head>
<body ng-app="app">
<header></header>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="Scripts/app.js"></script>
</html>
JS
/// <reference path="../typings/index.d.ts" />
var app = angular.module("app", []);
app.component('header', {
controller: function () {
this.header = "Hello World";
},
template: "\n\t\t<h3>{{$ctrl.header}}</h3>\n\t"
});
//# sourceMappingURL=app.js.map
EDIT: I tried using a local file of angular but that made no difference.
I am trying to learn Angular and I having trouble getting it to load properly. I took a look at similar questions on SO about this, but could not find what I was looking for.
Does anyone see why this error is occurring? Am I calling my new app/module correctly in my view? Do I have the script wrong? Is the version of Angular I am trying to use not supported? Is there another error in my script?
I can't make it out for some reason.
index.html:
<!DOCTYPE html >
<html ng-app="jacksApp">
<head>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.js'></script>
</head>
<body>
<div ng-controller="mainController">
<h1>Making an Angular App</h1>
</div>
</body>
</html>
app.js:
var myApp = angular.module('jacksApp', []);
myApp.controller('mainController', function() {
});
The problem is that you forgot to include the app.js into the page:
<html ng-app="jacksApp">
<head>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.js'></script>
<script src='app.js'></script>
</head>
<body>
<div ng-controller="mainController">
<h1>Making an Angular App</h1>
</div>
</body>
</html>
See the documentation for nomod error message, it describes pretty well the possible cause.
I want to manage my controller specific to an ng-view page, therefore I put the controller in ng-view page and used that controller specific to that page only. However, the code does not show what it should show from that controller.
Here is my case.
I split my code into 3 files, which are "mainfile.php", "page1file.php", and "page2file.php". "mainfile.php" contains main page which routes to page 1 and page 2. To compare the results, I created different conditions for those 2 pages. "page1file.php" uses controller which has been defined in "mainfile.php", while "page2file.php" uses controller which is defined in the page itself.
In this circumtances, "page1file.php" successfully shows what I want, but "page2file.php" does not show what it should show. Please help me and give a very simple explanation and a simple solution since I'm very new to angularjs.
Here is my code. You can just copy them and run it on your php server.
mainfile.php :
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script type="text/javascript">
function routeReload($scope) {
$scope.routeReloading = function(){
window.location.reload();
};
}
routeReload.$inject = ['$scope'];
function routeConfig($routeProvider) {
$routeProvider
.when('/one',{
templateUrl:'page1file.php'
})
.when('/two',{
templateUrl:'page2file.php'
})
;
}
routeConfig.$inject=['$routeProvider'];
function testOne($scope) {
$scope.name = "page one";
}
testOne.$inject = ['$scope'];
var testNgView = angular.module('testNgView',['ngRoute']);
testNgView.config(routeConfig);
testNgView.controller('routeReload',routeReload);
testNgView.controller('testOne',testOne);
</script>
</head>
<body>
<div ng-app="testNgView">
<div ng-controller="routeReload">
View page <a ng-click="routeReloading();" href="#one">one</a> or
<a ng-click="routeReloading();" href="#two">two</a>
<div ng-view></div>
</div>
</div>
</body>
</html>
page1file.php :
<div ng-controller="testOne">
This is {{name}}
</div>
page2file.php :
<script type="text/javascript">
function testTwo($scope) {
$scope.name = "page two";
}
testTwo.$inject = ['$scope'];
testNgView.controller('testTwo',testTwo);
</script>
<div ng-controller="testTwo">
This is {{name}}
</div>
I don't think you can inline script modules in your view templates. Have a look at this working version of your app, the way I would organize it:
http://plnkr.co/edit/nSsagK1Y04akNJyMToah?p=preview
You can use .php files in place of the .html files, that shouldn't make a difference.
So your main file should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
</head>
<body>
<div ng-app="testNgView">
View page one
or two
<ng-view></ng-view>
</div>
<script src="app.module.js"></script>
<script src="app.routes.js"></script>
<script src="views/page1/controller.js"></script>
<script src="views/page2/controller.js"></script>
</body>
</html>
If your goal is to use PHP to dynamically render your controllers, see the answer to this SO question: Angularjs: server side (php) rendering and data binding client side after an event
You may also be interested in this article, about loading Angular components after the application has been bootstrapped: http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm
TL;DR: You would need to store a reference to $controllerProvider in the config phase, and then call $controllerProvider.register('MyController', MyController) in your inline script. I'm not sure how I feel about that though...
I'm new to angular and I'm learnign it using phpStorm tool.
It looks like I've done everything right, but I still can't get the right result when I execute the following html and Javascript codes, I did lots of researches on this and made sure that I followed the solutions provided without getting a step ahead:
index.html
<!DOCTYPE html>
<html ng-app="myApp" >
<head >
<title>Ang Tut</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div ng-controller="GroupController">
<ul>
<li ng-repeat="group in groups" ng-model="group.group_name">
{{group.group_name}}
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</html>
and my app.js file:
var app = angular.module("myApp", []);
app.controller("GroupController", function($scope){
$scope.groups= [
{"id":"144","group_name":"new grouppp"},
{"id":"303","group_name":"Combination group"},
{"id":"323","group_name":"pcb"}
]
});
Same code is working, angular.min.js may not included properly, access your index.html file using http:// instead of file://
var app = angular.module("myApp", []);
app.controller("GroupController", function($scope){
$scope.groups= [
{"id":"144","group_name":"new grouppp"},
{"id":"303","group_name":"Combination group"},
{"id":"323","group_name":"pcb"}
]
});
<!DOCTYPE html>
<html ng-app="myApp" >
<head >
<title>Ang Tut</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div ng-controller="GroupController">
<ul>
<li ng-repeat="group in groups" ng-model="group.group_name">
{{group.group_name}}
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</html>
I had to change the js file, so to include "function()" at the beginning of it, and also "()" at the end line. That solved the problem
You have to include ngRoute in your project.
<script src="angular-route.js"> You can get this file here.
And in your app.js
var app = angular.module("myApp", ['ngRoute']);
And it will start working correctly.
Now, the reason this works in jsFiddle but not locally.
That is because if you look at left pane in jsFiddle under Frameworks & Extensions, you will find the selected option to be no wrap - in <body>
Which means that the code you write in javascript block of js fiddle will be placed inside the body tag the the generated html and therefore, you don't need ngRoute.
But while running locally, I see you have your module initialization in different file viz. app.js that is where ngRoute comes into picture.
In older versions of angular ngRoute was included in angular itself. But in latest versions (not sure from which versions) the ngRoute module is provided separately.
I'm used to code with Java with many files with object paradigm and MVC pattern with packages.
And I begin with AngularJS, I'm trying to enable a simple index.html who use a controller in javascript file but doesn't work.
my html file : index.html
<html ng-app="carre">
<head>
<script src="js/angular.js"></script>
<script src="js/CalculCtrl.js"></script>
<script>
var ctrl = angular.module('carre',[]);
</script>
</head>
<body ng-controller="CalculCtrl">
<div>{{2+2}}</div>
<p>{{temps}}</p>
</body></html>
My javascript file as controller located at js/CalculCtrl.js
carre.controller('CalculCtrl', function($scope)
{
$scope.temps = 'pluie';
}
)
What's wrong here please ?
Thanks in advance.
Rename carre.controller(...) to ctrl.controller
Ctrl is the name of the variable holding a reference to your module, carre is the name you have given it for reference in the ng-app directive.
Edit: Also, I recommend you get the Batarang extension for Chrome, it adds a page to the Developer Tools for debugging Angular apps. Very helpful tool to have.
You should invert the file inclusion and the module declaration:
<html ng-app="carre">
<head>
<script src="js/angular.js"></script>
<script>
var carre = angular.module('carre',[]);
</script>
<script src="js/CalculCtrl.js"></script>
</head>
Also, because you are using a variable called carre inside CalculCtrl.js, you should rename the variabile assignd when creating the module, from ctrl to carre:
var carre = angular.module('carre',[]);
You have created module ctrl and using carre to refer it.And script sequence is wrong.The right answer is
index.html
<html>
enter code here<html ng-app="carre">
<head>
<script src="js/angular.js"></script>
<script>
var carre = angular.module('carre',[]);
</script>
<script src="js/CalculCtrl.js"></script>
</head>
<body ng-controller="CalculCtrl">
<div>{{2+2}}</div>
<p>{{temps}}</p>
</body></html>
CalculCtrl.js
carre.controller('CalculCtrl', function($scope)
{
$scope.temps = 'pluie';
}
);
As an alternative to the other answers you could create your CalculCtrl in it's own module and then depend on that module when declaring carre.
angular.module('Calcul', [])
.controller('CalculCtrl', function($scope)
{
$scope.temps = 'pluie';
}
);
and then for carre
angular.module('carre', ['Calcul']);
In this way you don't need to re-order your script tags as they are
the answer is here
index.html
<html ng-app="AppliName">
<head>
<--! we load angularjs -->
<script src="js/angular.js"></script>
<--! we load our controller in an other javascript file -->
<script src="js/mesControllers.js"></script>
</head>
<body ng-controller="myCtrl">
<p>time is : {{temps}} </p>
</body>
</html>
mesControllers.js located at js/mesControllers.js
var AppliName = angular.module('AppliName', []);
AppliName.controller('myCtrl', function ($scope) {
$scope.temps = 'pluie';
});
run and Keep calm it working now ;p