I am new to angularJs and trying to write a simple program involving states. I am using the ui-router library.
On running my program in the browser is shows the following error:
Uncaught Error: [$injector:modulerr]
Here is my code:
(function(){
'use strict';
angular.module('tryingApp',['ui.router'])
.config(RoutesConfig);
RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function RoutesConfig($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/me');
$stateProvider
.state('me',{
url:'/me',
templateUrl:'firststate.html'
})
.state('nome',{
url:'/nome',
templateUrl:'secondstate.html'
});
}
})();
<!doctype html>
<html ng-app="tryingApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ui-view></ui-view>
<a ui-sref="me">click me!</a>
<a ui-sref="nome">no, click me!!</a>
</body>
</html>
In addition to the above to html and javascript files, I have the following two html files for firststate.html and secondstate.html respectively:
firstate.html:
<h3>Yay, this is me!! first state</h3>
secondstate.html:
<h3>Yippee!! this is me, second state!!!</h3>
These are all the files that I have.
My code was working in other browsers but was not working in Google Chrome. I had to clear the browsing data and Cache to get it working. Everything else is correct.
Leaving this for people who come across this problem in future.
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'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 am currently doing the egghead.io AngularJS course and have run into an issue a few others seem to have.
Any solutions I have come across here aren't working for me though.
In the second video the instructor is showing how to connect controllers to ng-apps. I have followed the video exactly, restarted a few times, and tried solutions on here.
I am given the following error console:
In the long list of errors there, I have picked out the first as as saying:
"FirstCtrl' is not a function, got undefined"
Anyone know of a solution?
Was something changed in the Angular spec in regards to assigning controllers, or is this course skipping information?
Code:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
Here is your exemple working (Run the exemple ...).
Add you app name.
Declare your controller using angular.controller.
angular.module('myApp', []);
angular.module('myApp').controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
An Angular controller is defined like this :
var app = angular.module('myApp',[]); //Your app
//The controller in the myApp module, first param is the controller's name
//Second is the controller's dependencies
app.controller('FirstCtrl', ['$scope', function($scope) {
//Do whatever you want in this controller
$scope.data.message = 'Hello!';
}]);
Then you bind your controller to the view (your HTML) using the ng-controller attribute.
You're missing the part where you define your controller.
You can definitely have your FirstCtrl be a function. You just need to first define that the FirstCtrl is a controller.
Example:
angular.module("app").controller("FirstCtrl", FirstCtrl);
And then you have your FirstCtrl function:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
You also need to include that file in your html scripts
<script src="mypath/firstctrl.js"></script>
I too was facing problem when defined controller just like a simple JavaScript function and then I downgraded the cdn link version for angular from "1.4.5" to "1.2.28" and it started recognising controller (A simple javascript function). Also you have to include the .js file in which you have created your controller in your html file . Actually they have deprecated the use of simple javascript function as a controller from angular 1.3 version.
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.