Angular JS routing doesn't work - javascript

The index.html looks like:
<!DOCTYPE html>
<html lang="en" ng-app="HomeApp">
<head>
<link rel="stylesheet" href="css/general_style.css">
<script src="js/angular_core/angular.min.v.1.2.16.js"></script>
<script src="js/angular_core/angular-resource.min.v.1.2.16.js"></script>
<script src="js/angular_core/angular-route.min.v.1.2.16.js"></script>
<script src="js/home_apps.js"></script>
<script src="js/home_controllers.js"></script>
<script src="js/home_services.js"></script>
<title>AngularJS Routing example</title>
</head>
<body>
<div>
<ul>
<li> contact</li>
<li> login </li>
<li> home </li>
</ul>
</div>
<div ng-view></div>
</body>
</html>
The home_apps.js looks like:
var MyHomeApp = angular.module('HomeApp', [
'ngRoute',
'HomeControllers'
]);
MyHomeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'partials/login.html'
}).
when('/contactus', {
templateUrl: 'partials/contactus.html'
}).
when('/home', {
templateUrl: 'partials/home.html',
controller: 'WGHomeLanCtrl'
}).
otherwise({
redirectTo: 'partials/home.html',
controller: 'WGHomeLanCtrl'
});
}]);
Finally, under the /partials folder, there are 3 html files:
login.html:
<div>
<p class="right_margin">
<h1>log in...</h1>
</p>
</div>
contactus.html:
<div>
<p class="right_margin">
<h1>Contactus</h1>
</p>
</div>
home.html:
<div>
<p class="right_margin">
<h1>home</h1>
</p>
</div>
In actual world, when I open the index.html from firefox, the url is something like:
{file path}/index.html#/contactus
however the content from contactus.html is not displayed - the ng-view doesnt work in this case.
I feel like there it would be a tricky place where the error hides in, as I've spent much time on it. Any debug will be greatly appreciated!!!

It working fine
Take a look at this
Working Demo
var MyHomeApp = angular.module('HomeApp', []);
MyHomeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'login.html'
}).
when('/contactus', {
templateUrl: 'contactus.html'
}).
when('/home', {
templateUrl: 'home.html',
controller: 'WGHomeLanCtrl'
}).
otherwise({
redirectTo: 'home.html',
controller: 'WGHomeLanCtrl'
});
}]);
MyHomeApp.controller( 'WGHomeLanCtrl', function ( $scope ) {
});

Here basic example for routing:
var app = angular.module('routeApp',['ui.bootstrap','ngRoute']).
config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'templates/main.php'
}).when('/first',{
templateUrl: 'templates/first.php'
}).when('/second',{
templateUrl: 'templates/second.php'
});
}).controller('routeController',function($scope,$timeout){
//your code
});
Mark up:
<!DOCTYPE html>
<html ng-app='routeApp' class="scope">
<head>
<meta content="text/html;charset=UTF-8"/>
<link href="./css/tether.min.css" type="text/css" rel="stylesheet" />
<link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body ng-controller='routeController' class="scope">
main
first
second
<div ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="./js/tether.min.js">
</script>
<script src="./js/bootstrap.min.js">
</script>
<script src="./js/angular.min.js">
</script>
<script src="./js/ui-bootstrap-tpls-2.5.0.min.js">
</script>
<script src="./js/angular-route.min.js">
</script>
<script src="./js/flat-ui.min.js">
</script>
<script src="./js/main.js">
</script>
</body>
</html>
Explanation:
your routing derives from your angular version,this markup is relevant for
1.6.1 version. Thus,pay attention to '#' sign in your address bar,in 1.6.1
version you will have '#!'.

Related

Angular about.html view not working

i created home.html, about.html,app.js,and index.js. i want to show about.html and home.html views in the index.html page. but when i click on the about it shows the home page. the url changes but nothing changes in the browser window.below is the code for app.js
app.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/about", {
templateUrl: "about.html",
controller: "AboutController"
})
.otherwise({
redirectTo: "/home"
});
});
app.controller("HomeController", function($scope) {
$scope.title = "I'm in home"
});
app.controller("AboutController", function($scope) {
$scope.title = "I'm in about"
});
}
this is the code for the index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div>
<ng-view>
</ng-view>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
this is code for home.html
<div>
{{title}}
</div>
this is code for about.html
<div>
{{title}}
</div>
I remember link format changed from angular 1.6.0.
You may try following link.
<li>About</li>
instead of
<li>About</li>

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.6/$injector/modulerr?p0 Still not working please Check my code

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>

angular route not working properly . first page show other page not switch the view

angularjs route not working properly . first page show other page not switch the view . here is the code
script.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
})
.when("/About", {
templateUrl: "About.html",
})
.when("/contact", {
templateUrl: "contact.html",
});
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome Home</title>
</head>
<body ng-app="myApp">
<p>Main</p>
About
contact
<h3> welcome to the page</h3>
<div ng-view></div>
<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>
<script src="script.js"></script>
</body>
</html>
home.html
<h1>Welcome Home </h1>
About.html
<h1>Welcome About </h1>
contact.html
<h1>Welcome Contact </h1>
Also be careful about dependency injection.
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
})
.when("/About", {
templateUrl: "About.html",
})
.when("/contact", {
templateUrl: "contact.html",
});
$locationProvider.html5Mode(true);
}]);

angular js routing not working in localhost

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']);

Angularjs ng-view not showing data

I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo

Categories