I'm new to Angular.js and can't seem to get ui-router to load. I've gone through a couple google searches now and haven't been able to resolve this error. Right now, I have pared down my code just to ensure that ui-router is working, but I continually get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
index.ejs:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar { border-radius:0; }
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="public/javascripts/test.js"></script>
</head>
<body ng-app="routerApp">
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
test.js:
var routerApp = angular.module("routerApp", ["ui.router"]);
routerApp.config(
["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("views/ui-views/home.html");
$stateProvider
.state("home", {
url: "/home",
templateUrl: "views/ui-views/home.html",
controller: "tmp1Controller"
});
}]);
routerApp.controller("mainCtrl", ["$scope",
function($scope) {
}
]);
Any recommendations as to how to resolve the issue?
The app is not available in the view. It should be routerApp
var app = angular.module("routerApp", ["ui.router"]);
Found the error: express did not like my path to my javascript file. Changing
<script src="public/javascripts/test.js"></script>
to
<script src="../../javascripts/test.js"></script>
seemed to do the trick.
Related
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.
I'm building a simple personal contacts management app using AngularJS. I put all my files inside htdocs/angular-contacts/ folder of my Mac machine.
index.html
<!DOCTYPE html>
<html ng-app='ContactsApp'>
<head>
<title>Contacts</title>
<base href='/'></base>
</head>
<body>
<h1>Contacts</h1>
<div ng-view=""></div>
<script src='/angular-contacts/jquery-2.1.3.min.js'></script>
<script src='/angular-contacts/angular.min.js'></script>
<script src='/angular-contacts/angular-route.min.js'></script>
<script src='/angular-contacts/angular-route.min.js.map'></script>
<script src='/angular-contacts/app.js'></script>
<script src='/angular-contacts/controller.js'></script>
</body>
</html>
app.js
angular.module('ContactsApp', ['ngRoute']);
.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/contacts',{
controller: 'ListController',
templateUrl: 'list.html'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('ContactsApp')
.controller('ListController',function($scope){
$scope.contacts = [];
})
list.html
<p>List views...</p>
Why I go to http://localhost:8888/angular-contacts/contacts, I got 404 Not Found error.
How to fix this problem? How to load that list.html?
Note:
I'm using MAMP (Apache).
AngularJS: v1.3.14
Angular Route: v1.3.14
That's because
$routeProvider
.when('/contacts',{
controller: 'ListController',
templateUrl: 'list.html'
});
expects the http://localhost:8888/contacts location, not the http://localhost:8000/angular-contacts/contats location.
You should add the prefix in your route declaration, or even better, conifgure the virtual host, so you'll be able to use a real domain, rather than the localhost's sub-catalogue.
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']);
I'm getting some variation of the following, for every single Angular module (animate, resource, route, touch etc):
Module 'ngResource' is not available! You either misspelled the module
name or forgot to load it. If registering a module ensure that you
specify the dependencies as the second argument.
I'm relatively new to Angular. I read the docs on the error but I'm not sure how to apply them. Thoughts?
Here is the code where I declare the modules:
angular
.module('juddfeudApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/admin', {
templateUrl: 'views/admin.html',
controller: 'AdminCtrl'
})
.otherwise({
redirectTo: '/'
});
});
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="juddfeudApp">
<!-- all angular resources are concatenated by Gulp in lib.js-->
<script src="build/lib/lib.js" type="text/javascript"></script>
<script src="build/main.js" type="text/javascript"></script>
</body>
</html>
You need to reference them in your html file.
So add <script src="filename.js"></script> for each module/file you want to load.
did you add this <script src="angular-resource.js"> ?
When you get an error like this, it's likely that you aren't successfully loading the Angular module scripts in your HTML file.
Some answers here suggest making sure you've referenced the scripts somewhere in your HTML file.
That is, if you're trying to add multiple Angular modules, you should have several scripts being loaded before your own JS, like this:
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="myMainJsFile.js"></script>
That may fix the problem.
You might also consider checking to make sure your scripts actually exist in the place you are referencing them -- for me, bower had not properly installed them all on the first time around, so they weren't being picked up by gulp-concat -- or ensuring that your task-runner of choice (Gulp/Grunt) is configured properly.
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.