$rootScope.bodyClass not changing when the user goes to another page - javascript

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.

Related

The controller with the name '' is not registered

I'm using AngularJs 1.6.9 with ASP.NET Core 2.
The error is
The controller with the name 'pag1Controller' is not registered.
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="~/css/ngDialog-master/css/ngDialog.css" rel="stylesheet">
<link href="~/css/ngDialog-master/css/ngDialog-theme-default.min.css" rel="stylesheet">
<script src="~/lib/angular-1.6.9/angular.js"></script>
<script src="~/lib/angular-1.6.9/angular-route.js"></script>
<script src="~/lib/ngDialog-master/js/ngDialog.js"></script>
<script src="~/lib/angular-1.6.9/angular-cookies.min.js"></script>
<script src="~/js/app/app.js"></script>
</head>
<body class="" ng-app="MyApp">
<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li>
<i class="fa fa-th-large"></i> <span class="nav-label">Pag:</span> <span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>Pag1</li>
</ul>
<ul class="nav nav-second-level collapse">
<li>Pag2</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="wrapper wrapper-content">
#RenderBody()
</div>
</body>
</html>
Home.cshtml:
#{
ViewData["Title"] = "Home Page";
}
<div ng-view>
</div>
<div ng-controller="homeController">
{{Message}}
</div>
<script src="~/js/app/controllers/homeController.js"></script>
app.js:
var app = angular.module("MyApp", ['ngCookies', 'ngDialog', 'ngRoute']);
app.config(function ($routeProvider) {
config.baseURL = "http://localhost/";
$routeProvider.when('/Pag1', {
templateUrl: config.baseURL + "Pag1/Index",
controller: 'pag1Controller'
})
$routeProvider.when('/Pag2', {
templateUrl: config.baseURL + "Pag2/Index",
controller: 'pag2Controller'
})
});
pag1.cshtml
<div ng-controller="pag1Controller">
Pag1
<button ng-click="onMensaje()">View alert</button>
<script type="text/ng-template" id="templateId">
<h1>Template heading</h1>
<p>Content goes here</p>
</script>
</div>
<script src="~/js/app/controllers/pag1Controller/pag1Controller.js"></script>
pag1Controller.js:
app.controller('pag1Controller', function ($scope, ngDialog) {
$scope.onMensaje = function () {
ngDialog.open({ template: 'templateId' });
};
});
You need to include the controller in the index.html file , so that controller gets registered when app loads,
<script src="~/js/app/app.js"></script>
<script src="~/js/app/controllers/pag1Controller/pag1Controller.js"></script>
Import that controller in your index.html file.
<script srs=".../pag1Controller"></script>

How to use $ngCookies in angularjs

I've a trouble in cookies. When I use ngCookies in my project, there's something wrong in my div (alert).
enter image description here
And here's my app.js
angular.module('postLogin', [ngCookies])
.controller('PostController', ['$scope', '$http', function($scope, $http) {
this.postForm = function() {
var encodedString = 'username=' +
encodeURIComponent(this.inputData.username) +
'&password=' +
encodeURIComponent(this.inputData.password);
$http({
method: 'POST',
url: 'userauth.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
//console.log(data);
if ( data.trim() === 'correct') {
window.location.href = 'success.html';
} else {
$scope.errorMsg = "Username and password do not match.";
}
})
}
}]);
And here's my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="robots" content="noindex"/>
<title>angulrjs login page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" id="main-css"/>
<link href="css/style.css" rel="stylesheet" id="main-css"/>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-app="postLogin" ng-controller="PostController as postCtrl">
<div class="container">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<div class="row">
<img src="images/logo.jpg" class="imglogo"/>
</div>
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center">Login using username & password</div>
</div>
<div class="panel-body" >
<form name="login" ng-submit="postCtrl.postForm()" class="form-horizontal" method="POST">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" id="inputUsername" class="form-control" required autofocus ng-model="postCtrl.inputData.username"/>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" id="inputPassword" class="form-control" required ng-model="postCtrl.inputData.password"/>
</div>
<div class="alert alert-danger" ng-show="errorMsg">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×</button>
<span class="glyphicon glyphicon-hand-right"></span> {{errorMsg}}
</div>
<div class="form-group">
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-primary pull-right" ng-disabled="login.$invalid">
<i class="glyphicon glyphicon-log-in"></i> Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
When I didn't use ngCookies
angular.module('postLogin', [])
It could be run as normally. Please help me, I really want it to throwing username in my login form to next page. I can't use $cookies like session in php. Thanks.
In your module setter (angular.module...) when you inject dependent modules they must be in quotes. In your example there are no quotes surrounding ngCookies. Also, your index.html doesn't appear to reference the angular-cookies.js file which is not part of the base angular.js file.
Check development tools for specific error(F12).

angular routeprovider include header, footer and template

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.

AngularJS not loading html into ng-view

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'});

Angular routing not working

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)

Categories