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) {
});
Related
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'm studying routing in angular and something is going wrong
I have the following file structure:
index.html
<br>script.js
<br>first/first.js (controller) second.html (view)
<br>second/second.js (controller) second.html (view)
index.html
'use strict';
// script.js
angular.module('RoutingApp', [
'ngRoute',
'RoutingApp.first',
'RoutingApp.second',
'RoutingApp.third',
])
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/first'});
}]);
//first.js
'use strict';
angular.module('RoutingApp.first', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/first', {
templateUrl: 'first/first.html',
controller: 'First'
});
}])
.controller('First', [function() {
}]);
//second.js
'use strict';
angular.module('RoutingApp.second', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/second', {
templateUrl: 'second/second.html',
controller: 'second'
});
}])
.controller('second', [function() {
}]);
ul {
list-style-type: none;
}
<html lang="en" ng-app="RoutingApp">
<head>
<title>Routing app</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<ul class="nav flex-column">
<li class="nav-item">Home</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<div ng-view></div>
//...
</body>
</html>
and nothing happens.
What's wrong?
You have an extra comma at
'RoutingApp.third',
That third route probably shouldn't be there either since it's not defined anywhere.
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
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";
});
i trying to use angular js routing method to the web app i am building, bt i was not able to route through the directory, i am getting a 404 error, below is my codes.
<!doctype html>
<html ng-app="AngularStore">
<head>
<link rel="stylesheet" type="text/css" href="src/bootstrap/cerulean.css">
<script type="text/javascript" src="src/jquery/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="src/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="src/angular/angular.min.js"></script>
<script type="text/javascript" src="src/angular/angular-route.js"></script>
<script src="product.js" type="text/javascript"></script>
<script src="store.js" type="text/javascript"></script>
<script src="shoppingCart.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controller.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span10 offset1">
<h1 class="well" >
<a href="default.html">
<img src="img/logo.png" height="60" width="60" alt="logo"/>
</a>
Angular Store
</h1>
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
here is my app.js file
var storeApp = angular.module('AngularStore', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: '/partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: '/partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: '/partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Your code is definitely needs 'ngRoute'
var storeApp = angular.module('AngularStore', ['ngRoute']).
here is a plnkr http://plnkr.co/edit/X9gyEPm6v126kobj0lTa
Other thing you could be doing wrong is providing template paths relative to root
templateUrl: 'partials/store.html',
instead of
templateUrl: '/' + 'partials/store.html',
You should load ngRoute along with your app module declaration.
var storeApp = angular.module('AngularStore', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/store', {
templateUrl: 'partials/store.html',
controller: 'storeController' }).
when('/products/:productSku', {
templateUrl: 'partials/product.html',
controller: 'storeController' }).
when('/cart', {
templateUrl: 'partials/shoppingCart.html',
controller: 'storeController' }).
otherwise({
redirectTo: '/store' });
}]);
Make sure that you load ngRoute along with your app module declaration.
var app = angular.module("app", ['ngRoute']);
It's not enough that you load the script file. For you it should be:
var storeApp = angular.module('AngularStore', ['ngRoute']);