At my angular app after I reload the page I get the empty shell html page not my home page as my expectation even when the url point to the home route http://localhost:8444/home.
Please point out what is wrong with my code ?
or what should i do to fix this behavior ?
the app at server side contain one cshtml page with ng-include tag
<!DOCTYPE html>
<html ng-app="app">
<head>
#Scripts.Render("~/bundles/scripts")
<base href="/">
<script type="text/javascript">
(function () {
'use strict';
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$locationProvider', configurRoutes]);
function configurRoutes($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state(
'home', {
url: '/home',
template: '<div>At Home Page</div>'
});
}
})();
</script>
</head>
<body>
<div>
<div ng-include="'/app/layout/shell.html'"></div>
</div>
</body>
</html>
shell.html
<div>
In the shell
<hr/>
<a ui-sref="home"> home </a>
<div ui-view></div>
here is the problem at first load I get the empty shell page, Notice that url pointing to home page
after click on go home it is working as expected
Update
after I moved the content of the shell.html to the cshtml it worked as expected but without ng-include
Try adding an otherwise('home') clause to your stateProvider
Related
I'm trying to use the ngRoute in my angularJS page, but I'm not able to load my content within ng-view.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/index.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/app/index.js"></script>
</head>
<body ng-app="app">
<header>
<a ng-href="#/add-new">Add new</a>
</header>
<div ng-view></div>
<footer>
#Copyright 2017
</footer>
</body>
</html>
index.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/add-new', {
template: 'Some content'
})
}]);
Not sure what I'm missing here.
If I add otherwise condition on $routeProvider, it gets loaded. Please let me know what am I missing here so that the content within my $routeProvider.when gets loaded in my ng-view on markup. Thanks
Also not getting any console errors.
try this
JS:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.htm"
})
.when("/add-new", {
templateUrl : "add.htm"
})
});
HTML:
Red
Add this below line in your HTML page
<base href="/">
and change ng-href to href
EDIT :
$location in HTML5 mode requires a <base> tag to be present!
If you using ng-href, the you should pass $scope object
You don't have entry point for the app, so if you load your app and you are not going to specific url you will not see any results.
You can add otherwise({redirectTo:'/add-new'}) or go to #/add-new to see your page
Good Day,
I'm trying to create an SPA with Angular. Here is my index.html page:
<!DOCTYPE html>
<html lang="en" ng-app="onlineApp">
<head>
<meta charset="UTF-8">
<title>Online</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/mystyle.css">
<base href="/Client/">
</head>
<body ng-controller="mainController">
<div class="container"> <!--- This is the box login -->
<div ng-view></div>
</div>
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and here is app.js:
var onlineApp = angular.module('onlineApp', ['ngRoute']);
onlineApp.controller('mainController', function($scope) {
$scope.message = 'Test Message';
});
onlineApp.controller('signupController', function($scope) {
$scope.message = 'Sign up Message';
});
onlineApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/signup', {
templateUrl: 'pages/signup.html',
controller: 'signupController'
})
.otherwise({
redirectTo: '/'
});
// use the HTML 5 History API
$locationProvider.html5Mode(true);
});
My problem is: Inside the contents of the ng-view (home.html), I have a button. When I click the button, I want to go to a signup page as defined in the route handler and it's not working. I think the problem is "inside" the ng-view.
EDIT:
Here's a snippet of pages/home.html:
<div class="pull-right col-md-4">
<label class="pull-right col-md-12 create-monthly">Create a Monthly Parker Account</label>
<a id="btn-create" class="btn btn-primary" href="#signup" >
Create Account
</a>
</div>
When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html
END EDIT:
All of the examples I see of ng-view being used is when the links are outside of the ng-view.
Can I change the contents of ng-view while I'm inside the ng-view itself? Or is there some sort of project that would allow me to do that.
TIA,
coson
you just have to change the location of the browser to change the route. i do not really understand your problem, probably you will have to rephrase it or post a little bit more code (from inside your ng-view)
potentially either a link of the form
Click me to switch
or a manual location change with the $location service (inject it to your controller)
$location.path("/signup");
should do the job. im not sure what you mean by links inside and outside of ng-view.
The nice thing about using ui-router is that you can treat your view changes as simple page redirects. i.e. you can use an anchor tag to redirect the browser to the specified url and ui-router will catch that before the page refreshes and just update your ui-view without refreshing the page.
Click this link to go to signup.
I've just started learning angular & creating the first app. Help me please with routing.
Folder Structure
spa/
index.html
controllers/
controllers.js
images/
javascript/
app.js
resources/
angular-route.js
angular.js
views/
cars.html
home.html
login.html
profile.html
The pages from "/views" are not displayed.
Here's my code.
index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<title>5 Angular</title>
<script src="resources/angular.js"></script>
<script src="controllers/controller.js"></script>
<script src="javascript/app.js"></script>
<script src="resources/angular-route.js"></script>
</head>
<body ng-controller="mainCtrl">
<nav>
<ul class="navbar">
<li>
Home
</li>
<li>
Login
</li>
<li>
Profile
</li>
<li>
Cars
</li>
</ul>
</nav>
<ng-view></ng-view>
</body>
</html>
cars.html
<h1>Cars Page</h1>
home.html
<h1>Home Page</h1>
login.html
<h1>Login Page</h1>
profile.html
<h1>Profile Page</h1>
app.js
angular.module('app', ['ngRoute'])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'views/home.html'
})
.when('login', {
templateUrl: 'views/login.html'
})
.when('cars', {
templateUrl: 'views/cars.html'
})
.when('profile', {
templateUrl: 'views/profile.html'
})
otherwise('/');
});
Controller
angular.module('app', ['ngRoute'])
.controller("mainCtrl",function($scope){
})
Once you create app module in app.js like angular.module('app', ['ngRoute'])
You shouldn't recreate the app module in controller.js again which will flush all the initial registered component like here you did .config block for router settings.
It should be
angular.module('app')
instead of
angular.module('app', ['ngRoute'])
Additionally login anchor should be #/login instead of #Login because $routerProvider has condition on login.
Also notice there should be a slash after the hash in the href.
Login
I am using angular-route.min.js and I have two designs for my navbar.
The First one is the landing page navbar that will appear first on my index.html.
The second navbar is when the user is routed to the /signin page.
I am unsure on how to go about this. I see a lot of different ways that this could be done, but none really that explain how I could change the entire header view when another route is chosen. They just show how to change the links that are contained inside of it. Like this Stack
how can I switch out the header when it is routed to the /signin page?
also, I am working with another person who is doing the backend with Django. That is why I changed the "{{ }}" to "[[ ]]".
var app = angular.module('app', ['ui.bootstrap', 'ngRoute']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl: 'pages/LandingPage.html',
})
.when('/signin', {
templateUrl: 'pages/SignIn.html'
})
.when('/contact', {
templateUrl: 'pages/contact.html'
});
});
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js">
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>
I think ng-include directive could solve the situation you are facing.
In controller code.
.controller('HeaderCtrl', function($scope, $location) {
$scope.$on('$locationChangeSuccess', function(/* EDIT: remove params for jshint */) {
var path = $location.path();
//EDIT: cope with other path
$scope.templateUrl = (path==='/signin' || path==='/contact') ? 'template/header4signin.html' : 'template/header4normal.html' ;
});
})
In Html.
<body>
<div ng-controller="HeaderCtrl">
<div ng-include="templateUrl"></div>
</div>
<div ng-view></div>
</body>
I hope this could help you. :)
The difference of your two navbars are not significant. An alternative is just use ng-class and ng-show to give different styles.
For example, in the navbar.html:
<nav>
<span ng-show="isNormalPage">Inn</span>
<img ng-class="{align-center: isNormalPage}">Logo</img>
<span ng-show="isNormalPage">Sing in</span>
</nav>
In your JS file, add a flag to mark singin page:
.when('/signin', {
controller: [$scope, function ($scope) {
$scope.isNormalPage = false;
};
}]
})
could you please tell me why I am not able to navigate one page to another on button click .
I do like that
var loginCntrl=function($scope,$location){
$scope.testClick =function(){
alert('sss');
$location.path("/no");
}
$scope.name="naveen";
$scope.lastname="sharam";
$scope.fullname = function() {
return $scope.firstname + $scope.lastname;
};
}
here is plunker
http://plnkr.co/edit/gQcXe0Njvx6Iviu8Fjep?p=preview
I want to go on second page .
Thanks
When using ui-router you should be using $state to transfer from page to page. You should inject $state into your controller, then you can use $state.go('appaa') to transfer to that state.
See https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options for more information.
Not that much clear your question. Might you are try to make single page app using AngularJS.
We can create many HTML pages and call in single page without refreshing the page using AngularJS $routeProvider (https://docs.angularjs.org/api/ngRoute/provider/$routeProvider).
Find the below Example
1) Create three html pages home.html, about.html, services.html and save in 'pages' folder.
2) Create JS and add below script and save in 'js' folder (js/script.js).
var shanidkvApp = angular.module('shanidkvApp', ['ngRoute']);
// configure routes
spaApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html'
})
.when('/about', {
templateUrl : 'pages/about.html'
})
.when('/services', {
templateUrl : 'pages/services.html'
});
});
3) Create a index page and call angular.min.js, script.js
<!DOCTYPE HTML>
<html ng-app="spaApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<h1>AngularJS Routing</h1>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
<div class="contentwrap" ng-view>Loading...</div>
</body>
</html>
Download working example from Github