Dependency error in angularjs - javascript

I'm new to angularjs/js and trying to follow an example in introduction video, but in spite of copying the example, I get errors that does not appear in demonstration video.
The error I get is 'unknown provider routeProvider'.
Can someone explain why I get the error -- and not least how I resolve it?
thanks,
Anders
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script >
var app = angular.module("app", []);
app.config(function ($routeProvider) {
});
</script>
</head>
<body>
</body>
</html>
https://www.youtube.com/watch?v=8ILQOFAgaXE

you should add this to the app dependencies:
var app = angular.module("app", ['ngRoute']);
ngRoute is a separate module which contains $routeProvider
The youtube video is referring to a version of angular prior to 1.2 where when ngRoute was present, it was merged with angular itself

angular route has been moved to a seperate module and you need to download, include angular-route.js in your html file. download the angular-route.js file from here --> https://github.com/angular/bower-angular-route.
and change this line var app = angular.module("app", []);
to var app = angular.module("app", ['ngRoute']);

Related

The controller with the name 'mainController' is not registered

i have this code in my script.js file
var mainController = function($scope){
$scope.message = "Plunker";
};
and this is my HTML
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<h1>Hello {{ message }}</h1>
</body>
</html>
i declared ng-app in the opening html tag
but i get this error on my console that mainController is not registered
To paraphrase http://www.w3schools.com/angular/angular_modules.asp
<div ng-app="myApp" ng-controller="mainController">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("mainController", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
The important line is
app.controller("mainController", function($scope)
which injects your controller into your app
The code is following an obsolete example.
Migrating from 1.2 to 1.3
Controllers
Due to 3f2232b5, $controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.
To migrate, register your controllers with modules rather than exposing them as globals:
Before:
function MyController() {
// ...
}
After:
angular.module('myApp', []).controller('MyController', [function() {
// ...
}]);
-- AngularJS Developer Guide -- Migrating from 1.2 to 1.3
You need to register your controller with as like this in your script.js file
var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
$scope.message= "msg";
});
You need to register your controller with the main module of your application.
Try this in your app.js
var myApp = angular.module('app', []);
myApp.controller('mainController', function($scope){
$scope.message = "Plunker";
});
and in your html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<h1>Hello {{ message }}</h1>
</body>
</html>
In case you have your code correct and still getting this error then look in the Console (JS Console) in the browser using inspect window for another JS error shown. Most propably that error will be before this error.
If you solve that JS error then this will get resolved automatically if your code is right. In my case I started getting this error out of the sudden and tried to solve it but nothing work and then I try something else for sometime and saw another error above this error and tried solving it. That was a easy thing to solve and once done this error also got solved by itself.

AngularJs Controller not linking to view

