I am trying to print Hello World in AngularJS, I have created javascript file named testControllerbut unfortunately it shows this error
here is HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS</title>
<script type="text/javascript" src="../../app/controllers/testController.js"></script>
</head>
<body ng-app="app">
<div ng-controller="testController">
<h2>{{message}}</h2>
</div>
</body>
</html>
and this testController code
var app = angular.module("app", []);
app.controller("testController", function ($scope) {
$scope.message = "Hello, AngularJS";
});
Where is the issue ? can anyone explain ?
Error clearly stated that testController function haven't got register in app module. There is possibility that there could be more files involved in your application(you have shrink the code to have relevant information in post). It seems in each file you're redefining module every time before registering angular components like below
var app = angular.module("app", []);
app.controller("myOtherController", function ($scope) {
//Code here
});
So in this case what had happened is, app got created once again, and old registered component got wiped out. myOtherController got registered with app module. To fix the issue you should not be declaring module again & again. Define it once and use it in other places.
app.module.js
angular.module('app', []);
testController.js
angular.module("app")
.controller("myOtherController", function ($scope) {
//Code here
});
I could not find anything wrong with you code. So I tried it on works fine for me.
Plunker https://plnkr.co/edit/xSKHe6?p=preview
Check Module Error: https://docs.angularjs.org/error/$injector/nomod?p0=app
Related
I created angular module in a javascript file app.js as below:
var app = angular.module('myApp', []);
Further i went to the controller folder of my project and added a javascript file for Controllers.
Next i referenced the already created app.js file(which is havning module creation) in the first step and then i tried to create controller using it as in below lines:
/// <reference path="app.js" />
app.controller('myctrl', function ($scope) {
$scope.tesdtata = 'test';
})
Now when i am binding the scope variable to UI and running the solution, i am getting exceptions as: 'app' not defined
Finally i am not able to vied the value of 'testdata' in browser.
Moreover when i type the line: app.controller(..) the intellisence shows me some diffenet overload variables i.e. app.controller(recepiename,factoryfunction) which is not correct.
Everything works fine if i create module individualy for every controller file and then using that create controller in same file. And problem occurs when i try to reference the single app.js file (having module creation it) and try to create controllers.
Check if your UI(HTML file) looks something like this. That'll do.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script src="app.js"></script>
<script src="control.js"></script>
</head>
<body ng-controller="myCtrl">
{{testdata}}
</body>
</html>
It is discouraged to use global variables in javascript nowadays.
Instead of doing this
// app.js
var app = angular.module('myApp, []');
// controller.js
app.controller...
Do this
// app.js
var app = angular.module('myApp, []');
// controller.js
angular.module('myApp').controller...
Reference not needed and intellisense won't complain too.l
I cam across this blog posting from Dan Wahlin about dynamically loading controllers and views. I downloaded the source from github and tried to reproduce the project on a smaller scale to understand how it all worked. I can get the project to load with the views but where I am stuck is on figuring out why the controller does not seem to bind to the view. Stepping through the code I can see the controller being initialized and injected into the app:
here you can see the app initialize and routes are established
'use strict';
define(['services/routeResolver'], function () {
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'breeze.angular', 'routeResolverServices']);
app.config(['$routeProvider', 'routeResolverProvider', '$controllerProvider',
'$compileProvider', '$filterProvider', '$provide', '$httpProvider',
function ($routeProvider, routeResolverProvider, $controllerProvider,
$compileProvider, $filterProvider, $provide, $httpProvider) {
app.register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
//From Dan Whalin project comments: route.resolve() now accepts the convention to use (name of controller & view) as well as the
//path where the controller or view lives in the controllers or views folder if it's in a sub folder.
// first param is the name of the controller, second param is the directory it and the view exist in, third param is the alias (controller as) optional third param is true false for security
var route = routeResolverProvider.route;
$routeProvider
.when('/', route.resolve('main', '', 'vm'))
.otherwise({ redirectTo: '/' });
}
]);
////support for lodash
// app.factory('_', ['$window', function ($window) {
// return $window._;
// }]);
// breeze factory manager
app.factory('entityManagerFactory', ['breeze', emFactory]);
function emFactory(breeze) {
// Convert properties between server-side PascalCase and client-side camelCase
breeze.NamingConvention.camelCase.setAsDefault();
// Identify the endpoint for the remote data service
var serviceRoot = window.location.protocol + '//' + window.location.host + '/';
var serviceName = serviceRoot + 'breeze/breeze'; // breeze Web API controller
// the "factory" services exposes two members
var factory = {
newManager: function () { return new breeze.EntityManager(serviceName); },
serviceName: serviceName
};
return factory;
};
app.service("httpDataLoader", ["$http", function ($http) {
this.load = function () {
return $http();
}
}]);
//global filter to allow html to render in the UI and bypass SCE (secure content expression)
//usage: ng-html-bind="properyExpresson | html"
app.filter('html', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
}
}
]);
app.run(['breeze', function (breeze) { }]);//currently doing nothing
return app;
});
UPDATE
A question was asked about the route resolver and how it was supposed to work:
From Dan Wahlin Bolg:
The routeResolver.js script creates an AngularJS provider. It’s loaded by RequireJS and used in app.js within the config() function to define routes and resolve them dynamically at runtime.
AngularJS already comes with built-in support for loading views dynamically and with a little more work controllers can be loaded dynamically as well. Loading controller scripts can be done by assigning the resolve property mentioned earlier to a function that handles loading the controller. What’s unique about routeResolver is that it doesn’t accept hard-coded paths to the target view or controller. Instead, you define a base name such as “main” and the resolver will generate the path to the appropriate view and controller based on a standard convention.
within main.js I define the files to load with require
requirejs.config({
baseUrl: 'app',
urlArgs: 'v=1.0',
});
require([
'app',
'services/routeResolver',
'services/config',
'services/dataService'
],
function () {
angular.bootstrap(document, ['myApp']);
});
and within my mainController I setup a basic controller
'use strict';
define(['app'], function (app) {
var injectParams = ['$window', 'dataService'];
var mainController = function($window, dataService){
var vm = this;
vm.message = 'we are wired up';
vm.connect = function () {
alert('hello')
};
};
mainController.$inject = injectParams;
app.register.controller('mainController', mainController);
});
index.html is setup as
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootswatch-slate.css" rel="stylesheet" />
<title></title>
</head>
<body ng-cloak>
<div ng-view></div>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-animate.min.js"></script>
<script src="Scripts/angular-sanitize.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="Scripts/breeze.min.js"></script>
<script src="Scripts/breeze.bridge.angular.js"></script>
<script src="Scripts/require.js" data-main="Scripts/main"></script>
</body>
</html>
and the main view is pretty basic
<div>
<p>static text</p>
<p>{{vm.message}}</p>
<button type="button" ng-click="vm.connect()">click</button>
</div>
What I am seeing in the project is the page/view load fine and within the dev tools I can see the controller as well as all scripts initialize. However the scoped items within the controller vm.message or the function call vm.connect are not bound or recognized from the view. Dev Tools show no error in the console and the view with static content renders. I think I may be getting fooled with the scope of the controllers is either getting duplicated or I am somehow not injecting it correctly. I tried to use the Angular extension to observe the scope and watches but it would error out. I got the same error when I ran the source project from gitHub, but with the angular extension turned off the source project runs fine.
I tried to setup a plnkr but due to the configuration/routing of the project it wouldn't run so here is a link to the full solution from VS. The code is on a GoogleDrive share if I need to move it to another repository please let me know. I would appreciate any code review and suggestion on what I have missed or overlooked. In comparing my code to what is in Dan's solution it appears to be the same.
I'd appreciate any suggestions or ideas
thanks
There were differents between the code in blog post and github.
As routeResolverProvider.route.resolve() on the blog post only support 3 parameters
function (baseName, path, secure) {...}
And on github, it is instead support 4 parameters
function (baseName, path, controllerAs, secure) {...}
So the only possiblily for controllerAs mis-registered with $routeProvider is the code on blog post was used. And routeResolverProvider.route.resolve() is not supporting controllerAs configuration.
I can't get angular to accept my custom service, which is in a seperate file. I know this is all over stack overflow, but I just can't tell where I'm messing up.
Html:
<!DOCTYPE html>
<html lang="en" ng-app="angularApp">
<head>
<!-- ANGULAR -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.js"></script>
<link href="styles/angularApp.css" rel="stylesheet">
<script src="scripts/controllers/angularApp.js"></script>
<script src ="scripts/services/clearCodemirror.js"></script>
Main angular javascript file (contains my controller)
var myApp = angular.module("angularApp", ["ui.codemirror","ui.bootstrap", "ngSanitize", "ngRoute"]);
myApp.controller("mainController", ["$scope", "$timeout", "clearCodemirror", function($scope, $timeout, clearCodemirror){
Service I'm trying to inject:
var myApp = angular.module("angularApp");
myApp.service("clearCodemirror", function(cm){
Error I keep getting:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.6/$injector/modulerr?p0=angularApp&p1=Error…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.6%2Fangular.min.js%3A29%3A56)
I only included the beginnings of each file so you guys wouldn't have to wade through tons of code. Where am I screwing up?
Thanks!
By calling angular.module("angularApp") from your 2nd file, you are recreating a angular module, and NOT getting a reference to the module that was created on the previous file.
There are a few ways to solve that. The simplest one (on my point of view) is to set your angular app to a window.VARIABLE.
window.myApp = angular.module("angularApp", ["ui.codemirror","ui.bootstrap", "ngSanitize", "ngRoute"]);
Then, from your 2nd file you can:
var myApp = window.myApp;
myApp.service("clearCodemirror", function(cm){
There are better ways to do that. However, this one you get you going. Cheers!
Hi you are not re creating the module you are getting the existing module by var myApp = angular.module("angularApp");
as the docs states :-
https://docs.angularjs.org/api/ng/function/angular.module
When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.
i tried with 1.3.14 , i didnt got any error, which version are you using:-
I know it is asked hundreds of times, but I cannot really find out the error. I have looked all the similar questions At first, I did everything in one page, it was working, but obviously I needed to learn to separate my controllers to different files. I have did the following:
partials/hosts.html:
Hosts Page
<div ng-controller="HostsCtrl">
{{ title }}
</div>
index.html
<html>
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="js/myApp.js"></script>
<script src="js/HostsCtrl.js"></script>
</head>
<body ng-app="MyApp">
...
js/MyApp.js
Create MyApp module, and a submodule named controllers
var app = angular.module('MyApp', ['ngRoute', 'ui.bootstrap']);
console.log("index.js file loaded");
angular.module('MyApp.controllers', []);
js/HostsCtrl.js
Just a simple controller in MyApp.controllers module that displays hello world and time.
console.log("HostsCtrl.js file loaded");
angular.module('MyApp.controllers').controller("HostsCtrl", function($scope) {
$scope.title = "Hello world" + new Date().getTime();
});
The console output:
index.js file loaded MyApp.js:2
HostsCtrl.js file loaded HostsCtrl.js:1
Error: [ng:areq] Argument 'HostsCtrl' is not a function, got undefined
I assume the loading order is correct, however I do not understand why it gives an error and cannot resolve HostsCtrl. What am I doing wrong?
Looks like you never declare MyApp.controllers dependency (since your controllers are in separate module). Try this:
var app = angular.module('MyApp', [
'ngRoute',
'ui.bootstrap',
'MyApp.controllers'
]);
I'm writing an app with mostly two javascripts, resources_loader.js and app.js, where the first loads some json files used by app.js.
The problem is: app.js (which has angular.js stuff) should run only after resources_loader.js. I tried to run angular code inside the success callback (resources_loader contains a deferred), but this not seems to work well. Here's my index.html:
<!doctype html>
<html ng-app="myapp">
<body>
<script src="angular.js"></script>
<script src="resources_loader.js"></script>
</body>
</html>
Consider that I moved app.js to resources_loader, inside the success callback. Everytime I try to run it, angular raises the following exception: Uncaught Error: No module: myapp.
My guess is that angular.module('myapp', []) should run before onload's event, which is not the case here.
Another thing is that I want to use yepnope.js in my project like this:
<script "yepnope.js"></script>
<script "resources_loader.js"></script>
<script>
var loader = load_stuff();
yepnope({
test: loader.resolved(),
yep: ['angular.js', 'app.js', 'foo.js', 'bar.js'],
nope: ['fail.js']
});
</script>
app.js contains angular code. I think it's more performant because it only loads angular if the resources are loaded. But how can I do it?
Remove ng-app from <html> tag and use angular.bootstrap(document, ['myapp']); to fire it up once your resources are loaded, like this:
var app = angular.module('myapp', []);
app.config(['$routeProvider', '$locationProvider', function($router, $location) {
$location.html5Mode(true);
$router
.when('/', {
templateUrl: 'some_template.html',
controller: 'myController'
});
}]);
// and then, after everything, run
angular.bootstrap(document, ['myapp']);