AngularJS ngRoute is not working - javascript

I have forur files:
angularjs.js
scripts.js
ngroute.js
index.html
Now, I hav configured the following route:
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when("/author/add", {
controller : "AuthorController",
templateUrl : "view2.html"
})
.when("/author/show", {
controller : "AuthorController",
templateUrl : "view1.html"
})
.otherwise("/", redirectTo : "/author/add")
});
And here is my index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="ngroute.js" ></script>
<script type="text/javascript" src="scripts.js" ></script>
</head>
<body data-ng-app="myApp">
<h1>Hello</h1>
<div data-ng-view=""></div>
<div data-ng-controller="AuthorController">
<ul data-ng-repeat="single in authors">
Author {{ single.author }} has written {{ author.book }}
</ul>
</div>
Add New Author
</body>
</html>
But when I click on author/add href link, it does not load the view. Even the above routeConfig code cause the rest of js script to stop working. There is a problem in the block, but I can't figure out what it is!

You have a syntax error in the otherwise part. Change your route config to:
myApp.config(function($routeProvider){
$routeProvider
.when("/author/add", {
controller : "AuthorController",
templateUrl : "view2.html"
})
.when("/author/show", {
controller : "AuthorController",
templateUrl : "view1.html"
})
.otherwise({redirectTo : "/author/add"})
});

Related

load the content of different html pages in the same page

When user selects the link, i want to load the content of other html inside the same page as per user slection.
The links provided are inside a controller(myController). How to load the red.html and green.html based on the
user selection. The below js code works if the links are not inside the ng-controller.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp">
<div ng-controller="myController">
Red
Green
<div ng-view></div>
</div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
})
.when("/blue", {
templateUrl : "blue.html"
});
});
</script>
</body>
</html>
PS: I want the links to be inside ng-controller="myController" and based on the user selection i want to load the html page in the same page.
If i remove ng-controller from div, it is loading the content but i want the links to be inside the controller as shown in the above code.
Problem was you didn't implement your controller as below.
//DEFINE THE CONTROLLER
////////////////////////////////
app.controller("myController", function(){
});
Look at the following example and it's working perfectly.
Also I modified templateUrl to template just for demonstrate purposes.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp">
<div ng-controller="myController">
Red
Green
<div ng-view></div>
</div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
//DEFINE THE CONTROLLER
////////////////////////////////
app.controller("myController", function() {
});
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: "<h1>Home</h1>"
})
.when("/red", {
template: "<h1>Red</h1>"
})
.when("/green", {
template: "<h1>Green</h1>"
})
.when("/blue", {
template: "<h1>Blue</h1>"
});
});
</script>
</body>
</html>

How create routes in AngularJS + JavaScript?

I'm creating a website and I'm using JavaScript + AngularJS, presently I create the routes for the application, but it always returns 404 not found on the server, I've tried several examples of the internet but none of them worked, here's an example of my code, remembering that The html pages are inside the WebContent:
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index <br> home
</div>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/index", {
template: "/index.html"
})
.otherwise({
redirectTo: '/home.html'
});
});
</script>
</body>
</html>
you forgot the ng-view directive.
also,
the href need to be with a hash prefix - or using the Link directive.
the redirectTo key need to provide a view [name/address] & not a
template
if you want to use template files & not inline code use the templateUrl key
you can see an example of your code here: http://codepen.io/AceDesigns/pen/ZLXLKa
<html ng-app="angularRoutingApp">
<head>
<title>Home</title>
<meta charset="utf-8">
</head>
<body>
<div>
index<br>
home
</div>
<div class="">
<ng-view></ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.js"></script>
<script>
var angularRoutingApp = angular.module('angularRoutingApp', ['ngRoute']);
angularRoutingApp.config(function($routeProvider){
$routeProvider
.when("/index", {template:"<div>INDEX VIEW</div>"})
.when("/home", {template:"<div>HOME VIEW</div>"})
.when("/tempFile", {templateUrl: "views/temp_file.html"})
.otherwise({redirectTo: '/home'});
});
</script>
</body>
</html>

using ngRoute breaks any controller-driven page

