For some reason, routeProvider is not working in my code when I'm clicking on the link. I can't seem to find the error.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: "Order Details"
})
.when("/first", {
templateUrl: "first.html"
})
.when("/second", {
templateUrl: "second.html"
})
.when("/third", {
templateUrl: "third.html"
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
show details
show details
show details
<div ng-view></div>
Here is your fix :
Change href="#/first" to href="#!first"
And add to your angular app configuration the following lines:
.config(function ($locationProvider) {
$locationProvider.hashPrefix('!');
}
Here is the working plunkr for the same : Click Here
Since we are defining templateUrl parameter to which we provide the path of template to load, it is creating a difference. If we would have used template parameter to which we provide direct html code to load, then your code will work perfectly.
Related
I have tried all the methods available on a stack and given on angularjs official documentation, so please don't mark it as a duplicate. I'm creating an E-commerce site so is it good that I use angular 4 or 5 in it. Please help me.
The code I've tried is given.
angular.module('myApp', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
.when('/about', {
templateUrl : 'partials/about.html',
controller : mainController
})
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : mainController
});
$locationProvider.html5Mode(true);
});
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
</html>
check browser support for the html5 history API:
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
I am trying to create an angular application.
When the index.html page is loaded 2 links login and register are displayed.
When either login or register is clicked the entire view is replaced by the corresponding view.
1. Register/Login links should stay at the top and the corresponding view should be displayed below after clicking on them.
2. After successful authentication in login controller, The complete view including the login and register link should be replaced with menu-auth.html view.
I have tried using the below code, but still the 2 links disappear and login/register views appear.
Also after the http Post is fired in login controller, the menu-auth.html is displayed but appropriate css is not displayd, so I am not able to click the menu links.
I guess the menu-auth.html view is not placed in the view of index.html
index.html
<!doctype html>
<html>
<head>
<script src = "js/angular.min.js"></script>
<script src = "js/angular-ui-router.min.js"></script>
<script src = "app/app.js"></script>
<script src = "controller/login.js"></script>
<script src = "controller/register.js"></script>
<script src = "app/config.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body>
<div ng-app="app">
<ui-view>
</ui-view>
</div>
</div>
</body>
</html>
I have two views
menu-unauth.html
<a ui-sref="login" ui-sref-active="active">Login</a>
<a ui-sref="register" ui-sref-active="active">Register</a>
<ui-view="unauth"></ui-view>
menu-auth.html
<a ui-sref=".nentry" ui-sref-active="active">Create Entry</a></br>
<a ui-sref=".ventry" ui-sref-active="active">View entry</a></br>
<a ui-sref=".logout" ui-sref-active="active">Logout</a></br>
<ui-view="auth"></ui-view>
config.js
app.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('unauth', {
url:'',
templateUrl: 'view/menu-unauth.html'
})
.state('unauth.login', {
url:'/login',
templateUrl: 'view/login.html',
controller: 'login'
})
.state('unauth.register', {
url:'/register',
templateUrl: 'view/register.html',
controller:'register'
})
.state('auth', {
url:'/menu',
templateUrl: 'view/menu-auth.html'
})
}]);
app.js
var app = angular.module("app", ['ui.router','ngCookies']);
login.js (Controller)
app.controller('login', function($scope,$http,$cookieStore,$state){
$scope.login=function(){
$scope.credentials={
UserName:$scope.email,
Password:$scope.password
};
$http({
method: 'POST',
url: 'test.com/sess',
data: $scope.credentials
}).then(function(response) {
$state.go('auth');
}
}
});
I made the following changes to (observe the ui-sref value changed to contain . dot)
menu-unauth.html
<a ui-sref=".login" ui-sref-active="active">Login</a>
<a ui-sref=".register" ui-sref-active="active">Register</a>
<ui-view></ui-view>
config.js
app.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('unauth', {
url:'',
templateUrl: 'view/menu-unauth.html'
})
.state('unauth.login', {
url:'/login',
templateUrl: 'view/login.html'
})
.state('unauth.register', {
url:'/register',
templateUrl: 'view/register.html'
})
}]);
index.html
<div ui-view></div>
test.html is loaded on index.html's ui-view
and inside of test.html
<div ui-view="content"></div>
and tried to load another html files but it's not working
here is my ui-router
.state("index", {
url: "",
templateUrl: "views/index.html",
controller : 'MainCtrl',
controllerAs : 'main'
})
.state("test", {
url: "/test",
templateUrl: "views/test.html",
controller : 'testCtrl',
controllerAs : 'test'
})
.state("test.another", {
url : "another/",
views:{
'content':{
templateUrl :'views/another.html'
}
}
})
so basically what I expect is
<div ui-view>
<!-- test.html -->
<div ui-view="test">
<!-- another.html -->
</div>
</div>
I see two problems:
.state("test.another", {
templateUrl: "views/test.html",
views:{
'another#post':{
templateUrl :'views/another.html'
}
}
})
That first templateUrl isn't required; it's only for views, not states.
Also:
'another#post':{
This means you're targeting a view 'another' in 'post.html'. You neither have a view named 'another', nor a template 'post.html'.
I usually see in some sites a vertical navigation menu and these link are applied to a box in the page but not <iframe> tag.
can anyone help.
and thank you
I think you try to telling a loading divs without refresing the page. We call it as Single page application like Gmail. You can done this by several way.
Do this manually by calling ajex and load divs from host. All events handle by separate JS function.
Try frameworks.
*Backend frameworks like struct2 comes with this capability so this method you have to code in backend
*Frontend frameworks like angularjs support route functionality can achive this result. So you have to deal with JS in front end this time.
Example in angular js
var app = angular.module( "myApp", [] );
app.config( function ( $routeProvider ) {
$routeProvider
.when( '/this', { templateUrl: 'this.html' } )
.when( '/that', { templateUrl: 'that.html' } )
.when( '/other', { templateUrl: 'other.html' } )
.otherwise( { redirectTo: '/this' } );
});
app.controller( 'MainCtrl', function ( $scope ) {
});
<script type="text/ng-template" id="this.html">
This Page.
</script>
<script type="text/ng-template" id="that.html">
That Page.
</script>
<script type="text/ng-template" id="other.html">
Other Page.
</script>
<div ng-controller="MainCtrl">
<ul>
<li>This</li>
<li>That</li>
<li>Other</li>
</ul>
<ng-view></ng-view>
</div>
j fiddle code>> http://jsfiddle.net/joshdmiller/NEuJ6/
I was trying to import certain script depending on which URL I'm.
Simple <script> tag in my HTML is:
<html ng-app="myApp">
...
<script type="text/javascript" src="{{srcRoute}}" language="JavaScript"></script>
...
</html>
I was trying to get this after main module "myApp", in a run block:
angular.module('myApp', [])
.config(function($routeProvider) {
$routeProvider.
when('/', {controller: MyController, templateUrl: 'partials/home.html'}).
otherwise({redirectTo: '/'});
})
.run(function($rootScope) {
$rootScope.srcRoute = 'some/route/here.js';
});
but when running this I get something like:
GET myRoute/%7B%7BsrcRoute%7D%7D 404 (Not Found)
What I want to do is add a conditional sentence in the run block to decide which route to use. Is there a way to do this?
Thanks!