I am trying to implement page routing in Angular JS but its not working here.
Here is code:
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
debugger;
$routeProvider
.when('/home', {
templateUrl: 'EmployeeHome.aspx',
controller: 'EmpCtrl'
})
.when('/about', {
templateUrl: 'ContactUs.html',
controller: 'EmpCtrl'
})
.when('/contact', {
templateUrl: 'About.html',
controller: 'EmpCtrl'
})
.otherwise({
redirectTo: '/home'
});
});
app.controller('EmpCtrl', function ($scope, $http)
{
$scope.message = "Welcome friends.";
}
Here is my UI page
EmployeeHome.aspx-
<head runat="server">
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<header>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-shield"></i>About Us</li>
<li><i class="fa fa-comment"></i>Contact Us</li>
</ul>
</header>
I think you forgot a '/' in all your href. So something like this should work :
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-shield"></i>About Us</li>
<li><i class="fa fa-comment"></i>Contact Us</li>
Hard to tell without runnable example, I don't remember if it's required now but I pass the '$routeProvider' and function in like this:
angular.module('staffApp').config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'EmployeeHome.aspx',
controller: 'EmpCtrl'
}).
...
Related
I'm learning an example of a single page application using angularjs. Here's the relevant code:
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
// configure the routes
$routeProvider
.when('/', {
// route for the home page
templateUrl: 'pages/home.html',
controller: 'homeController'
})
.when('/about/', {
// route for the about page
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
.when('/contact/', {
// route for the contact page
templateUrl: 'pages/contact.html',
controller: 'contactController'
})
.otherwise({
// when all else fails
templateUrl: 'pages/routeNotFound.html',
controller: 'notFoundController'
});
});
app.controller('homeController', function ($scope) {
$scope.message = 'Welcome to my home page!';
});
app.controller('aboutController', function ($scope) {
$scope.message = 'Find out more about me.';
});
app.controller('contactController', function ($scope) {
$scope.message = 'Contact us!';
});
app.controller('notFoundController', function ($scope) {
$scope.message = 'There seems to be a problem finding the page you wanted';
$scope.attemptedPath = $location.path();
});
</script>
</head>
<body ng-controller="homeController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">My Website</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
routeNotFound.html
<div class="jumbotron text-center">
<h1>This is not good</h1>
<p>{{message}}</p>
<p class="has-error">{{attemptedPath}}</p>
</div>
When I click on Home or About or Contact the page renders correctly. But if I visit any other URL, routeNotFound.html is injected correctly to div[ng-view] but the data is not bound. I get:
This is not good
{{message}}
{{attemptedPath}}
It seems notFoundController is not correctly made available to the view when .otherwise() is called inside route. $scope.message and $scope.attemptedPath is not bound to the view.
You are missing $locationService injection in your notFoundController
app.controller('notFoundController', function ($scope,$location /*<--- location injected here*/) {
$scope.message = 'There seems to be a problem finding the page you wanted';
$scope.attemptedPath = $location.path();
});
Here is a full sample:
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
// configure the routes
$routeProvider
.when('/', {
// route for the home page
template: '<h1>My page home</h1><br />{{message}}',
controller: 'homeController'
})
.when('/about/', {
// route for the about page
template: '<h1>My page about</h1><br />{{message}}',
controller: 'aboutController'
})
.when('/contact/', {
// route for the contact page
template: '<h1>My page contact</h1><br />{{message}}',
controller: 'contactController'
})
.otherwise({
// when all else fails
template: '<h1>Not found page</h1><br />{{message}}',
controller: 'notFoundController'
});
});
app.controller('homeController', function ($scope) {
$scope.message = 'Welcome to my home page!';
});
app.controller('aboutController', function ($scope) {
$scope.message = 'Find out more about me.';
});
app.controller('contactController', function ($scope) {
$scope.message = 'Contact us!';
});
app.controller('notFoundController', function ($scope,$location) {
$scope.message = 'There seems to be a problem finding the page you wanted';
$scope.attemptedPath = $location.path();
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script>
</script>
</head>
<body ng-controller="homeController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">My Website</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
<li><i class="fa fa-comment"></i> Not found</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
This question has been answered before but potentially for an earlier version of Angular. I'm working in Angular 1.6.1. The HTML5 isn't adding the #! to the URL but my partials aren't loading.
HTML:
<head>
...
<base href="localhost/test/angular/Jan102017">
...
<head>
<body>
...
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
...
JavaScript:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$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'
})
$locationProvider.html5Mode(true);
}]);
change all of these when('#/' ... to when('/' ... Since you use html5Mode true
And In angular 1.6 version $locationProvider.hashPrefix('!'); is the default so change it like below
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('');
I am a beginner and I can't find what am I doing wrong here, can someone help me?
Below is the code I use
index.html
index.html
<body ng-app="psJwtApp">
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="register">Register</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/app.config.js"></script>
<!-- endbuild -->
app.config.js (Code for app.config.js)
I use ui.router.
app.config.html
'use strict';
angular.module('psJwtApp', ['ui.router']).config('psJwtApp',
function ($stateProvider) {
$stateProvider
.state('register', {
url: '/regiter',
templateUrl: 'views/register.html'
})
.state('home', {
url: '/ ',
templateUrl: 'views/main.html'
});
});
var myApp = angular.module('psJwtApp', ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
url: "#",
templateUrl: "home.html",
controller: "HomeCtrl"
}).state("register", {
url: "#",
templateUrl: "register.html",
controller: "registerCtrl"
});
});
myApp.controller('HomeCtrl', ['$scope', function($scope) {
}])
myApp.controller('registerCtrl', function($scope, $stateParams) {
})
DEMO
I'm getting up to speed with AngularJS routing and have created this example which works.
However, I understood that if on page "home" I type in a text into the input box, then click on page "about" and then come back to "home", the text would still be in the input box, i.e. would have maintained the state.
Is this not the case, and if not, is there a way to maintain state in forms on pages which the user navigates away from?
home.htm
<div class="jumbotron">
<h1>Home</h1>
<p>{{subtitle}}</p>
</div>
<input ng-model="message"/>
index.htm
<html ng-app="mainApp">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
a:focus {
outline: none;
}
</style>
</head>
<body ng-cloak ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">AngularJS Routing</div>
</div>
<div>
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</div>
</nav>
<div class="col-lg-12">
<div ng-view></div>
</div>
<script>
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.htm',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'pages/about.htm',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: 'pages/contact.htm',
controller: 'contactController'
})
.otherwise({
redirectTo: '/'
});
});
mainApp.controller('mainController', function ($scope) {
$scope.subtitle = 'the home page';
$scope.message = '';
});
mainApp.controller('aboutController', function ($scope) {
$scope.subtitle = 'the about page';
});
mainApp.controller('contactController', function ($scope) {
$scope.subtitle = 'the contact page';
});
</script>
</body>
</html>
Controllers do not maintain state, they are created and destroyed every time you go through the route. You will need to implement a service that you can use to store your data and then have a means to send the data to the service when you want to persist it. Controller have a '$destroy' event that occurs right before the scope is released that you can hook.
mainApp.service('myData', function() {
this.message = '';
})
.controller('mainController', function($scope, myData) {
$scope.message = myData.message;
$scope.$on("$destroy", function() {
myData.message = $scope.message;
});
});
i was implementing NgRoute, but somewhere in angularjs tutorials they introduce ui-route, i watch some video tutorials about this ui-route, i find it cool and more fluent than the mg-route, so i went to ui-route github page where i've downloaded the js file, i have add it in scripts references, and start following there guide, but i haven't successfully get it to work, and without any console errors, when i go to site web it shows just the index.html !!
App.js
var app = angular.module("KhbyraApp", ['ui.router', 'ngCookies']);
app.config(function ($stateProvider, $urlRouteProvider, $httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
$urlRouteProvider.otherwise("/login");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "app/views/login.html",
controller: "LoginController"
})
.state('register', {
url: "/register",
templateUrl: "app/views/register.html",
controller: "RegisterController"
})
.state('articles', {
url: "/articles",
templateUrl: "app/views/articles.html",
controller: "RegisterController"
});
index.html
//<html>...
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="articles">Home</a></li>
<li><a ui-sref="login">Login</a></li>
<li><a ui-sref="register">Register</a></li>
<li ng-if="isAuth" ng-click="LogOut()">LogOut</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div ui-view></div>
//script....
</body>
There is a working (simplified) plunk, showing that this setting is working.
The only (but essential) change is the name of the '$urlRouteProvider' which should be $urlRouterProvider (the router instead of route)
function( $stateProvider , $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");