I'm guessing there must be something obvious I have missed, this is the second angular app I am building and I have never had this issue before..
Seems both of my controllers are receiving this error. I have confirmed that controllers.js gets loaded and console.log(angcomControllers) does return an object. Other than that I am lost.
index.html:
<!doctype html>
<html class="no-js" lang="en" data-ng-app="angcomApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<!--Library/Framework JS-->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!--script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js'></script-->
<!--App JS-->
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div ng-view class="view-frame"></div>
</body>
</html>
app.js
'use strict';
var angcomApp = angular.module('angcomApp',[
'ngResource',
'ngRoute',
'angcomControllers',
'angcomServices',
]);
angcomApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/items', {
templateUrl: 'partials/items.html',
controller: 'itemsController'
}).when('/categories', {
templateUrl: 'partials/categories.html',
controller: 'categoriesController'
});
}]);
controllers.js
var angcomControllers = angular.module('angcomControllers', ['angcomServices']);
angcomControllers.controller('itemsController' ['$scope', 'Items', function($scope, Items) {
}]);
angcomControllers.controller('categoriesController' ['$scope', function($scope) {
}]);
items.html
<div data-ng-controller="itemsController"></div>
If I need to post any more code please let me know, thanks!
You are missing ,:
angcomControllers.controller('itemsController', ['$scope', 'Items', function($scope, Items){
}]);
Related
I'm getting the next error message when i click on an href:
Unexpected condition on http://127.0.0.1:8887/#/home: Could not find value for language
I'm using ngRoute. This is my index:
<!DOCTYPE html>
<html lang="en" ng-app="pagoApp">
<meta charset="UTF-8">
<title>Paga-Facturas</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/componentes/css/paga-stilos.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<head>
<base href="/">
</head>
<body>
<ul>
<li>Home</li>
<li>List</li>
</ul>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script src="app/xml2json.js"></script>
<script src="app/pagapp.js"></script>
<script src="app/componentes/listado-componente/pago-components.js"></script>
<script src="app/componentes/listado-componente/home-component/home-component.js"></script>
<!--<script src="app/componentes/autorizar-componente/autorizar.js"></script>-->
<script src="app/factory/pago-factories.js"></script>
<script src="app/routes/routes.js">
</body>
</html>
And my routes file:
(function(){
'use strict';
angular
.module('pagoApp')
.config(config);
config.$inject = ["$routeProvider", "$locationProvider"];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
template: '<home></home>',
controller: 'homeCtrl',
})
.when('/list',{
template: '<paga-facturas></paga-facturas>',
controller: 'payCtrl'
})
.otherwise({
redirectTo: '/home',
});
$locationProvider.html5Mode(false);
}
})();
When i click on Home or List, shows the metioned message, and redirect me to my Index of current directory. Anyone knows why i'm getting this error message?
My problem is with template Url in angularjs.
So when i put this code in my editor and run it it works perfectly:
HTML:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-view></div>
</body>
</html>
Js:
var app = angular.module('app', [])
app.config(function($routeProvider){
$routeProvider.when('/', {
template: 'page',
})
.when('/helloUser', {
template: "ds"
})
.otherwise({
redirectTo: '/'
})
})
That worked fine but as soon as i try to put a templateUrl It goes of here is my example code for that:
index.html
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-view></div>
</body>
</html>
page.html:
Hello World
main.js:
var app = angular.module('app', [])
app.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'page.html'
})
.when('/helloUser', {
template: "ds"
})
.otherwise({
redirectTo: '/'
})
})
EDIT:
1
down vote
accept
You must inject the ngRoute module:
var app = angular.module('app', ['ngRoute'])
Not work:
You must inject the ngRoute module:
<script src="angular-route.js">
var app = angular.module('app', ['ngRoute'])
I'm trying to separate my existing code to different files. I declared ng-app in a js file same as below:
define(['routes-admin', 'services/dependencyResolverFor'], function (routes, dependencyResolverFor) {
var app = angular.module('app', ['ngRoute', 'formly', 'xeditable', 'toaster', 'ngAnimate', 'ui.bootstrap']);
app.config([
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
'$httpProvider',
function ($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
$httpProvider.interceptors.push('middleware');
])
return app;
});
and html code is like this:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<title>title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<link href="css/style-blue1.css" rel="stylesheet" id="style_color"/>
<link href="css/jstree-themes/default/style.min.css" rel="stylesheet">
<link href="lib/toaster/toaster.css" rel="stylesheet">
<script type="text/javascript" src="lib/intro.js"></script>
</head>
<body ng-app="app">
<div id="navbar">
</div>
<div id="container">
<button class="btn" ng-click="functions()">funvtions</button>
</div>
<script type="text/javascript" src="lib/require.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="app/factories/MainViewFactory.js"></script>
<script type="text/javascript" src="app/controllers/MainViewController.js"></script>
<script type="text/javascript" src="lib/jstree.min.js"></script>
</body>
</html>
in the scripts segment I included app.js which is the js file above. but after running the code , it makes error : failed to instantiate app.
help me in this
That's classic issue when dependencies aren't fulfilled
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>
you load angular route after app so the dependency injection fails
although you should load jQuery before angular, then angular.element will use jQuery selectors
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?