I am new to angular (router ui-sref in angularjs) and I am following a tutorial. But after code execution I am not able to get the clickable link. Instead of a clickable cursor, an edit cursor(|) is shown. Following is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- SideBar Style Sheet -->
<link rel="stylesheet" type="text/css" href="../css/SideBar.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<!-- SideBar Transition JS -->
<script type="text/javascript" src="../javascript/sidebarAni.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min
" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body ng-app="myApp" >
<a ui-sref="applyLeave">Apply Leave</a>
Leave Balance1
Other Option
Other Option
</div>
<div id="main">
<ui-view></ui-view>
</div>
<script >
var v=angular.module("myApp",["ui.router"]);
v.config(function($stateProvider){
$stateProvider
.state("applyLeave",{
url:"/applyLeave",
templateUrl:"try.html",
controller:"leaveController",
controllerAs:"leaveController"
})
.controller("leaveController",function($scope)
{
})
});
</script>
</body>
</html>
Please Help
It should be like this. you have a mistake in closing }); so this the controller puted on config body.
var v=angular.module("myApp",["ui.router"]);
v.config(function($stateProvider){
$stateProvider
.state("applyLeave",{
url:"/applyLeave",
templateUrl:"",
controller:"leaveController",
controllerAs:"leaveController"
})
});
v.controller("leaveController",function($scope){
});
Demo
Related
I have a simple logout function but locally it just takes 1 second to logout while on server its taking 6 second. How can I reduce the logout time.
$scope.SignOut = function() {
$rootScope.globalSession = null;
$rootScope.globalManagerViewDisplayFlag = false;
$rootScope.globalAdminViewDisplayFlag = false;
$rootScope.globalSuperViewDisplayFlag = false;
$cookieStore.remove('Session');
$cookieStore.remove('WeAlertUserData');
// $location.path('/login');
$window.location.reload();
};
});
This is my main Index page.
<html lang="en" ng-app="W-Alert">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="">
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.js"></script>
<script src="libs/angular-cookies.min.js"></script>
<script src="libs/ui-bootstrap-tpls-2.0.0.min.js"></script>
<script src="libs/permission-ng.js"></script>
<script src="libs/transition/TransitionEventNames.js"></script>
<script src="libs/transition/TransitionEvents.js"></script>
<script src="libs/angular-permission.js"></script>
<script src="libs/angular-animate.min.js"></script>
<script src="libs/angular-uuid2.min.js"></script>
<!--Spinner-->
<script type="text/javascript" src="libs/spin.js"></script>
<script src="libs/angular-spinner.js"></script>
<!-- Toaster -->
<script type="text/javascript" src="libs/checklist-model.js"></script>
<link rel="stylesheet" type="text/css" href="libs/angular-toastr.css" />
<script type="text/javascript" src="libs/angular-toastr.tpls.js"></script>
<!--
<script src="js/config.js"></script> -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="libs/dirPagination.js"></script>
<script src="js/constants.js"></script>
<!-- change password controller-->
<script src="components/change-password/change-password-controller.js"></script>
<script src="components/change-password/change-password-service.js"></script>
<!-- auth controller-->
<script src="components/authentication/authenticate-service.js"></script>
<script src="components/authentication/authenticate-controller.js"></script>
<!--client -->
<script src="components/client/client-service.js"></script>
<script src="components/client/client-controller.js"></script>
<!--manager-->
<script src="components/manager/manager-service.js"></script>
<script src="components/manager/manager-controller.js"></script>
<!--application-->
<script src="components/application/application-service.js"></script>
<script src="components/application/application-controller.js"></script>
<!--group-->
<script src="components/group/group-service.js"></script>
<script src="components/group/group-controller.js"></script>
<!--user-->
<script src="components/user/user-service.js"></script>
<script src="components/user/user-controller.js"></script>
<!--client profile-->
<script src="components/profile/profile-controller.js"></script>
<!-- Bootstrap Core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- DataTables CSS -->
<link href="bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/w-alert.css" />
</head>
<body >
<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>
<ng-include src="'layout/shell.htm'"/>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
</body>
</html>
NOTE: Server is in another country. Does this matters? If it does then what can I do to reduce the time?
I am trying to implement angular chart with my app. I bower installed angular-chart.js and have chart.js listed as a dependency. However when I load my page I get the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module chart.js due to:
Error: [$injector:nomod] Module 'chart.js' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
My questions is this: How do I get this error to go away? I've verified that charts is being loaded before angular-chart but I'm not able to get this error to go away.
Here is my index.html:
<!--suppress ALL -->
<html lang="en" ng-app="app" ng-cloak>
<head>
<meta charset="utf-8">
<base href="/">
<!--[if IE]><link rel="shortcut icon" href="assets/img/favicon.ico"><![endif]-->
<link rel="apple-touch-icon-precomposed" href="assets/img/favicon.ico">
<link rel="icon" href="assets/img/favicon.ico">
<!-- Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta name="description"
content="Convenient, affordable online CPA and EA self-study CPE. Complete CPE courses in your spare time, on the go.">
<meta name="author" content="Learning Suite Inc">
<meta name="google-site-verification" content="3QtiwaamWrLo-A9BAx0kTgVHagRJfe0xE60hMULF12M"/>
<meta name="fragment" content="!">
<title update-title>Prolaera</title>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/pricing/pricing_v6.css" media="screen" title="no title" charset="utf-8">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans"/>
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v2.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- <link rel="stylesheet" href="assets/css/headers/one.css" media="screen" title="no title" charset="utf-8"> -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/css/sky-forms.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
<link rel="stylesheet" href="css/sweetalert2.css">
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
<!-- Bootstrap core CSS -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Bootstrap theme -->
<link href="lib/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
<!-- Angular CSP-->
<link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/lib/html5shiv/html5shiv.min.js"></script>
<script src="/lib/respond/respond.min.js"></script>
<![endif]-->
<!-- must be before require.js -->
<script type="text/javascript" src="https://cdn.auth0.com/js/lock-9.1.min.js"></script>
<script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="lib/moment/moment.js"></script>
<script type="text/javascript" src="lib/url-template/url-template.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="js/apigClient.js"></script>
<!--jquery/bootstrap needed here for calendar and collapse navbar toggle-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>
<!-- jquery, moment, and angular have to get included before fullcalendar -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/gcal.js"></script>
<!-- require -->
<script src="lib/require/require.js"></script>
<script type="text/javascript" src="lib/auth0-variables.js"></script>
<!-- angularjs -->
<link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>
<script src="lib/angular/js/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-bootstrap-typeahead/ui-bootstrap-typeahead.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-bootstrap-toggle-switch/style/bootstrap3/angular-toggle-switch-bootstrap-3.css">
<script type="text/javascript" src="bower_components/angular-bootstrap-toggle-switch/angular-toggle-switch.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-spinkit/build/angular-spinkit.min.css">
<script src="bower_components/angular-spinkit/build/angular-spinkit.min.js"></script>
<script src="bower_components/angular-stripe-checkout/angular-stripe-checkout.js"></script>
<!
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="lib/angular/js/angular-animate.js"></script>
<script src="lib/angular/js/angular-ui-router.js"></script>
<script src="lib/angular/js/angular-ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-widget-5.js"></script>
<script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="//cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script src="//cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="lib/sweetalert/SweetAlert.js"></script>
<script src="lib/sweetalert/sweetalert2.min.js"></script>
<script src="lib/smarttable/smart-table.min.js"></script>
<script src="lib/angularsanitize/angular-sanitize.min.js"></script>
<script src="lib/ng-file-upload/ng-file-upload.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>
<!-- Uncomment for deployment and comment for dev -->
<script src="js/analytics.js"></script>
<script src="js/inspectlet.js"></script>
<!-- Unify styling -->
<link rel="stylesheet" href="assets/css/headers/header-v1.css">
<!-- CSS Page Style -->
<link rel="stylesheet" href="assets/css/pages/shortcode_timeline2.css">
<link rel="stylesheet" href="assets/css/pages/page_pricing.css">
<script src="js/app.js"></script>
<script src="js/navbar-directive.js"></script>
<script src="js/footer-directive.js"></script>
Here is beginning of my app.js:
(function() {
var app = angular.module('app', ['ngCookies', 'auth0', 'angular-jwt', 'angular-storage', 'ngFileUpload', 'ngSanitize', '19degrees.ngSweetAlert2', 'ui.router', 'ngAnimate', 'ui.bootstrap', 'angular-spinkit', 'angular.filter', 'stripe.checkout', 'ui.calendar', 'ui.bootstrap.typeahead', 'toggle-switch']);
define('app', [], function() {
return app;
});
You have to import chart.min.js - and if you want to use full version of Chart.js you have to import Chart.bundle.js which is downloadable from chart.js webpage.
I had the same issue, tried to point to a CDN and it worked fine,
Then tried to used node_modules instead of bower_components and it worked fine too !
So I believe something is wrong with the bower version ...
Hope this helps ! Let me know !
I built a table in my demo. I got help from this example.
In this example, first column there is an image of "edit image" (coming from bootstrap).
I also make same example in my plunker, already includes jquery and bootstrap but it is not displaying the image. Why?
here is my code (plunker)
<head>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
</head>
Your second example is missing this:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Adding it in gives this:
Essentially the image is a font coming from font-awesome, not bootstrap.
i want to use ngAnimate but somehow it doesn't work and i don't know why.
i have added everything to my page and have injected them in my app but still i am getting nothing.
here is my index and my app;
var app = angular.module('iranfile', ['ngAnimate','ngRoute','mgcrea.ngStrap']);
<html ng-app="iranfile">
<!-- ye lahze khafe sho-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> home page </title>
<!-- Add Jquery and bootstrap -->
<script src="js/jQuery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.rtl.min.css"/>
<link rel="stylesheet" href="css/bootstrap/bs-additional/bootstrap-additions.min.css"/>
<!-- / Add Jquery and bootstrap -->
<!-- Angular CSS -->
<link rel="stylesheet" href="js/angular/ng-animation.css"/>
<link rel="stylesheet" href="css/angular/angular-motion.min.css"/>
<!-- Angular CSS -->
<link rel="stylesheet" href="js/toastr/toastr.min.css"/>
<!-- Narvan CSS DOCs -->
<link rel="stylesheet" href="css/fonts.css"/>
<link rel="stylesheet" href="css/layout.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/singup.css"/>
<link rel="stylesheet" href="css/estate.css"/>
<link rel="stylesheet" href="css/favor.css"/>
<link rel="stylesheet" href="css/account.css"/>
<!-- Narvan CSS DOCs -->
</head>
<body>
</body>
<!-- ADD AngularJs -->
<script src="js/angular/angular.min.js"></script>
<!--<script src="css/angular/angular-animate.min.js"></script>-->
<script src="js/angular/angular-1.4.4/angular-animate.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/tooltip.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/parse-options.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-route.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-sanitize.min.js"></script>
<script src="js/client-connection.js"></script>
<script src="js/app.js"></script>
I've ran into lots of issues when using angular-strap & bootstrap-rtl
Try removing bootstrap rtl and check...
Why are there duplicate names in my dropdown list? Also how do I turn the dropdown toggle into a dropdown button without having a black bullet on the left
http://test.shibagames.com/
Here's the code:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.10/angular.js" data-semver="1.2.10"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link href="menu_source/styles.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/chromeSafari.css" type="text/chrome/safari" />
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="dist/css/bootstrap.min.css" type="text/css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="music.js"></script>
<script src="example.js"></script>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.10/angular.js" data-semver="1.2.10"></script>
<script src="app.js"></script>
<script src="javascript/main.js"></script>
<script src="angular.min.js"></script>
<script src="ui-bootstrap.min.js"></script>
</head>
<body>
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a>{{choice}}</a>
</li>
</ul>
</li>
</body>
</html>
app.js
var app = angular.module('myApp', []);
function myCtrl($scope) {
$scope.active = { val : '' };
$scope.Activate = function(buttonVal) {
$scope.active.val = buttonVal;
};
}
example.js
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [
"The first choice!",
"And another choice for you.",
"but wait! A third!"
];
}
There is very simple explanation: you are including AngularJS 3 times (!):
2 times from http://code.angularjs.org/1.2.10/angular.js
1 time from angular.min.js
Generally speaking it looks like dependencies of this test page are not well managed:
you are including Bootstrap's JavaScript which is not needed to make directives from the Angular.UI.Bootstrap work properly
if you want to use Bootstrap's JavaScript you would need jQuery as well and this is not included.