I have problem with angular routing.
index.html:
<!DOCTYPE html>
<html>
<head>
<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" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular-route#*" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="loginController.js"></script>
<script src="loginService.js"></script>
<script src="AppController.js"></script>
</head>
<body ng-app="betsApp" ng-controller="appCtrl">
<div class="container">
<div ng-view></div>
</div>
</body>
AppController.js
var betsApp = angular.module('betsApp', ['ngRoute', 'loginApp', 'loginService']);
betsApp.config(function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.when('/', {templateUrl: '/error.html'})
.when('/login', {templateUrl: '/pages/loginView.html'});
});
betsApp.controller('appCtrl', function($scope)
{
});
loginView.html:
<div ng-app="loginApp" ng-controller="loginCtrl">
<h1>Login</h1>
<hr>
<form>
<div class="form-group">
<input type="email" ng-model="credentials.email" value="{{credentials.email}}">
</div>
<div class="form-group">
<input type="password" ng-model="credentials.password" value="{{credentials.password}}">
</div>
<div class="form-group">
<input type="button" value="Login" ng-click="doLogin()">
</div>
</form>
</div>
The problem is that I see only a white page without any inserted view. here is a link to plunker.
The link to the plnkr does not match the code you have provided above (route definitions)
That being said I was able to get it routing by turning off html5Mode
Note: even angular's routing example does not work w/ html5Mode on... http://plnkr.co/edit/7YNtWncWYtxceELnzkAT?p=preview
Also, in loginView you are trying to define ng-app="loginApp" that will not be allowed, while you can have nested ng-app's (unless you manually bootstrap them documentation)
Related
I am trying to setup a one page application with AngularJS.
I am using Node with Express, and I have an apache server used as a middleware, if that matters.
My index.html page loads well but no view is loaded inside the ng-view.
Here is my code
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="public/img/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="public/img/favicon-16x16.png" sizes="16x16">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<link rel="stylesheet" type="text/css" href="public/css/font-awesome-4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular.min.js"></script>
<script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular-base64.min.js"></script>
<script type="text/javascript" src="vendor/angularjs/1.4.7/js/angular-sanitize.js"></script>
<script type="text/javascript" src="vendor/lodash.js/4.16.4/js/lodash.min.js"></script>
<script type="text/javascript" src="vendor/jquery/1.11.3/js/jquery.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
<script>
var myApp = angular.module('lispCDpoc', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
console.log('oui');
$locationProvider.hashPrefix('');
$routeProvider.
when('/', {
templateUrl: 'pages/test.html',
controller: 'testController'
}).
otherwise({
redirectTo: '/'
});
});
myApp.controller('testController', function($scope) {
$scope.message = 'Message for my test page';
});
</script>
<meta charset="utf-8">
<title>LISP Monitoring POC</title>
</head>
<body>
<div>
<nav class="navbar navbar-default navbar-custom">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="public/img/sg_logo_small.png" class="sg-logo"></a>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Release Note</li>
</ul>
<div>
<img class="logo-lisp" src="public/img/lisp2.png">
</div>
</nav>
<div ng-view></div>
</div>
</body>
</html>
I can't find the reason why my index.html page loads but it does not insert the test.html code
<div>
<h1>Test Page</h1>
<p>{{message}}</p>
</div>
Don't forget to declare your app module in your main template.
<body ng-app="lispCDpoc">
<div>
<nav class="navbar navbar-default navbar-custom">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="public/img/sg_logo_small.png" class="sg-logo"></a>
</div>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Release Note</li>
</ul>
<div>
<img class="logo-lisp" src="public/img/lisp2.png">
</div>
</nav>
<div ng-view></div>
</div>
</body>
Here's a working Plunkr: https://plnkr.co/edit/HlYxdCsLzfCNCY1dq7vp?p=preview
I can not enter the dashboard page after login while using Angular.js. I am providing my code below.
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ABSadmin">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABSClasses | Admin Panel</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,800' rel='stylesheet' type='text/css'>
<script src="js/angularjs.js"></script>
<script src="js/angularuirouter.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/route.js"></script>
</head>
<body style="background:url(images/533240312.jpg)" ng-controller="loginController">
<div>
<div class="logbg">
<span ng-show="validateMessage" style="color:#C0F">{{message}}</span>
<h3>Login to Admin Panel</h3>
<form name="frmlogin" id="frmlogin" class="login-form">
<div class="input-box input-left">
<label for="username">User Name:</label><br>
<input type="text" id="username" name="username" class="required-entry input-text" ng-model="u_name" ng-keypress="clearField();">
</div>
<div class="input-box input-right">
<label for="login">Password:</label><br>
<input type="password" id="pwd" name="pwd" class="required-entry input-text" ng-model="u_password" ng-keypress="clearField();">
</div>
<input type="button" value="Login" name="login" id="login" class="log" ng-click="adminLogin();" />
</form>
</div>
</div>
<script src="controller/loginController.js"></script>
</body>
</html>
The above page is my login page.When user will type localhost/admin/ this page is coming. the controller file is given below.
var login=angular.module('ABSadmin',[]);
login.controller('loginController',function($scope,$http,$location){
//console.log('hii');
$scope.adminLogin=function(){
if($scope.u_name==null || $scope.u_name==''){
$scope.validateMessage=true;
$scope.message="Please add user name";
}else if($scope.u_password==null || $scope.u_password==''){
$scope.validateMessage=true;
$scope.message="Please add Password";
}else{
$location.path('dashboard');
}
}
$scope.clearField=function(){
$scope.validateMessage=false;
$scope.message="";
}
})
After successfully login the user should get into the dashboard page which contains some menu. So here I am using ui.router to render the partial view.
route.js:
var Dahboard=angular.module('dasboard',['ui.router']);
Dahboard.run(function($rootScope, $state) {
$rootScope.$state = $state;
});
Dahboard.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('dashboard');
$stateProvider
.state('dashboard', {
url: '/dash',
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
})
})
My dashboard page is given below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="dasboard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABSClasses | Admin Panel</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="/js/angularjs.js"></script>
<script src="/js/angularuirouter.js"></script>
<script src="/js/route.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header">
<img src="../images/absclasses-logo-black.png" alt="" />
<div style="color:#FFF; font-size:20px; vertical-align:middle; float:left; margin-top:21px;font-weight:bold; ">Admin Panel</div>
<div class="header-right-pan" >
<ul>
<li>
Logged in as Admin |
</li>
<li>
<span class="logout" style="color:#fcce77;text-decoration: underline;" >Log Out</span>
</li>
</ul>
</div>
</div>
<nav>
<ul style="width:100%;">
<li>
<ul>
<li>
<ul class="submenu">
<li> Page</li>
<li> Syllabus</li>
<li>Exam Info</li>
</ul>
</li>
<li></li>
</ul>
</li>
</ul>
</nav>
<div ui-view>
<div class="dashbord-body">
<div>
<h5> </h5>
</div>
<div style="height: 300px; margin: 100px auto; text-align: center;color: #0071b1; font-size: 36px;">Welcome To Admin Panel </div>
</div>
</div>
<div class="dashbord-body-footer">
<p class="" style="margin-top: 10px; text-align:center;">
<img src="images/varien_logo.png" width="19" height="18" alt="" />
Copyright © 2015 OdiTek Solutions. <a target="_blank" href="http://www.oditeksolutions.com" > www.oditeksolutions.com</a>
</p>
</div>
<script src="js/default.js"></script>
<script src="controller/dashboardController.js"></script>
</body>
</html>
Here after successfully login the url is coming like this localhost/admin/#/dashboard but the dashboard page is not coming still the index page is showing. Here I need after successfull login the dashboard page should come and there I will render partial html file inside ui-view.
while you are using angular-ui-router then you have to use
$state.go('your_state_name');
instead of $location.path('dashboard');
here is your snippet
var login=angular.module('ABSadmin',[]);
login.controller('loginController',function($scope,$http,$location, $state){
$scope.adminLogin=function(){
if($scope.u_name==null || $scope.u_name==''){
$scope.validateMessage=true;
$scope.message="Please add user name";
}else if($scope.u_password==null || $scope.u_password==''){
$scope.validateMessage=true;
$scope.message="Please add Password";
}else{
$state.go('dashboard');
}
}
$scope.clearField=function(){
$scope.validateMessage=false;
$scope.message="";
}
})
The url for your state in stateProvider is /dash not dashboard. dashboard in this case is your state name. You'll want to tell the $location service to take you to
$location.path('dash')
You'll also want to change $urlRouterProvider.otherwise to point to /dash as well since the urlRouterProvider.otherwise method takes a url as a parameter
$urlRouterProvider.otherwise('/dash');
I created a body class so I could use different CSS for different pages:
homepage.js
.controller('HomePageCtrl',function($scope,$rootScope,appService) {
$rootScope.bodyClass = 'home-page'
login.js:
.controller('LoginCtrl', function ($rootScope,$scope,appService,$window) {
$rootScope.bodyClass = 'login-page'
index.html:
<body ng-app="yoApp" data-ng-class="bodyClass">
It works, but when I click to another page the previous class is maintained and I have to hit refresh to see the new class.
From Login page to Home page before refresh:
<body ng-app="yoApp" data-ng-class="bodyClass" class="ng-scope login-page">
Home page after refresh:
<body ng-app="yoApp" data-ng-class="bodyClass" class="ng-scope home-page">
What is causing this and how to fix it?
It is working perfectly on my machine. I have created a sample application to test the scenario.
index.html
<!DOCTYPE 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>
<script data-require="angular-route#*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.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 class="container" ng-class="bodyClass">
<div class="row">
<div class="col-sm-12">
<h1>Intro to Angular</h1>
<div id="view" ng-view=""></div>
</div>
</div>
</body>
</html>
home.html
<div id="login" class="row">
<div class="col-sm-6 col-sm-offset-3">
Welcome To Home Page.
</div>
</div>
login.html
<div id="login" class="row">
<div class="col-sm-6 col-sm-offset-3">
<form>
<fieldset class="radius">
<div class="row">
<div class="col-sm-6 columns">
<input type="text" class="form-control" name="username" placeholder="username" required="" />
</div>
<div class="col-sm-6 columns">
<input type="password" class="form-control" name="password" placeholder="password" required="" />
</div>
</div>
<br>
Login
</fieldset>
</form>
</div>
</div>
app.js
var app = angular.module("app", ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'login.html',
controller: 'LoginController'
});
$routeProvider.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
});
})
.controller('HomeController', function($rootScope, $scope) {
$rootScope.bodyClass = 'bg-info'
})
.controller('LoginController', function($rootScope, $scope) {
$rootScope.bodyClass = 'bg-danger'
});
See plnkr.
I'm trying to add templates to links, which is working, however I was wondering if there was a possibility to add your header and footer to it aswell, now I'm copying my header and footer for each page.
here's my js:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/startpage.html',
controller: 'PageCtrl',
controllerAs: 'page'
})
.when('/page/test', {
templateUrl: 'test.html',
controller: 'PageCtrl',
controllerAs: 'page'
})
and here's the template im loading them in
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-animate.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
<title>SiteEngine Mobile</title>
</head>
<body ng-app="ngViewExample">
<div class="fixedHeaderApp">
<div class="headerIconLogo">
<img src="img/world_icon.png" width="28px" height="28px" />
</div>
<span class="blue">Site</span><span class="orange">Engine</span>
</div>
<div class="whitespace"></div><div class="whitespace"></div>
<div class="whitespace"></div><div class="whitespace"></div>
<div class="whitespace"></div><div class="whitespace"></div>
<div class="homebackimgWrapper">
<div class="titleLarge">SiteEngine</div>
<div class="titleSmall">Mobile</div>
</div>
<div class="container">
<div class="loginLogo">
<img src="img/loginIcon.png" width="120px" height="120px" />
</div>
<form action="views/startpage.html">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Ingelogd blijven
</label>
</div>
<button type="submit" class="btn btn-primary btnq-lg btn-block">Inloggen</button>
</form>
<div class="whitespace"></div>
<div ng-controller="HomeController as product">
<div ng-repeat="product in product.products">
<h4>{{product.name}}</h4>
<button ng-show="product.canPurchase">Add to stomach</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Also I have different pages with different menu options.
You can try use ng-view as place for including yours templates. Your footer and header will be outside that ng-view. You can also rendering your menu directly in html. Just put map of yours menus and links somewhere and render it in html.
I've been looking at my app for ages now trying to find what's wrong but cannot for the life of me seem to find it.
Here's my HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ericsson KAS</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/eBootstrap.css"/>
<link rel="stylesheet" href="css/app.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="menu-container">
<div id="menu-top" class="e-full-blend"></div>
<div id="menu-bottom" class="gray-gradient">
<img ng-src="images/econ.png" height="35" width="27" class="logo" />
<center><h2 class="ericsson-capital-dark">Knowledge Assessment Solution<h2></center>
</div>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div id="main" class="col-xs-10 col-xs-offset-1" ng-view>
</div>
<div id="version-legend">Version: <span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="app.js"></script>
<script src="js/controllers.js"></script>
<script src="partials/view1/view1.js"></script>
<script src="partials/view2/view2.js"></script>
<script src="partials/view3/view3.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'controllers',
'view1',
'view2',
'view3',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: 'partials/view1'});
}]);
And the first view/partial that for some reason is not being loaded into ng-view
view1.js
'use strict';
angular.module('view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'partials/view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
view1.html
<div id="first-view" class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4" ng-controller="View1Ctrl as firstController">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-3 control-label">Name</label>
<div class="col-xs-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="domain" class="col-xs-3 control-label">Domain</label>
<div class="col-xs-9">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="jobRole" class="col-xs-3 control-label">Job Role</label>
<div class="col-xs-9">
<input list="browsers" class="form-control">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</div>
</div>
<div class="form-group" ng-controller="ButtonCtrl as bCntrl">
<div>
<a class="clean-link-light lower-right" href="#/view2"><button type="submit" class="e-btn e-btn-success" >{{ bCntrl.nextButtonTitle }}</button></a>
<button id="admin-button" type="submit" class="e-btn e-btn-default">{{ bCntrl.adminButtonTitle }}</button>
</div>
</div>
</form>
</div>
I have no idea what I've managed to do to stop it from working but it was working fine until I copied one of the partials folder to add a view4. That messed everything up and even tho I've removed view4 it's still not runnig.
Any help is more than apreciated!
Thanks!
I am not 100% sure, but in app.js
$routeProvider.otherwise({redirectTo: 'partials/view1'});
and in view.js
$routeProvider.when('/view1', {...}
Try in view.js:
$routeProvider.when('partials/view1', {...}
You may defined all your road into your app.js
Example :
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/login',
{
templateUrl: 'views/login.html',
controller: 'loginCtrl'
});
$routeProvider.when('/home/',
{
templateUrl: 'views/main.html',
controller: 'homeCtrl'
});
and the default road
$routeProvider.otherwise({redirectTo: '/login'});