The above error i am getting when i run angularjs route simple application.
I made separate folder for partial template. only three files are there that contains simple headings.
below code for route.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular Js Route Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/external/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/route.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<script src="js/route.js" type="text/javascript"></script>
</head>
<body>
<div class="outerWraper">
<div class="header">
<h2>Website Header</h2>
</div>
<div class="mainContainer">
<div class="leftContainer">
<ul class="leftMenuBar">
<li>Home</li>
<li>Courses</li>
<li>Students</li>
</ul>
</div>
<div class="rightContainer">
<div class="eachContentDiv">
<ng-view> </ng-view>
</div>
</div>
</div>
<div class="footerWraper">
<h5>Website footer</h5>
</div>
</div>
</body>
Correspondence js file.
var myApp = angular
.module('myApp', ["ngRoute"])
.config(function ($routeProvider){
$routeProvider
.when("/home", {
templateUrl: "partial_route_templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "partial_route_templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "partial_route_templates/student.html",
controller: "studentController"
})
.controller('homeController', function ($scope){
$scope.message = "Home Page";
})
.controller('coursesController', function ($scope){
$scope.message = "courses Page";
})
.controller('studentController', function ($scope){
$scope.message = "student Page";
})
});
Your route.js file is bonkered. I'll provide the corrected code, but if you had researched the error at all, you would have seen the error is pretty clear - $routeProvider has no function controller. You're chaining your controller definitions to $routeProvider and not the angular object.
var myApp = angular
.module('myApp', ["ngRoute"])
.config(function ($routeProvider){
$routeProvider
.when("/home", {
templateUrl: "partial_route_templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "partial_route_templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "partial_route_templates/student.html",
controller: "studentController"
});
})
.controller('homeController', function ($scope){
$scope.message = "Home Page";
})
.controller('coursesController', function ($scope){
$scope.message = "courses Page";
})
.controller('studentController', function ($scope){
$scope.message = "student Page";
});
Related
I have constructed the following routes in angular.
ROUTES
var app = angular.module("app",['ngRoute']);
app.config([
'$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/items/', {
templateUrl: '/app/items/index.html',
controller: 'ItemsController'
})
.when('/', {
templateUrl: '/app/home/index.html',
controller: 'HomeController'
})
}
]);
Each route has its own template and a controller.
TEMPLATES
items/index.html
<h2>Items</h2>
<div ng-repeat ="item in items">
{{item}}
</div>
home/index.html
<h2>Home</h2>
<p>{{message}}</p>
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Configuration and Routing</title>
<link rel = "stylesheet" href ="bootstrap.min.css">
<base href="/" />
</head>
<body>
<div class ="container">
<h1>Configuration and Routing</h1>
<div class = "navbar">
<ul class ="nav navbar-nav">
<li>Home</li>
<li>Items</li>
</ul>
</div>
<div ng-view>
<h4>{{ message }}</h4>
</div>
</div>
<script src = "angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src ="./app/app.js"></script>
</body >
</html>
CONTROLLERS
ItemsController
app.controller('ItemsController',[
'$scope',
function($scope) {
$scope.items = ['First','Second','Third']
}
])
HomeController
app.controller('HomeController', [
'$scope',
function($scope) {
$scope.message = 'Welcome!';
}
]);
The problem i have is the browser shows only the partial templates but not the data(i.e 'message' and 'items') from the controllers which it is supposed to show under the div with ng-view attribute.I also get the following errors from the browser "Argument 'HomeController' and ItemsController is not a function got undefined".
How can i resolve this ?
i am trying to code this and just Jump form 1 page to another page using routes but doesn't why its not working i search and tricks a lot but still failed please any one?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Angular Js</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controller.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
----------
Controler.js
var myRoute=angular.module('myApp',['ngRoute']);
myRoute.config(function($routeProvider){
$routeProvider
.when('/',{
template:'Welcome to Home'
})
.when('/NewPage',{
template:'This Is New Page Task'
})
otherwise('/',{
redirectTo:'/'
});
});
The order of references should be,
<script type="text/javascript" src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "route/one"
})
.when("/one", {
templateUrl: "route/one"
});
});
templateUrl is the place where you define your view is...In here my view(one.cshtml) is in route folder. Try the following example. Its working example.
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
</body>
<script>
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/AddNewOrder', {
templateUrl: '/viewStudents.html',
controller: 'AddOrderController'
})
.when('/ShowOrders', {
templateUrl: '/Home.html',
controller: 'ShowOrdersController'
})
.otherwise({ redirectTo: '/viewStudents' });
}]);
sampleApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function ($scope) {
$scope.message = 'This is Show orders screen';
});
</script>
I am trying to do routing in angular js and Server is running fine. But angular routing is not working properly, only main.html page is coming in ng-view, second.html is not coming. when clicked on the first and second in html same mainController is working not the secondController.
HTML
<!Doctype html>
<html ng-app="myApp">
<meta charset=utf-8" />
<head>
<script src="http://code.angularjs.org/snapshot/angular.min.js"></script>
<script src="http://code.angularjs.org/snapshot/angular-route.min.js">
</script>
<script type="text/javascript"src="app.js"></script>
<body>
<header>
<li><i></i>first</li>
<li><i></i>Second</li>
</header>
<div class = "container">
<div ng-view>
</div>
</body>
main.html
<h1> this is main </h1>
second.html
<h1> this is second </h1>
app.js
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'pages/main.html',
controller: 'mainController',
})
.when('/second',{
templateUrl: 'pages/second.html',
controller: 'secondController',
})
});
myApp.controller('mainController',
['$scope','$log','$location',function($scope,$log,$location){
$log.info($location.path());
console.log("first");
}]);
myApp.controller('secondController',
['$scope','$log','$location',function($scope,$log,$location){
$log.info($location.path());
console.log("second");
}]);
Problem is your scripts, they are not working use the one from googleapis.
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
template: '<h1>Main Page</h1>',
controller: 'mainController',
})
.when('/second', {
template: '<h1>{{ test }}</h1>',
controller: 'secondController',
})
});
myApp.controller('mainController',
['$scope', '$log', '$location', function ($scope, $log, $location) {
$log.info($location.path());
console.log("first");
}])
.controller('secondController', ['$scope', function ($scope) {
$scope.test = 'Testing angular routes';
}]);
<script src="https://code.angularjs.org/1.6.4/angular.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-route.min.js"></script>
<body ng-app="myApp">
<header>
<li><i></i>first</li>
<li><i></i>Second</li>
</header>
<div class="container">
<div ng-view>
</div>
</div>
</body>
I learning angular and I have problem. When I put script directly to code it works but when I am move js controllers to controllers.js it nothing to show. here is my code:
INDEX.html
<!DOCTYPE html>
<html ng-app="pivoApp">
<head>
<title>Pivovara Medvedgrad Kupci</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="js/libs/angular-cookies.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<h1>Početna</h1>
<nav>
<ul>
<li>Početak</li>
<li>Registracija</li>
</ul>
</nav>
<div ng-view>
</div>
</body>
templates/registracija.html
<div>
<h2>Registracija</h2>
<form >
Ime:<input type="text" ng-model="ime"/><br/>
Prezime:<input type="text" ng-model="prezime"/><br/>
Korisničko ime:<input type="text" ng-model="username"/><br/>
<input type="button" value="submit" ng-click="insertdata()"/></br>
</form>
templates/main.html
<div>{{message}}</div>
Controllers.js
'use strict';
// Controllers
var pivoAppControllers = angular.module('pivoAppControllers', []);
pivoAppControllers.controller('MainCtrl', ['$scope', '$location', '$http',
function MainCtrl($scope, $location, $http) {
$scope.message = "Dobro došli u sustav za kontrolu skladišta u pivovari Medvedgrad.";
}])
pivoAppControllers.controller('regCtrl', function($scope,$http){
$scope.insertdata = function(){
$http.post("insert.php", {'ime':$scope.ime, 'prezime':$scope.prezime, 'username':$scope.username })
.success(function(data,status,headers,config){
console.log("Podaci uspiješno spremljeni");
alert("Podaci za novog korisnika su uspiješno spremljeni. Novi korisnik se sada može prijaviti u aplikaciju sa navedenim podacima.");
});
}
});
app.js
'use strict';
// App Module
var pivoApp = angular.module('pivoApp', [
'ngRoute',
'pivoAppControllers'
]);
pivoApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
})
when('/registracija', {
templateUrl: 'templates/registracija.html',
controller: 'regCtrl'
})
;
$locationProvider.html5Mode(false).hashPrefix('!');
}
]);
http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=pivoApp&p1=ReferenceError%3A%20when%20is%20not%20defined%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fapp%2Fjs%2Fapp.js%3A17%3A2%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A41%3A376)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A321)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A445%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A222)%0A%20%20%20%20at%20db%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A43%3A246)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A20%3A359)%0A%20%20%20%20at%20Bc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A21%3A163)%0A%20%20%20%20at%20ge%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A19%3A484
You missed a period before one of your whens change your app.js to:
'use strict';
// App Module
var pivoApp = angular.module('pivoApp', [
'ngRoute',
'pivoAppControllers'
]);
pivoApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'MainCtrl'
})
.when('templates/registracija', {
templateUrl: 'registracija.html',
controller: 'regCtrl'
})
;
and it should work.
plunkr:https://plnkr.co/edit/6lUYQdVVClZVsW2wQ1SA?p=preview
Here's the main index:
I have two .php files which needs to be viewed in template.(ng-view)
mainFrame.php
<!DOCTYPE html>
<html lang="en-US" ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link href="../css/materialize.min.css" rel="stylesheet">
<link href="css/blogmain.css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700italic,900|Lato|Tangerine|Montserrat|Robot
o+Condensed:400,300italic,700italic' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="navbar-fixed">
<nav style="height: 65px">
<div class="nav-wrapper">
<a href="#" class="brand-logo center" style="font-family:'Montserrat',serif;">
Welcome To </a>
<ul id="slide-out" class="side-nav">
<li class="waves-effect wifull"><a href="#/create" id="changeDiv">Create a
Post</a>
</li>
<li class="waves-effect wifull"><a href="#/posts" id="changeDiv1">View
Posts</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse show-on-large show-on-medium-and-down"><i
class="mdi-navigation-menu"></i></a>
</div>
</nav>
</div>
<div ng-view></div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/angular_min.js"></script>
<script src="../js/angular_route.min.js"></script>
<script src="js/appRoute.js"></script>
<script src="../js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('select').material_select();
});
$('.button-collapse').sideNav({
menuWidth: 300,
edge: 'left',
closeOnClick: true
}
);
</script>
</body>
</html>
.js file for routing.
appRoute.js
(function () {
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider)
{
$routeProvider
.when('/create', {
templateUrl: '../create/create.php',
controller: 'CreateController'
})
.when('/posts', {
templateUrl: '../viewPost/view_post.php',
controller: 'ViewPostController'
}
)
.otherwise({
redirectTo: '/create'
})
});
app.controller('CreateController', function ($scope) {
});
app.controller('ViewPostController', function ($scope) {
});
}).();
I don't know what's the problem but nothing is being shown in ng-view.
Thanks.
Second variant of code :) Only put normal HTML templates
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider',
function($location, $routeProvider) {
$routeProvider
.when('/create', {
templateUrl: '../create/create.php',
controller: 'CreateController'
})
.when('/posts', {
templateUrl: '../viewPost/view_post.php',
controller: 'ViewPostController'
}
)
.otherwise({
redirectTo: '/create'
})
}]);
app.controller('CreateController', function ($scope) {
});
app.controller('ViewPostController', function ($scope) {
});
Your last line in appRoute.js is wrong.
}).();
Just remove the . (dot)
})();
For first, it's bad idea to use JQuery and Angular inside one JS App.
Second, what .(); in the end of code in appRoute.js ?
Third, do you have code with call in appRoute.js (function () { ?
So try this code for appRoute.js
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider)
{
$routeProvider
.when('/create', {
templateUrl: '../create/create.php',
controller: 'CreateController'
})
.when('/posts', {
templateUrl: '../viewPost/view_post.php',
controller: 'ViewPostController'
}
)
.otherwise({
redirectTo: '/create'
})
});
app.controller('CreateController', function ($scope) {
});
app.controller('ViewPostController', function ($scope) {
});