I don't know why angular routing didn't work with me. I revised the code 10 times and I couldn't find the solution.
My index page is like -
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts/jquery-1.9.0.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div class="container">
<nav style="background-color:darkslateblue" role="navigation" class="nav navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>add</li>
<li>edit</li>
<li>delete</li>
</ul>
</nav>
<ng-view>
</ng-view>
<h3 style="font-size:small" class="text-center text-info">developed by Mr-Mohammed Elwany</h3>
</div>
</body>
</html>
and Javascript page like
/// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" />
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/add', {
templateUrl: 'Views/add.html',
controller:'addController'
}).
when('/edit', {
templateUrl: 'Views/edit.html',
controller: 'editController'
}).
when('/delete', {
templeteUrl: 'Views/delete.html',
controller: 'deleteController'
}).
when('/home', {
templateUrl: 'Views/home.html',
controller: 'homeController'
}).
otherwise({ redirectTo: '/home' });
}]);
myApp.controller("addController",function ($scope) {
$scope.message = "in Add view Controller";
});
myApp.controller("editController",function ($scope) {
$scope.message = "in edit view Controller";
});
myApp.controller("deleteController",function ($scope) {
$scope.message = "in delete view Controller";
});
myApp.controller("homeController",function ($scope) {
$scope.message = "in home view Controller";
});
I have 4 html pages in "Views" folder their name is "add","edit","delete","home" and they have the same content.
<div class="row jumbotron">
<h2>{{message}}</h2>
</div>
Please I want to know why it didn't work.
Actually your code is correct but Angular applications work properly on client server architecture.
Kindly Run your application using a local server. There is no need for any Tomcat server. You can easily download a Google Chrome Plugin "Web server for Chrome". here- https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.controller()
app.config(function($routeProvider) {
$routeProvider
.when('/abc', {
'template': "This is the ABC page"
})
.when('/Home', {
'template': "This is the home page"
})
.when('/About', {
'template': "This is the About page"
})
.when('/Contact', {
'template': "This is the Contact page"
})
.when('/Service', {
'template': "This is the Service page"
})
})
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Routing App</a>
</div>
<ul class="nav navbar-nav">
<li>Abc</li>
<li>About us</li>
<li>Services</li>
<li>Contact</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div ng-view></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="script.js"></script>
</html>
Related
I am learning how to implement routing in AngularJS. Everything else is working fine but the views are not getting updated when I click on the navigation.
How can I achieve the desired functionality in the application? I want the navigation to take us to the desired pages without refreshing the page and that's quite obvious.
Here is the code.
Index.html
<!DOCTYPE html>
<html ng-app="routingApp">
<head>
<title>AngularJS routing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="routingAppController">
<!-- Header and Navigation -->
<header>
<nav class= "navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing App</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<!-- Main Body where content will be injected -->
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
Script.js
(function(){
'use strict';
var app = angular.module('routingApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'routingAppController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
app.controller('routingAppController', function($scope){
$scope.message = "This will get updated for sure!";
});
app.controller('aboutController', function($scope){
$scope.message = "This is the about page and it looks awesome!";
});
app.controller('contactController', function($scope){
$scope.message = "This is the contact page!";
});
})();
One of the pages
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
I want to use routeProvider in ngRoute in angularjs to view my home.html or delete.html or add.html
app.js
var app = angular.module('MyApp', ['ngRoute']);
MyApp.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
MyApp.controller('AddController', function($scope) {
$scope.message = "In add view"
});
MyApp.controller('DeleteController', function ($scope) {
$scope.message = "In delete view"
});
MyApp.controller('EditController', function ($scope) {
$scope.message = "In edit view"
});
MyApp.controller('HomeController', function ($scope) {
$scope.message = "In home view"
});
index.html
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view>
</div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
When I run my application, and click on any of the links, it gives me this url: http://localhost:51285/html/#!Edit
And in the body is this...
HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.
In the sample that I am following, it doesn't have that error it just changes to the message.
you have some mistake in your code :
in your html:using Add
2.in your app.js:instead of MyApp.config or MyApp.controller use app.config and app.controller.MyApp is name of your app but you must use variable that your app stored on it.
follwing will working:
your html:
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view></div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
your app:
var app = angular.module('MyApp', ['ngRoute']);
app.config([
'$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
app.controller('AddController', function ($scope) {
$scope.message = "In add view";
});
app.controller('DeleteController', function ($scope) {
$scope.message = "In delete view";
});
app.controller('EditController', function ($scope) {
$scope.message = "In edit view";
});
app.controller('HomeController', function ($scope) {
$scope.message = "In home view";
});
I hope it could be ralted with configuration. Please check the link below! Angular force an undesired exclamation mark in url
Here is my code.
home.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<script
src="https://code.jquery.com/jquery-3.0.0.js"
integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
crossorigin="anonymous"></script>
<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>
</head>
<body ng-controller="myCtrl">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Spring Boot Test</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a ng-click="">Home</a></li>
<li>About</li>
<li>Contact </li>
</ul>
</div>
</nav>
<div data-ng-view = ""></div>
</div>
<!-- /.container -->
<script type="text/javascript"
src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
script
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.config(['$locationProvider', '$routeProvider',function config($locationProvider, $routeProvider) {
$routeProvider.
when('/about', {
templateUrl: 'about.html',
controller: 'aboutCtrl'
});
}
]);
app.controller('aboutCtrl',function($scope){
console.log("aknk");
});
app.controller('myCtrl',['$scope','$location','$window', function($scope,$location,$window){
$scope.about = function()
{
console.log("hello");
/*$location.path('about');*/
$window.location.assign('/about');
}
$scope.contact = function()
{
console.log("hello");
$location.path('/contact');
}
}]);
</script>
What i am doing worng? The links on about and contact do not work at all with this code and If I remove $routeProvider code /about call has been sent to the server. Actually what I want is to get the about.html in ng-view div so that I can have common header for all pages.
Your config should look like this.
app.config(function($routeProvider) {
$routeProvider
.when('/about', {
templateUrl: "views/view-queue.html",
caseInsensitiveMatch: true,
})
.otherwise({
templateUrl: "404.html"
})
});
The above code will work.
i'm having this online course on AngularJS, which provides the code in folders, according to the lesson. This one is about routing and single page applications; similar demos and structures work on plunker (like this one ) but not in my machine...I don't understand why, can someone help me out?
EDIT: actually, if I download this demo the thing wont work...
INDEX file:
<html lang="en-us" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
The Module file: 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'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.name = 'Main';
}]);
myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
$scope.num = $routeParams.num || 1;
}]);
Pages one and two (views):
<h1>This is Main.</h1>
<h3>Scope value: {{ name }}</h3>
<h1>This is second.</h1>
<h3>Scope route value (on second page): {{ num }}</h3>
The folder structure. The code is as suggested
Your references for angular and bootstrap are not correct
Angularjs
<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
Bootstrap
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
You need to correct you urls like this
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'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.name = 'Main';
}]);
myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
$scope.num = $routeParams.num || 1;
}]);
<html lang="en-us" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
Also you need to add a page for the view on the following path in project pages/main.html
You need to use your application throught the localhost like this:
Just mount your project on HTTP server.
$> sudo npm -g live-server
$> cd path/to/root/dir/project
$> live-server
EDIT: and eventually, include every time your scripts at bottom of body:
<body>
.....
.....
.....
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
As a part of learning process, I am roaming around angular js routing concepts. For this, I created one inner folder inside app with two sample test html pages ..
When i run the app it should load first page from that folder but it does not not happening .. I am not sure where i have done wrong in this code...
I am getting error like this 'angular.js:4640Uncaught Error: [$injector:modulerr]'
Below is my controller code
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', function($scope,$log) {
}]);
myApp.controller('secondController', ['$scope','$log', function($scope,$log) {
}]);
and html code goes here
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i></i>second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and for main.html
<h1>this is main page</h1>
and for second.html
<h1>this is second page</h1>
Would any one please help on this query,
many thanks in advance..
Things seem to be working fine for me. See the working example below:
(Just change the href of Home link to #/)
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',
function($scope, $log) {}
]);
myApp.controller('secondController', ['$scope', '$log',
function($scope, $log) {}
]);
html,
body,
input,
select,
textarea {
font-size: 1.05em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home
</li>
<li><i></i>second
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
<script id="Pages/main.html" type="text/ng-template">
<h1>this is main page</h1>
</script>
<script id="Pages/second.html" type="text/ng-template">
<h1>this is second page</h1>
</script>
</div>
Edit
Don't directly serve your Angular code using file:/// protocol. It will not be able to make request to load resources. Use any simple lightweight servers, for example:
Python Simple server for Linux based platforms (python -m SimpleHTTPServer)
Mongoose for Windows
replace:
<li><i class="fa fa-home"></i>Home</li>
with
<li><i class="fa fa-home"></i>Home</li>
and it should work fine. i checked.
That error means angular could not find the module you're referring to. is your script able to connect to internet and can you make sure the angular cdn is not blocked by your firewall?
you could try to download the angular-route file and reference in your html and see if it works.