I'm writing an SPA app in Angular for the first time but have come across a problem.
My JavaScript to create the route looks like this:
$(function() {
angular.module("myApp", ["ngRoute"])
.config(function($routeProvider) {
$routeProvider.otherwise({
templateUrl: "/angular/components/booking-system/booking-system-template.html"
});
});
});
and my 'master page' (what's the correct terminology?) looks like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My App</title>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/angular/scripts/route-config.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/bootstrap-select.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
<ng-view/>
</div>
</body>
</html>
I'm getting the following error:
Failed to instantiate module myApp due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.3.13/$injector/nomod?p0=ibo...
at Error (native)
at http://localhost:4685/Scripts/angular.min.js:6:417
at http://localhost:4685/Scripts/angular.min.js:21:412
at a (http://localhost:4685/Scripts/angular.min.js:21:53)
at http://localhost:4685/Scripts/angular.min.js:21:296
at http://localhost:4685/Scripts/angular.min.js:35:116
at s (http://localhost:4685/Scripts/angular.min.js:7:302)
at g (http://localhost:4685/Scripts/angular.min.js:34:399)
at ab (http://localhost:4685/Scripts/angular.min.js:38:135)
at d (http://localhost:4685/Scripts/angular.min.js:17:381
What am I doing wrong? Please help!
M
seems like your having problem with the self executing block because of the $ sign change the code like below and try,
(function(){
angular.module("myApp", ["ngRoute"])
.config(function($routeProvider) {
$routeProvider.otherwise({
templateUrl: "/angular/components/booking-system/booking-system-template.html"
});
});
}());
Related
I'm developing a simple web application using angularJS and I'm running into this issue I cannot resolve. Running my website I get this error in console:
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.
But I'm sure I didn't misspell the module name or forgot to load it. Here's my code:
var App = angular.module('App', ['ngRoute', 'ngMaterial', 'ui-notification', 'ngFileUpload']);
App.run(['$rootScope', '$location', function($rootScope, $location) {
console.log("TEST");
}]);
App.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
// TODO: routing
}]);
App.factory('file-uploader', ['Upload', function(Upload) {
var uploadFile = function(file, callback) {
var uploader;
uploader = Upload.upload({
url: 'SERVER URL' + '/upload-file',
data: {
image: file
}
});
uploader.then(function(fileData) {
return callback(null, fileData);
});
uploader.catch(function(error) {
return callback(error, null);
});
};
return uploadFile;
}]);
This is my index.html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta name="description" content="">
<meta name="author" content="AUTHOR">
<title>PROJECT NAME | Login</title>
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
<link rel="stylesheet" href="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.css">
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body ng-class="location" ng-cloak>
<div ng-view></div>
<script defer src="/bower_components/angular/angular.js"></script>
<script defer src="/bower_components/angular-route/angular-route.js"></script>
<script defer src="/bower_components/angular-aria/angular-aria.js"></script>
<script defer src="/bower_components/angular-animate/angular-animate.js"></script>
<script defer src="/bower_components/angular-messages/angular-messages.js"></script>
<script defer src="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.js"></script>
<script defer src="/bower_components/angular-material/angular-material.js"></script>
<script defer src="/bower_components/jquery/dist/jquery.js"></script>
</body>
</html>
And I've installed all the packages with bower...
Can someone please tell me where is the problem and how can I solve it?
It looks like you've forgotten to add your own script, based on the HTML you provided. I only see bower_components stuff being included
I have this index.html page:
<html>
<head ng-app="myApp">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App/title>
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="mainController">
index2
<div ng-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
And this is my app.js script:
'use strict';
var myApp = angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/index2', {
templateUrl: 'views/index2.html'
})
.otherwise({redirectTo: '/views/index2.html'});
});
myApp.controller('mainController', function ($scope) {
});
And my views/index2.html is contains only single 123 element.
When I'm clicking link on my index.html, nothing happens, no routing.
What I'm doung wrong?
upd: I run it from IntelliJ IDEA so it's nothing about webserver is missing ,I think.
You have ng-app directive applied to your head tag:
<head ng-app="myApp">
This means that ng-app will apply to head tag only. Instead you need to move it to your html tag:
<html ng-app="myApp">
I am getting the following error in my angular application: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined. My JS and HTML are below. This is actually a part of an ionic/cordova project, but here is a simplified jsfiddle in which I encounter the same problem.
My JS:
var app = angular.module('TourneyTime', ['ionic']);
app.controller = ('HomeController', function($scope) {
$scope.players = "testing";
});
And here is my HTML:
<html ng-app="TourneyTime">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World!</title>
<link href="bower_components/ionic/lib/css/ionic.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="bower_components/ionic/lib/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="HomeController">
<div class="app">
<h1>Apache Cordova</h1>
<h1>{{players}}</h1>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="bower_components/jquery/dist/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
What is causing this error? I was planning on using $stateProvider and $urlRouterProvider but tried this simple example with an in-line ng-controller attribute first and encountered this error. I think I'm using the correct syntax but please correct me if I am wrong.
Thank you very much for your time. Let me know if you need any additional information or if I am being unclear.
controller() is itself a function to be called, not a property to be assigned as you're doing.
Try this instead:
var app = angular.module('TourneyTime', ['ionic']);
app.controller('HomeController', function($scope) {
$scope.players = "testing";
});
Update your code to
app.controller('HomeController', function($scope) {
$scope.players = "testing";
});
Correct code should be:
var app = angular.module('TourneyTime', ['ionic']);
app.controller('HomeController', function($scope){
//code
});
Working Fiddle
I have theses codes:
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="pizzasApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="configure.js"></script>
<title>New Web Project</title>
</head>
<body>
<div ng-view></div>
</body>
</html>
pizza-list.html:
<div ng-repeat="pizza in pizzas">
{{pizza.name}}
</div>
app.js:
(function(){
var pizzasApp = angular.module('pizzasApp',['ngRoute','app']);
pizzasApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/pizzas',{
templateUrl: 'pizza-list.html',
controller: 'PizzasController'
}).
otherwise({
redirecTo: '/pizzas'
});
}]);
})();
configure.js:
(function(){
var app = angular.module('app',[]);
app.controller('PizzasController',['$scope','$http',function($scope,$http){
$http.get('http://162.250.78.47/api/pizzas').success(function(data){
$scope.pizzas = data;
});
}]);
})();
The problem is that I can't get the datas from json file. I know that the problem isn't the json file because I can get the datas with other way but without angular-route. But I'm interested in that.
This works: http://plnkr.co/edit/AsAPhINnDmBToTRFmgZf?p=preview
It looks like .otherwise is not doing its job when there is just a '/'. I hacked around it with:
$routeProvider.when('/pizzas',{
templateUrl: 'pizza-list.html',
controller: 'PizzasController'
}).when('/',{
redirectTo: '/pizzas'
}).otherwise({
redirecTo: '/pizzas'
});
Edit: I found the actual error, there were a typo in redirectTo. It was spelled redirecTo.
I'm getting into Angular JS, and am having a bit of a an issue with routes not displaying. Here's the index file:
<!doctype html>
<html lang="en" ng-app="backupApp">
<head>
<meta charset="UTF-8">
<base href="some/subdiretory/">
<script src="//code.angularjs.org/1.2.10/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-resource.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-route.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js">
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.4.1/css/ionicons.min.css">
</head>
<body ng-app="backupApp">
<div ng-view class="view-frame">
</div>
</body>
</html>
And here's my app.js. In one file, as I was debugging:
var backupApp = angular.module('backupApp', [
'ngRoute',
'backupControllers'
]);
backupApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {
controller: 'IndexCtrl'
});
}
]);
backupApp.controller('IndexCtrl', ['$location', '$window',
function($location, $window) {
console.log('hi');
debugger;
if ($window.sessionStorage.loggedin) {
$location.path('/backups');
} else {
$location.path('/login');
}
}
]);
The issue is, no redirection occurs. Not errors are throw. The console.log never displays. I can't figure out what's wrong. Any ideas?