I want to get some data to app.js from the config.js file. But I have some problems.It give me an uncaught reference error.
config.js
var configData={
'cfg':{
'MyData':'Datatasdasdasd',
}};
app.js
var app=angular.module('myapp', ['appConfig'])
app.controller('AppController', function ($scope,cfg) {
$scope.yazdir=cfg.MyData;
});
var config_module = angular.module('appConfig', []);
angular.forEach(configData, function(key, value) {
config_module.constant(value, key);
});
index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="app.js"></script>
<script src="config.js"></script>
</head>
<body ng-controller="AppController">
<div>
{yazdir}
</div>
</body>
</html>
Thank you.
Your scripts are in the wrong order:
<script src="config.js"></script>
<script src="app.js"></script>
Related
When I am adding
<script src="/js/angular.min.js"></script>
in my html page, then I am getting this strange error
Error:-
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.0/$injector/modulerr?p0=letsendorse&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.0%2F%24injector%2Fnomod%3Fp0%3Dletsendorse%0AP%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A6%3A421%0Age%2F%3C%2F%3C%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A24%3A99%0Ab%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A23%3A149%0Age%2F%3C%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A23%3A1%0Ag%2F%3C%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A39%3A201%0An%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A7%3A342%0Ag%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A39%3A49%0Afb%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A42%3A360%0Azc%2Fc%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A19%3A421%0Azc%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A20%3A225%0Abe%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A19%3A41%0A%40http%3A%2F%2Fdev.letsendorse.com%2Fjs%2Fangular.min.js%3A303%3A112%0Ab.Callbacks%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A7852%0Ab.Callbacks%2Fp.fireWith%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A8658%0A.ready%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A3264%0AH%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%3A3%3A693%0A
Here is my html -
<html ng-app="letsendorse">
<head>
<script src="/js/jquery.min.js"></script>
<script src="/js/angular.min.js"></script>
</head>
<body>
<div ng-controller="indexCtrl">
abc
</div>
</body>
</html>
Please help
Without declaring module in js you are assing it in view
Try like this
<html ng-app="letsendorse">
<head>
<script src="/js/jquery.min.js"></script>
<script src="/js/angular.min.js"></script>
<script>
var app=angular.module("letsendorse",[]);
app.controller("indexCtrl",function($scope){
});
</script>
</head>
<body>
<div ng-controller="indexCtrl">
abc
</div>
</body>
</html>
Am completely new to AngularJS. So am trying the flow of sample application before I start the development of a new app in my project. Below is what I have tried.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<script type="text/javascript" src = "js/app.js"></script>
</head>
<body>
<h1>Student Registration!</h1>
<div ng-view></div>
</body>
</html>
registerStudent.html
<table>
<tr>
<td><input type="button" value="Save" ng-click="save()"></td>
<td>{{message}}</td>
</tr>
</table>
app.js
var app = angular.module("app", ['ngRoute', 'app.services', 'app.controllers']);
/**routing*/
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/editStudent', {
templateUrl:'html/editStudent.html',
controller:'studentReg'
});
$routeProvider.when('/viewStudent', {
templateUrl:'html/viewStudent.html',
controller:'studentReg'
});
$routeProvider.when('/registerStudent', {
templateUrl:'html/registerStudent.html',
controller:'studentReg'
});
$routeProvider.otherwise({
redirectTo: '/registerStudent'
});
}]);
services.js
var app = angular.module('app.services', []);
app.service('restService', function(){
this.save=function(){
return 'saved';
};
});
controller.js
var app = angular.module('app.controllers', []);
app.controller('studentReg', function($scope, restService){
$scope.result=restService.save();
$scope.save=function(){
console.log($scope.result);
$scope.message=$scope.result;
};
});
When I tried to run the application, I got the below error.
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=app&p1=Error%3…2Flocalhost%3A8080%2FEnhancedStudentform%2Flib%2Fangular.min.js%3A20%3A421)
You forget to load your controller.js and services.js, that's my guess. Try this after you include you app.js in index.html:
<script type="text/javascript" src = "js/controller.js"></script>
<script type="text/javascript" src = "js/services.js"></script>
Try to Include all js files in you index html like:
<script type="text/javascript" src = "js/app.js"></script>
<script type="text/javascript" src = "js/controller.js"></script>
<script type="text/javascript" src = "js/services.js"></script>
I am new in Angular.js, I am watching pluralsight Angular tutorial, I did what the teacher told on that videos:
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
The h1 should be Hello World! but it is {{helloMessage}}
I am using Latest version of Firefox on windows8 with latest version of Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
Above code works without any issue so it is clear whatever problem is with your version issue. Use nuget to resolve the issue in case you are using Visual studio.
The syntax has changed, you have to add ng-app to the body part, and change the script src, the following code works.
<body ng-app>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
You should a module in your script.
Hope the following code helps you.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"> </script>
<script src="app.js"></script>
</head>
<body>
<h1 ng-controller="MainCtrl">Hello {{name}}!</h1>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>
Here is the code Plunker:-
<!DOCTYPE html>
<html data-ng-app="one">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
var app=angular.module("one",[]);
app.controller("helloWorldCtrl",function ($scope) {
$scope.helloMessage = "Hello World!";
});
</script>
</body>
</html>
I assume there is version problem if you are using new version of angular above 1.2.0 it is not allowed to use global controller in that version Source
I'm learning backbone and I'm trying to execute this sample code to get the feel.
http://backbonetutorials.com/what-is-a-view/
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script type="text/javascript">
Rocky = Backbone.Model.extend({
initialize: function(){
console.log('hello world');
}
});
</script>
</body>
</html>
I get this error.
Uncaught type error: Undefined is not a function!
What did I do wrong? I was just trying to print and see if it's printed on my console!
Thanks,
R
Your underscore.js version is too old. Try to use the new version (1.7):
<script src="http://underscorejs.org/underscore.js"></script>
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>View Initialization</title>
<script type="text/javascript" src="js/jqyery.js"></script>
<script type="text/javascript" src="js/underscore.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
</head>
<body>
<script>
SearchView = Backbone.View.extend({
initialize: function(){
console.log("View is initialized");
}
});
var search_view = new SearchView();
</script>
</body>
</html>
Firebug is showing me following error:
TypeError: i is not a function
What is wrong with my code?
You appear to have a syntax error. You need to replace:
<script type="text/javascript" src="js/jqyery.js"></script>
with:
<script type="text/javascript" src="js/jquery.js"></script>
Note the spelling mistake in the first <script> has been replaced (jqyery).