I have an application that uses a Router to load pages across a shared template, and other pages that are organized by Controllers, Services, and templates that run within the context of those controllers. It's a simple process to get the various entries of the Controllers and application to run within the same context, but when I have a set of ngRoute defined rules in place, the router stops working.
The routes I have in place are set in js/core/app.js and look like this:
var app = angular.module('ApplicationSystem', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'js/login/templates/login.html',
controller: 'LoginController'
})
.when('/application', {
templateUrl: 'js/application/templates/application.html',
controller: 'ApplicationController'
})
.otherwise({
redirectTo: '/login'
});
}
]);
And as an example, the Login application itself does not load. Only a blank page loads. The Actual application in reference is loaded via an ng-controller directive (ng-app is used in the parent template).
<div class="container" ng-controller="LoginController">
<h2>Login</h2>
<!-- Contents -->
</div>
The parent template (index.html by reference)
<!doctype html>
<html>
<head>
<title>Application</title>
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="lib/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="lib/angular-ui-grid/ui-grid.min.js"></script>
<script type="text/javascript" src="lib/ngstorage/ngStorage.min.js"></script>
<script type="text/javascript" src="lib/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="lib/spin.js/spin.min.js"></script>
<script type="text/javascript" src="js/core/app.js"></script>
<script type="text/javascript" src="js/login/LoginController.js"></script>
</head>
<body>
<div class="masterwrapper" ng-app="ApplicationSystem">
<div ng-view></div>
</div>
</body>
</html>
And the aforementioned controller
var app = angular.module('ApplicationSystem', []);
app.controller('LoginController', function ($scope, $cookies, $location, $ngStorage) {
console.log("Init LoginController");
$scope.LogIn = function (username, password) {
//Login service and factory calls here
};
});
I'm not really clear on what the culprit could be here. If I can get the template to render again, that would at least get me back on track. Any suggestions?

angular js: Not able to pass value from controller to html of an included page

I have a header which remains common for all the pages. So, I included it in my index page like this.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
header.html
<ul>
<li>{{vm.myName}}"></li>
</ul>
My app.js file looks like this.
( function () {
angular.module('myApp', [
'ngRoute',
'myApp.header',
'myApp.home',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/home'
});
}]);
})();
I'm not including home controller or view as they have less importance here now. What I'm trying to do is, to pass a value from headerController.js to it's view header.html
As you can see, there is only one variable in my header.html
On the other side, headerController.js communicates with a backend service and fetches this result. And, I'm sure data is being returned by the service, I can see it in console and it looks like this:
{"myName":"Amelia Earheart"}
and here is my headerController.js
(function() {
angular
.module('myApp.header', [])
.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getName:function() {
return $http.get(baseUrl + 'getName');
}
};
})
.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getName().success(function(data) {
vm.myName = data.myName;
});
});
})();
Can anyone tell why I am not getting the value in html view?
You should link your view with your controller.
Actually, your CommonController is not referenced anywhere. Try adding a ng-controller attribute to the div.header :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-controller="CommonController" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
And also you need to bind the value to the $scope (which is your model) rather to this. Your controller should look like this :
.controller('CommonController', function($scope, $routeParams, myCommonService) {
myCommonService.getName().success(function(data) {
$scope.myName = data.myName;
});
});
If you want to use "vm" in your header's view, you can change the ng-controller to ng-controller="CommonController as vm". This should do the trick.
If you don't do this, you'll have to update your header.html to :
<ul>
<li>{{myName}}</li>
</ul>

angularjs - ngRoute not working properly

ngRoute was previously working fine and is stopped working now ater added few files and controllers.
In The browser I get URL as http://localhost/#browsefp instead of http://localhost/#/browsefp
below is my code, please help. Learning AngularJS and keep getting weird issues. No errors seen in JS console.
app.js
var app = angular.module('DevStreamApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl : 'views/main.html', controller : 'mainController' })
.when('/addnew', {templateUrl : 'views/addnew.html', controller : 'homeController', css : 'css/screen.css'})
.when('/addnewfp', {templateUrl : 'views/addnewfeeprogram.html', controller : 'homeController', css : 'css/screen.css'})
.when('/addnewcm', {templateUrl : 'views/addnewcustomermapping.html', controller : 'aboutController', css : 'css/screen.css'})
.when('/browsefp', {templateUrl : 'views/browseprogram.html', controller : 'browseprogramController', css : 'css/screen.css'})
.otherwise({ redirectTo : '/' })
});
index.html
<!doctype html>
<!-- define angular app -->
<html ng-app="DevStreamApp">
<head>
<titleFee </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
#import url("/css/screen.css");
#import url("/js/yui/container.css");
</style>
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<hr noshade/>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
Add new <br/>
Add new Fee Program<br/>
Add new Customer mapping<br/>
Browse Fee Program
<div ng-view></div>
</div>
</body>
<script src="js/app.js"></script>
<script src="js/controllers/mainController.js"></script>
<script src="js/controllers/homeController.js"></script>
<script src="js/controllers/aboutController.js"></script>
<script src="js/controllers/contactController.js"></script>
<script src="js/controllers/browseprogramController.js"></script>
</html>
mainController.js
//create the controller module
angular.module('DevStreamApp').controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come in Main Controller!';
});
Remove the # from the href, as you can see in doc they configure it as follow:
Moby
.when('/Book/:bookId', {
....
});
so in your case it would be:
Add new <br/>
Add new Fee Program<br/>
Add new Customer mapping<br/>
Browse Fee Program
By default, AngularJS will route URLs with a hashtag, but you can remove it with $locationProvider.
You will use the $locationProvider module and set html5Mode to true.
var app = angular.module('DevStreamApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
... your code ...
And in your index.html the link must be
Add new <br/>

Categories