My angular routing is not working (clicking link does not cause route change):
var smu72App = angular.module("smu72App", [
"ngRoute"
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/templates/home.html",
controller: 'smu72Controller'
})
.when("/objects", {
templateUrl: "/templates/objects.html",
controller: 'smu72Controller'
})
.when("/object/:Id", {
templateUrl: '/templates/object.html',
controller: 'smu72Controller'
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
That's main page that hold ng-view (cutted a bit for better reading):
<!DOCTYPE html>
<html ng-app="smu72App">
....
<base href="/">
.....
<body data-spy="scroll" data-target="#navbar" data-offset="0">
...
<div class="collapse navbar-collapse"> //THAT'S SCROLLSPY LINKS (NOT ANGULAR)
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home" aria-hidden="true"></i></li>
<li> УСЛУГИ</li>
<li> OБЪЕКТЫ</li>
<li> OТЗЫВЫ</li>
<li> СЕРТИФИКАТЫ</li>
<li> КОНТАКТЫ</li>
</ul>
</div>
</div>
</div>
<div ng-view></div>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.3/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.3/angular-resource.min.js"></script>
<script src="Scripts/simplbox.min.js"></script>
<script src="http://localhost:25018/Scripts/main.js"></script>
<script src="http://localhost:25018/Scripts/app.js"></script>
<script src="http://localhost:25018/Scripts/smu72Controller.js"></script>
</body>
</html>
Declare your module first
angular.module("smu72App", ["ngRoute"]);
Then initialize config
angular.module("smu72App").config("....ur routes in here");
Are you getting any console errors?
I have noticed one morething that ur anchor tag href doesn't match with the routes in ur config section except ur home page and that is why ur home page is loading fine.
Just an example try ur anchor tag like this <a href="#/about"> or like <a href="/about"> coz i think ur not using hash
and create ur route like below
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl'
});
Related
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
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>
I'm just starting learning the angularjs and I want to use it for creating a ui template. I want to make a static HEADER and FOOTER and the only thing that will be dynamic is the CONTENT. My issue is that my It returns me a blank web page.
Thanks in advance guys.
index.html
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<meta charset="utf-8">
<title>UI-Router</title>
<link rel="stylesheet" href="">
<!-- START LOAD VENDORS -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<!-- END LOAD VENDORS -->
<!-- START LOAD SOURCE CODE -->
<script src="js/app.js"></script>
<!-- END LOAD SOURCE CODE -->
</head>
<body ui-view>
</body>
</html>
app.js
var app = angular.module('app', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
abstract: true,
url: '/index',
templateUrl: 'view/app.html'
})
}])
view/header.html
<ul>
<li>US</li>
<li>626.205.3838</li>
<li>cert#abkrescue.com</li>
<li>Search</li>
</ul>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
view/footer.html
<div>
<span>name here</span>
<span>partner</span>
<span>subscribe</span>
<ul>
<h3>get to know us</h3>
<li>blog</li>
<li>stories</li>
<li>staff</li>
</ul>
<ul>
<h3>connect</h3>
<li>contact</li>
<li>help</li>
<li>request</li>
</ul>
<ul>
<h3>resource</h3>
<li>download</li>
<li>financial</li>
<li>donors</li>
</ul>
<ul>
<h3>get involved</h3>
<li>volunteer</li>
<li>partnership</li>
<li>donate</li>
</ul>
</div>
view/app.html
<div data-ng-include=" 'view/header.html' "></div>
<div data-ng-include=" 'view/footer.html' "></div>
You cannot transition to an abstract state
i've created a working plnkr here: https://plnkr.co/edit/yRazozMjTM99tCKFFmIl?p=preview
$stateProvider
.state('index',{
url: '/',
templateUrl: 'view/app.html'
})
Try using the ui-view element directive. And make sure you are referring the template correctly
<body>
<ui-view></ui-view>
</body>
The correct way to do this is to have separate ui-view directives for your header, content and the footer.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>UI-Router</title>
<link rel="stylesheet" href="">
<!-- START LOAD VENDORS -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-ui-router.min.js"></script>
<!-- END LOAD VENDORS -->
<!-- START LOAD SOURCE CODE -->
<script src="js/app.js"></script>
<!-- END LOAD SOURCE CODE -->
</head>
<body>
<div ui-view="header">
<div ui-view="content">
<div ui-view="footer">
</body>
</html>
Define the template for each ui-view in the state config function and remove the abstract: true option. More on it here: what is the purpose of use abstract state?
app.js
var app = angular.module('app', ['ui.router'])
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index',{
url: '/index',
views: {
'header': {
templateUrl: 'view/header.html'
},
'content': {
templateUrl: 'view/app.html'
},
'footer': {
templateUrl: 'view/footer.html'
}
}
})
}])
Also wrap your header.html code in a div tag.
header.html
<div>
<ul>
<li>US</li>
<li>626.205.3838</li>
<li>cert#abkrescue.com</li>
<li>Search</li>
</ul>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
</div>
Now the header and footer will remain fixed and you can change your content based on states by adding other state like this:
.state('index.two',{
url: '/index/two',
views: {
'content#': {
templateUrl: 'view/two.html'
}
}
})
I am new to angularjs ,i make a sample app with custom directives now i add routing as well but it doesn't working.When i start project nothing is displayed in browser.
here is my index.html:
<html ng-app="myApp">
<head>
<title>Reddit New World News (Task)</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script src="angular/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="myApp.js"></script>
<script src="myAppCtrl.js"></script>
<script src="routes.js"></script>
<script src="headerDirective.js"></script>
<script src="searchDirective.js"></script>
<script src="myDataDirective.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
myAppCtrl:
// TODO: Wrap in anonymous function
(function () {
var myApp = angular.module('myApp', ['ui.router']);
// TODO: min-safe with bracket notation
myApp.controller('myAppCtrl', ['$scope', '$http', function($scope, $http) {
$scope.sortType = '';
$scope.sortReverse = true;
// TODO: Keep lines short - it's easier to read
$http.get("https://www.reddit.com/r/worldnews/new.json")
.success(function (response) {
$scope.stories = response.data.children;
});
}]);
myApp.controller('aboutController',function(){
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
})();
headerDirective.html:
<div class="top-header"></div>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="header">
<h1>Reddit</h1>
</div>
<div class="header-right">
<h2>World's Latest News</h2>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="clearfix"></div>
</div>
routes.js:
angular.module('myAppCtrl')
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index.html');
// See route.webapp.js for allowed routes
$stateProvider
.state('app', {
templateUrl: '/templates/app.html',
controller: 'myAppCtrl',
abstract: true
})
.state('app.home', {
url: '/home',
templateUrl: '/templates/index.html',
controller: 'myAppCtrl'
})
.state('app.about', {
url: '/about',
templateUrl: '/templates/about.html',
controller: 'aboutController'
})
.state('app.contact', {
url: '/contact',
templateUrl: '/templates/contact.html',
controller: 'contcatController'
});
$locationProvider.html5Mode(true);
}
]);
})();
any guide thanks.
First there is a problem with your config block :
myApp.config(...)
not
angular.module('myAppCtrl').config(...);
Else you're redeclaring a new module. That doesn't make sense. You mix up controllers and module, that's two different things.
Then you have to change some things in your HTML file :
If you're using UI-Router it's :
<div ui-view></div>
not like ngRouter :
<div ng-view></div>
Then you're using $locationProvider.html5Mode(true);
So you have to configure your server to emulate paging, see doc.
Finally you have to add the base href of your angular application in the <head> tag like that :
<base href="/">
I am working in angular.js. Using ng-view navigate in body section. If i need to navigate to a new html page. How we can achieve in angular.js. Is there any angular.js directives in angular.js.
Thanks in Advance,
You should go through following things for routing:
Angular ui-route
Angular ngRoute
Angular-UI-Router is more powerful directive than ngRoute. Following code is what i had tried sometimes before. hope it will also help you.
app.js
var app = angular.module('app', ['ui.router']); //Inject `ui.router` directive inside your `app` module
app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
})
.state('about', {
url: '/about',
templateUrl: 'templates/about.html'
})
}]);
index.html
<html>
<head>
<title>Angular Routing</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="Scripts/app.js"></script>
<script src="Scripts/controllers/homeCtrl.js"></script>
</head>
<body ng-app="app">
<div class="container">
<div ng-include="'templates/header.html'"></div>
<div ui-view></div>
<div ng-include="'templates/footer.html'"></div>
</div>
</body>
</html>
templates/header.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">Angular</a>
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a ui-sref="about">About</a></li>
</ul>
</div>
</nav>
templates/footer.html
<p>© SJ</p>
templates/home.html
<h1>Home</h1>
templates/about.html
<h1>About<h1>