I can't understand why the text I type in my controller is not linking to the view.
I created two javascript files. app.js and MainController.js
I followed a tutorial from Codecademy to replicate a similar scenario but I'm probably missing something very rudimentary which I can't figure out for some reason.
Below are my files:
index.html
<!DOCTYPE html>
<html lang="en">
<body ng-app="myApp" ng-controller="MainController">
<h1>{{title}}</h1>
<scipt src="js/app.js"></scipt>
<script src="js/controller/MainController.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp', []);
MainController.js
app.controller('MainController', ['$scope', function ($scope) {
$scope.title = 'Hola!';
}]);
I think it could be to do with having my Main Controller in a separate file to the app.js file.
I think that you're not loading Angular in your main page (index.html), so just add this line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
you need to declare the app variable before referencing it in MainController.js
// MainController.js
var app = angular.module('myApp');
In mainController
angular.module('myApp').controller(......
You need to add Angular.js to you head.. Before you app.js I think angular is not loaded now.
index.html
<head>
<title>{{title}}</title>
<script data-require="angular.js#1.5.0-rc.0" data-semver="1.5.0-rc.0" src="https://code.angularjs.org/1.5.0- rc.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body >
<h1>{{title}}</h1>
{{1+1}}
</body>
</html>
app.js
(function() {
angular.module('myApp', [])
.controller('mainController', ['$scope', function($scope) {
$scope.title = 'Hello world!';
}]);
}())
NOTE: Do not declare a variable app as this is on global scope. which can be overwritten by something else always try to use a IFFE
and add your controllers to your module and create other modules if you want to put services inside another file.

understanding routes and templates html in angularjs, simples example possible

I'm trying to embed angularjs into my existing asp.net mvc4 app.
(Views/Shared/)
_Layout.cshtml
<html data-ng-app="myApp">
<head>
<script src="~/Scripts/angular.min.js"></script>
<script src="/js/main.js"></script>
</head>
<body>
#RenderBody()
</body>
</html>
/js/main.js
var app = angular.module("myApp", []);
module.config(function ($routeProvider) {
$routeProvider.when("/topics", {
controller: "topicsController",
templateUrl: "/js/templates/topicsView.html"
});
$routeProvider.otherwise({ redirectTo: "/" });
});
app.controller("topicsController", function ($scope) {
$scope.testData = "some dummy data";
});
/js/templates/topicsView.html
<h1>topics template view, dummy object </h1>
{{ testData }}
and inside /Views/Home/Index.cshtml
<div data-ng-view=""></div>
I'm trying to navigate to /topics using #/topics url but nothing is rendered (blank page, not 404), not even h1 title from templates/topicsView.html
What I'm doing wrong?
You forgot to include ngRoute module. Try this:
var app = angular.module("myApp", ['ngRoute']);
You need to include angular-routes.js along with angular.js and then include ngRoutes modules as a dependency when you create the angular main app module.

AngularJS Route Uncaught object in v 1.2.15 But not in v 1.0.1

I've been trying a ng-route example which works in AngularJS version 1.0.1 but not working in version 1.2.15. I did added the dependency angular-route.js but still getting uncaught object error. The following is my example. It consists of 4 files (index.html, page.html, chapter.html, and main.html).
If you comment out 1.2.15/angular.min.js, angular-route.js and .module('testNgRoute', ['ngRoute']) and uncomment 1.0.1/angular.min.js and .module('testNgRoute', []). It will work.
page.html contains only one line "This is page.html"
chapter.html contains only one line "This is chapter.html"
main.html contains only one line "This is main.html"
This is my index.html file
<!DOCTYPE html>
<html ng-app="testNgRoute">
<title>Test ng-route</title>
<body>
<div>
<h1>Test ng-route</h1>
<div ng-view></div>
</div>
</body>
<!--it works when I use this version of angularJS-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>-->
<!--it didn't work when I use this version of angularJS-->
<!-- According to the documentation, I should include angular-route.js-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"><script>
<script>
angular
//it works when I use v1.0.1 and without including any dependencies.
//.module('testNgRoute', [])
//it didn't work when I use v1.2.15 with the "ngRoute" dependencies
.module('testNgRoute', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
"use strict";
$routeProvider
.when('/page', {
templateUrl: "page.html"
})
.when('/chapter', {
templateUrl: 'chapter.html'
})
.when('/', {
templateUrl: 'main.html'
});
}]);
</script>
</html>
This is a rookie mistake. The angular-route.js script tag is not close properly. Thanks tasseKATT for spotting it.
False alarm. I've tested it and it is working correctly.

How to initialize controllers manually after bootstrapping angular app using angular.bootstrap?

Found solution to this question.
I have a normal javascript app.I want to embed my angularjs app into it by bootstrapping manually.The problem is that "controllers with that module is not at all initialized"
index.html:
<html>
<head> <title>Including angular app into another</title> </head>
<body>
//I have normal javascript app
<div>First App</div>
<div id="secondApp">
<div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"> </div>
</div>
//included all libraries required for the app
<script src="jquery.js"></script>
<script src="angular.js"></script>
//main.js
<script src="scripts.js"></script>
</body>
</html>
scripts.js:
angular.module('sampleApp', []);
// in this way, i have bootstrapped the app
angular.bootstrap(document.getElementById('secondApp'), ['sampleApp']);
angular.module('sampleApp')
.controller('MainCtrl', function($scope, $rootScope, $timeout) {
//i have included the functionality required for my second app
});
But it is not embedding angular app into first app, getting an error "Argument 'MainCtrl' is not a function, got undefined"
I don't understand, where i am doing wrong.
Just bootstrap the whole app in index.html instead of doing this in scripts.js like this
<script type="text/javascript">
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('secondApp'), ['assetWidgetApp']);
});
</script>
Thanks!!!
The order of the statements is wrong. It should be:
angular.module('sampleApp', []);
angular.module('sampleApp')
.controller('MainCtrl', function($scope, $rootScope, $timeout) {
//i have included the functionality required for my second app
});
// in this way, i have bootstrapped the app
angular.bootstrap(document.getElementById('secondApp'), ['sampleApp']);
You need to define the controller before you bootstrap the angular app.

Categories