Injecting route configuration from module to module - javascript

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.

Related

Template is not rendering data from angular controllers

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 ?

Angular routing is not working properly?

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>

why nothing showing in ng-view?

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

ngRoute not working in Angular?

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) {
});

Why is this AngularJS routing broken when html5mode is enabled?

I would like to use AngularJS routing. I am using AngularJS-seed-master as a start and routing works by default. However, it stopped working after I enabled html5mode. Below is the html code when routing works;
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
Javscript app.js code when routing works;
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider)
{
//configuration for $routeProvider
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}])
Then, I enabled html5mode by adding this to app.js
.config(['$locationProvider', function($locationProvider)
{
$locationProvider.html5Mode(true);
}])
It is at this point that AngularJS routing stops working. What did I do wrong? How can AngularJS routing be made to work after enabling html5Mode?
What you have to do is in "app.js" set the "html5mode" to true:
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/view2'});
}]);
In index.html add under header:
<head>
<base href="/" />
<meta name="fragment" content="!">
</head>
And change the link:
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
</body>
And that's it the main URL:
http://localhost:8000
Will redirect to:
http://localhost:8000/view1
And link will work showing sexy address.

Categories