How can I redirect a user to a new whole page with AngularJS? I'm currently using ng-view, but problem with ng-view is that the other page is "included" in existing page:
<!DOCTYPE html>
<html ng-app="gameApp">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta content="text/html;charset=UTF-8" http-equiv="content-type" />
</head>
<body ng-controller="firstPageCtrl">
<div id="layout">
<div id="topcontent">
</div>
<div id="middlecontent">
<div ng-view></div>
</div>
<div id="bottomcontent">
{{"AngularJS"}}
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.22/angular-route.js"></script>
<script src="https://code.angularjs.org/1.2.22/angular-sanitize.js"></script>
<script src="js/mastercontroller.js"></script>
</html>
As you can see, the page is included between , but I don't want that, I want to redirect the user to a whole new page. How can I do this?
Here is my route:
gameApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/firstpage.html',
controller : 'firstPageCtrl'
})
.when('/game', {
templateUrl : 'partials/game.html',
controller : 'gameCtrl'
});
});
To redirect to external URL, use the $window service.
$window.location.href = 'http://www.google.com';
https://docs.angularjs.org/api/ng/service/$window
Related
How can i call a function from another file in AngularJs? I'm going to use the same header in all my pages, so i need to call the functions that lives in it.
This is my code so far. First, my index:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factory/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
Then the app.js:
(function(){
'use strict';
angular
.module('adminApp', ['ngResource', 'ngRoute']);
})();
The HTML for the header:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<h1>Admin test</h1>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" id="login" align="center">
<button type="button" class="btn btn-user" ng-click="open()">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout">Logout</button>
</div>
Everything until here is ok. Now my doubt is how to call a funtion to toggle the .menu-out div if the header will be separated as all the pages that will live in it?
I've tried with the file header.js like this:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component([], head);
headCtrl.$inject = ["$scope"];
function headCtrl($scope){
$scope.open = function(){
$('.menu-out').toggle();
}
}
})();
But is not working. As you can see i've added the brackets in component, 'cause i don't know if i need to call the header from the routes.js file.
This is the route.js file:
(function(){
'use strict';
angular
.module('adminApp')
.config(config);
config.$inject = ["$routeProvider", "$locationProvider"];
function config($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
template: '<admin-home></admin-home>'
})
.otherwise({
redirectTo: '/'
});
}
})();
I need to use $rootScope? Someone can guide me please. As i've said, i'm using AngularJs, HTML and Javscript.
Thanks in advance.
The first argument of the module.component method should be a string to name the component:
angular
.module('adminApp')
̶.̶c̶o̶m̶p̶o̶n̶e̶n̶t̶(̶[̶]̶,̶ ̶h̶e̶a̶d̶)̶;̶
.component("adminHome", head);
For more information, see
AngularJS angular.module Type API Reference - component
Hey guys ive been trying to use routing, still new to angular though :( I have the first page already made, but am trying to make it when you click enter the next page appears on top of the current page (so basically a new page). The reason I want it to be all 1 page is so I can transfer the data from the first page onto the second page, however I can't seem to get it to load the next page... Here's my html and js so far,, not sure where im going wrong -_-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/kandi.css">
</head>
<body data-ng-app="nameBox" class="ng-scope">
<ng-view></ng-view>
<section class="frontPageBox">
<div data-ng-controller="appearCntrl">
<form action="" method="">
<input type="text" data-ng-bind="name" data-ng-model="name" placeholder="Your Name..." id="name-input">
<a type="button" class="button" href="#/kandi2" style="text-decoration:none;color:#ccc;">Enter</a>
</form>
<p style="color:#999; font-size: 1.1em;">{{"Welcome " + name}}</p>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("nameBox", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/kandi2", {
templateUrl : "kandi2.html"
});
});
app.controller("appearCntrl", function($scope){
$scope.name = "";
$scope.data = [];
$scope.data.push(name);
});
</script>
</body>
</html>
The problem is because of the ng-view tag
<ng-view></ng-view>
Gives an <!-- ngView: undefined --> element in the DOM, there is no place to attach the view.
You could write something like:
<div ng-view></div>
Then it should work.
I'm trying to send two parameters from first.html to second.html through url and get the value in second.html using routeParams. I have set the base tag as <base href="file:///D:/abhilash/node/angapp/"/> and on click of button the parameters in the input textboxes should be passed through url.
The first.html:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<base href="file:///D:/abhilash/node/angapp/"/>
</head>
<body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="controller.js"></script>
<div ng-controller="firstController">
First name:<input type="text" ng-model="firstName"><br>
Last name:<input type="" ng-model="lastName"><br>
<input type="button" ng-click="loadView()" value="submit" name="">
</div>
</body>
</html>
Second.html:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<base href="file:///D:/abhilash/node/angapp/"/>
</head>
<body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="controller.js"></script>
<div ng-controller="secondController">
{{firstName}}
</div>
</body>
</html>
This is the controller:
(function(){
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider,$locationProvider){
$routeProvider.when('/first',{
templateUrl:'/first.html',
controller: 'firstController'
})
.when('/second/:firstName/:lastName',{
templateUrl:'/second.html',
controller:'secondController'
})
.otherwise({
redirectTo:'/first'
})
$locationProvider.html5Mode(true);
})
app.controller('firstController',function($scope,$location){
$scope.firstName="";
$scope.lastName="";
$scope.loadView = function()
{
$location.path('second/'+$scope.firstName +"/" +$scope.lastName);
console.log($location.url());
}
})
.controller('secondController',function($scope,$routeParams){
$scope.firstName = $routeParams.firstName;
$scope.lastName = $routeParams.lastName;
})
}());
check this code here
If you are deploying your app into the root context (e.g. https://myapp.com/), set the base URL to /:
<head>
<base href="/">
...
</head>
If you are deploying your app into a sub-context (e.g. https://myapp.com/subapp/), set the base URL to the URL of the subcontext:
<head>
<base href="/subapp/">
...
</head>
I am trying to display a view using angular js using module form .could you please tell me why it is not display my view or page
I share my code on this link
http://goo.gl/ocBdQ5
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="lib/angular.js" type="text/javascript"></script>
<script src="lib/angular-ui-router.js" type="text/javascript"></script>
<script src="js/firtdir/module.js" type="text/javascript"></script>
<script src="js/firtdir/router.js" type="text/javascript"></script>
<script src="js/firtdir/controller/firstcontroller.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body >
<div ng-app="firstApp">
<div ui-view="app"></div>
</div>
</body>
</html>
I have fixed the following issues and now your sample is working.
Demo: http://goo.gl/3eh5hz
Issues Fixed
index.html >> Directory name is corrected as "firstdir" in url
Routes >> controller should be inside views as follows
$stateProvider.state('app', {
url: '/app',
views:{
app:
{
templateUrl: 'js/firstdir/templates/firstpage.html',
controller:"firstcont"
}
}
});
I am learning AngularJS and trying to test routes. I am wondering if Plunker supports this so that I can navigate different pages.
*Clicking "Log in" returns Preview does not exist or has expired. in the View
Plunker Demo
HTML
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8" />
<title>Into to Angular.js</title>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12">
<h1>Intro to Angular</h1>
<div id="view" ng-view></div>
</div>
</div>
<button class="btn" onclick="location.href = '/login.html'">Login Page</button>
</body>
</html>
JS
var app = angular.module("app", []).config(function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
});
});
app.controller('LoginController', function () {
});
Yes, it is possible to use the client-side navigation in the plunker.
Example plunker: http://plnkr.co/edit/XH8yfhvbFpeP4l0EmJ8S?p=preview
Instead of modifying the location.href yourself, you have to use $location.path() or just use a simple a tag like this:
Login
In order to use the $routeProvider, you have to include the ngRoute module file:
<script src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
And put 'ngRoute' as a depencendy of the app module:
var app = angular.module("app", ['ngRoute'])