So I already know when I see the answer I'm going to feel really dumb, but I'm working through the AngularJS tutorials at egghead.io. When I do this:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" href="/foundation/stylesheets/foundation.min.css">
<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>
</body>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
</html>
with my JavaScript file as so (named main.js):
var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
return { message: "I'm data from a service"}
})
function FirstCtrl($scope, Data) {
$scope.data = Data;
}
function SecondCtrl($scope, Data) {
$scope.data = Data;
}
My {{ data.message }} isn't recognized as an AngularJS binding (i.e. in the page it shows up as
{{ data.message }} instead of "I'm data from a service"). But if I take all the JS code and put it into <script></script> tags directly in the HTML it works fine. Am I missing a reference or something? Haven't seemed to find this anywhere, likely because it's really basic.
I'm going to JUMP THE GUN and recommend you switch these
<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>
to
<script src="lib/angular/angular.js"></script>
<script src="js/main.js"></script>
If this works then that is because before you were trying to use angular when it wasn't event loaded.
Tip
Now, when I first started with javascript these sort of things used to happen to me a lot. The best thing for you to do is learn how to use the console it would have told you in the console something along the lines of cannot read property 'module' of undefined that meaning that angular is undefined and therefore not loaded.
Load Angular before your controllers, not after
switch between the lines:
<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>
you need to run main.js after angular is loaded
Related
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
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 have a directive that I want to clear the content of a DIV and replace it with a template either in my current view or somewhere else in my app.
So say I have my template like so...
<!-- This is an experiment -->
<script type="text/ng-template" id="1.html">
<div data-ng-repeat="beatle in beatles track by $index">
Name: {{beatle.name}}, Instrument: {{ beatle.inst}}, Alive: {{ beatle.alive }}
</div>
</script>
and in my directive I have the following:
link: function (scope, element) {
element.bind('click', function () {
// clear out old template
angular.element(element).empty();
angular.element(element).html(document.getElementById('1.html'));
});
}
I seem to be able to load the template but I see the following instead of my content
[object HTMLScriptElement]
I wondering if I need to compile again or run a digest or if I am just going about this totally wrong. I also don't like using document.getElementById in my directive code, for some reason it feels wrong. Can anyone provide me with an answer to why I only see [object HTMLScriptElement] after clicking my directive and wether using document.getElementById in my directive is acceptable or if there is a better command to load the content...
Here is a fiddle of the whole app... or a bin! https://jsbin.com/yizupa/edit?html,output
In the meantime I have just came to the conclusion that my setup / implementation is wrong and that I should consider another way to implement such a feature.
here, i have create one running demo.. for route using **text/ng-template**..
index.html
-------------
<!DOCTYPE html>
<html lang="en" ng-app="singlePageApp">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<head>
<meta charset="UTF-8">
<title>AngularJS Routing Template..</title>
</head>
<body>
<div ng-controller="singlePageAppController">
{{message}}
</div>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<div ng-view="showOutput"></div>
</body>
<script type="text/ng-template" id="home.html">
This is HOME Page..
</script>
<script type="text/ng-template" id="about.html">
This is ABOUT Page..
</script>
</html>
--------
app.js
--------
var app=angular.module('singlePageApp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/home',{
controller:'singlePageAppController',
templateUrl: 'home.html'
})
.when('/about',{
templateUrl: 'about.html'
});
});
app.controller('singlePageAppController',function($scope){
$scope.message="Hello Single Page Application..";
});
I am new to angularjs and this might sound very silly but I want to know why my angularjs app won't bootstrap without making a module even though egghead.io and several tutorials showing otherwise.
Here is my HTML template
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.1" src="https://code.angularjs.org/1.4.0-beta.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
And the controller.js file which DOESN'T WORKS
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
When i register the module [and naming the ng-app as 'hello' ofcourse] and write a controller it works
angular.module('hello', []).controller('HelloController', function($scope) {
$scope.greeting = { text: 'Hello' };
});
I just want to know the reason for this behavior.
Thanks in anticipation.
This is a breaking change of angular 1.3. You can see a list of breaking changes here
Because of this change, you cannot use global functions as a controller. You can override this behavior by using allowGlobals (More info here) but I won't recommend that.