This is asked and answered many times already.
But, after trying many things, I still have this problem.
I have single page with a search button in Angular. The parameter is getting trough fine and logged like this console.log("searched: " + search.term);
Then I use this term to query my database using REST, the result is coming back fine. All good!
Now, I'd like to update the $scope data with these new results. I have treid to do that by adding $scope.$apply() and by using $timeout and by using $digest.
It all leads me to the error: $digest already in progress
Then I used $scope.$watch and that works, I tested it with alerts but the data never ever changes in my browser.
'use strict';
// Declare app level module which depends on views, and components
angular.module('Grep GUI', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/view1'});
}]).
controller('DataBeest', function($scope, $http) {
$http.get('http://localhost:8529/_db/grep/grepdata/huizen').
then(function(response) {
$scope.greeting = response.data;
});
$scope.search = function(search) {
console.log("searched: " + search.term);
$http.get('http://localhost:8529/_db/grep/zoek/zoek/' + search.term).
then(function(response) {
$scope.greeting = response.data;
$scope.$digest()
});
}
});
index.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="grep GUI" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="grep Crawler">/Grand Theft grep</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>/alle_data</li>
<li>/alle_plaatjes</li>
<li>/nog_wat</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right" ng-controller="DataBeest">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Zoek" name="srch-term" id="srch-term" ng-model="search.term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="search(search)"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container" ng-controller="DataBeest">
{{ greeting }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.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>
ok found it, I had re-used the controller in the view, this made it all wonky..
Related
I used angular seed with satellizer. I started the app with the command: npm install and run the project on browser by typing: http://localhost:8080/app/#/auth, but I see the browser is showing [view1] [view2]
Angular seed app: v0.1.
I have used the following codes in app.js:
'use strict';
angular.module('myApp', [
'ui.router',
'myApp.view2',
'myApp.auth',
'myApp.version',
'satellizer'
]).
config(['$stateProvider', '$urlRouterProvider', '$authProvider',
function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.loginUrl = 'http://localhost:8000/adminlogin/showLogin';
$urlRouterProvider.otherwise('/auth');
}]);
I have used the below codes for auth.js within "view_auth":
'use strict';
angular.module('myApp.auth', [])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('auth', {
url: '/auth',
views: {
'jokesContent': {
templateUrl: "view_auth/auth.html",
controller: 'AuthCtrl as auth'
}
}
})
}])
.controller('AuthCtrl', ['$auth', '$state', '$http', '$rootScope', function($auth, $state, $http, $rootScope) {`
var vm = this;
vm.loginError = false;
vm.loginErrorText;
vm.login = function() {
var credentials = {
email: vm.email,
password: vm.password
}
$auth.login(credentials).then(function() {
$http.get('http://localhost:8000/api/v1/authenticate/user').success(function(response){
var user = JSON.stringify(response.user);
localStorage.setItem('user', user);
$rootScope.currentUser = response.user;
$state.go('jokes');
})
.error(function(){
vm.loginError = true;
vm.loginErrorText = error.data.error;
console.log(vm.loginErrorText);
})
});
}
}]);
The view file (auth.html) under view_auth is below:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading"> <strong class="">Login</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required="" ng-model="auth.email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" required="" ng-model="auth.password">
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm" ng-click="auth.login()">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
`
My index.html looks like:
<!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>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[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 ng-view></div>
<div>Angular seed app: v<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="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.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>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="view_auth/auth.js"></script>
<!--<script src="view_jokes/jokes.js"></script>-->
<script src="bower_components/satellizer/dist/satellizer.js"></script>
</body>
</html>
But after running the project, the view appear as like:
I need to show the screen like: https://i0.wp.com/baljeetsingh.in/wp-content/uploads/2015/11/2015-11-13_22-24-06.png?ssl=1
Any help appreciated.
Finally, I solved this issue. I replaced the codes <div ng-view></div> in index.html as
<div ui-view="jokesContent"></div>
I am trying to get a small angular app up and running but am receiving the same error every time I load my app:
Error: $injector:modulerr
Module Error
Failed to instantiate module app due to:
Error: [$injector:unpr]
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24scope
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:7:76
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:65
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:43:280)
at e (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:6)
at Object.invoke (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:44:91)
at d (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:237)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:376
at p (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:8:7)
at g (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:42:138)
at gb (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js:46:251
Here is a snippet with my index.html file and my app.js file:
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function($scope){
$scope.submit = function() {
console.log("yay");
}
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
Please let me know if any other information would be helpful! Thank you.
You cannot inject $scope to config. $scope is only accessible in controller and directive.
I think you are looking for controller?
app.controller('yourCtrl', function($scope){
// your code
});
var app = angular.module('app', []);
app.service('languageService', function($resource){
});
app.config(function(){
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<h1><span class="glyphicon glyphicon-pencil"></span>RecommendHer</h1>
</div>
</br>
</br>
<div class="row">
<div class="col-xs-12">
<p>Please paste job description below:</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea ng-model="jobDescription"></textarea>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-default" ng-click="submit()">Submit</button>
</div>
</div>
</div>
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="services/languageService.js"></script>
</body>
</html>
I'm using angularJs and new to it. I'm facing problem in $routeProvider.
Thanks in advance if someone may help me :)
I'm not getting any error in console, but ngView is also not updating
index.html
<!DOCTYPE html>
<html lang="en">
<head data-ng-app="myApp">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Project</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<!-- AngularJS script -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script src="js/jquery.min.js"></script>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">Demo Work</a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
Dashboard
</li>
<li>
Charts
<ul class="nav nav-second-level">
<li>Flot Charts</li>
<li>Morris.js Charts</li>
</ul>
</li>
<li>
Tables
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div data-ng-view>
</div>
</div>
<!-- /#page-wrapper -->
</div>
</body>
</html>
dashboard.html
<div>
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
tables.html
It has also some code same as dashboard.html
app.js
var demoProject = angular.module('myApp',['ngRoute']);
demoProject.config(function($routeProvider) {
$routeProvider
.when('/',{
templateUrl : 'page/dashboard.html',
controller : 'contactController'
})
.when('/tables',{
templateUrl: 'page/tables.html',
controller: 'tablesController'
});
});
demoProject.controller('contactController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
demoProject.controller('tablesController',function($scope){
console.log("Tables controller");
});
You need to load the app.js after loading angular route
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
I'm trying to use mobile-angular-ui (http://mobileangularui.com/) sidebar menu in Angular-Seed(https://github.com/angular/angular-seed) index-async.html.
I followed description, npm install and npm run update-index-async to setup index and index-async pages. The sidebar is working on index, but not in index-async
The Sidebar menu is working well for index.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>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css">
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body ng-cloak ui-prevent-touchmove-defaults>
<!-- Sidebars -->
<div ng-include="'Shared/menu.html'" id="leftMenu" class="sidebar sidebar-left black-bg"></div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="btn-group pull-left">
<a href ui-toggle="leftMenu" class="btn" id="btn-menu">
<i class="fa fa-bars"></i> Menu
</a>
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
APP
<small>v<span app-version></span></small>
</div>
</div>
<!-- App body -->
<div class="app-body scrollable">
<div class="app-content scrollable-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.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>
But the sidebar menu is not working for index-async.html. I tried npm run update-index-async and npm install scriptjs. They all didn't work.
Here is my index-async code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<style>
[ng-cloak] {
display: none;
}
</style>
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css">
<link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="bower_components/angular-loader/angular-loader.js"></script>
<script src="bower_components/scriptjs/dist/script.js"></script>
<script>
// load all of the dependencies asynchronously.
$script('bower_components/angular/angular.js', function () {
$script([
'bower_components/angular-route/angular-route.js',
'bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js',
'app.js',
'view1/view1.js',
'view2/view2.js',
'components/version/version.js',
'components/version/version-directive.js',
'components/version/interpolate-filter.js'
], function () {
// when all is done, execute bootstrap angular application
angular.bootstrap(document, ['myApp']);
});
})
</script>
<title>My AngularJS App</title>
<link rel="stylesheet" href="app.css">
</head>
<body ng-cloak ui-prevent-touchmove-defaults>
<!-- Sidebars -->
<div ng-include="'Shared/menu.html'" id="leftMenu" class="sidebar sidebar-left black-bg"></div>
<div class="app">
<div class="navbar navbar-app navbar-absolute-top">
<div class="btn-group pull-left">
<a href ui-toggle="leftMenu" class="btn" id="btn-menu">
<i class="fa fa-bars"></i> Menu
</a>
</div>
<div class="navbar-brand navbar-brand-center" ui-yield-to="title">
APP
<small>v<span app-version></span></small>
</div>
</div>
<!-- App body -->
<div class="app-body scrollable">
<div class="app-content scrollable-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
</html>
I'm trying to use https://github.com/princejwesley/angular-circular-slider
inside my website as a gender slider, it works when I initially load the page with it.
But when I go to another page in the website and then back to the profile, the slider errors out with the error in the title (as seen in the console). The pages use ng-route to load, I would think this is the culprit.
Here is the code:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#postsNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Posts</a>
</div>
<div class="collapse navbar-collapse" id="postsNavbar">
<ul class="nav navbar-nav">
<li>Login</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
<div ng-view></div>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="/app.js"></script>
<script src="/jquery.js"></script>
</body>
</html>
Here also is a Plnkr:
http://plnkr.co/edit/LkzBlHbELK8gHro4XStU
in the menu, click profile to see the circular slider
click login to go back
go to the profile again
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'