I need to put some functions on the header of my site, but the functions just not working...
I'm building my site with AngularJs and Javascript. Next my index.html:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.62/vfs_fonts.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/test/test.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factories/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
As you can see, i'm calling the header file on the ng-include div.
And the my header.html file:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<a id="admin-logo"><img src="/logo.png" /></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hide" id="login" align="center">
<button type="button" class="btn btn-user" id="jump-btn">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout">Log out</button>
</div>
So, at this point, everything works fine: the header appears on every page. But if i need a function on the logout button, how can i do it?
I've tried creating a home.js file like next one:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component('adminHead', head);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
})();
And then, added the function on the button with ng-click:
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout" ng-click="getOut()">Log out</button>
</div>
But the function is not working.
Someone knows why is not working and help me with and example if it's possible, please? If i add the function on the html between script tags works, but i need to find if it's possible with the $scope.
Hope you can help me. Thanx in advance
Declare a controller:
angular
.module('adminApp')
.controller('adminHeadCtrl', headCtrl);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
Instantiate the controller with the ng-controller directive:
<div class="menu-out" ng-controller="adminHeadCtrl">
<button type="button" ng-click="getOut()" id="logout">Log out</button>
</div>
For more information, see
AngularJS Developer Guide - Controllers
Related
How can i call a function from another file in AngularJs? I'm going to use the same header in all my pages, so i need to call the functions that lives in it.
This is my code so far. First, my index:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factory/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
Then the app.js:
(function(){
'use strict';
angular
.module('adminApp', ['ngResource', 'ngRoute']);
})();
The HTML for the header:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<h1>Admin test</h1>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" id="login" align="center">
<button type="button" class="btn btn-user" ng-click="open()">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout">Logout</button>
</div>
Everything until here is ok. Now my doubt is how to call a funtion to toggle the .menu-out div if the header will be separated as all the pages that will live in it?
I've tried with the file header.js like this:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component([], head);
headCtrl.$inject = ["$scope"];
function headCtrl($scope){
$scope.open = function(){
$('.menu-out').toggle();
}
}
})();
But is not working. As you can see i've added the brackets in component, 'cause i don't know if i need to call the header from the routes.js file.
This is the route.js file:
(function(){
'use strict';
angular
.module('adminApp')
.config(config);
config.$inject = ["$routeProvider", "$locationProvider"];
function config($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
template: '<admin-home></admin-home>'
})
.otherwise({
redirectTo: '/'
});
}
})();
I need to use $rootScope? Someone can guide me please. As i've said, i'm using AngularJs, HTML and Javscript.
Thanks in advance.
The first argument of the module.component method should be a string to name the component:
angular
.module('adminApp')
̶.̶c̶o̶m̶p̶o̶n̶e̶n̶t̶(̶[̶]̶,̶ ̶h̶e̶a̶d̶)̶;̶
.component("adminHome", head);
For more information, see
AngularJS angular.module Type API Reference - component
I have a single-page application and I have a problem loading things in my UI
So my index.html goes like this
html lang="en" ng-app="App" ng-controller="IndexController">
<head>
<!-- CORE CSS-->
<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/custom/custom.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<script type="text/javascript" src="js/plugins/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="libs/angular-utils-pagination/dirPagination.js"></script>
<script type="text/javascript" src="js/materialize-plugins/date_picker/picker.js"></script>
<script type="text/javascript" src="js/materialize-plugins/date_picker/picker.date.js"></script>
<script type="text/javascript" src="js/ngStorage.min.js"></script>
<script type="text/javascript" src="js/plugins/select2.js"></script>
<script type="text/javascript" src="js/controller/IndexController.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body class="cyan">
*some navbar codes here*
<section id="content">
<div ng-view>
</div>
</section>
</body>
*some scripts here*
</html>
then I have my other pages like this
<section id="content" ng-controller="DashboardController">
*some codes here*
<select required id="names" ng-model="selectedName" ng-class="{invalid : validation.names}" ng-options="x for x in names"></select>
<div class="row">
<div ng-repeat="x in names">
{{x}}
</div>
</div>
<div class="row">
<div class="input-field col s4"></div>
<div class="input-field col s4">
<a class="btn waves-effect waves-light white blue-text" ng-click="cancelRequest()">Cancel</a>
<a class="btn waves-effect waves-light blue" ng-click="transaction()">Save</a>
</div>
<div class="input-field col s4"></div>
</div>
</section>
the thing is I can't use select, radio boxes, check boxes and so on.
In my dashboard controller I have a list named $scope.names where the data are $scope.names = ["Emil", "Tobias", "Linus"]; and it is declared in my init function
as you read you know it should work with the above code right? but...
it is showing with ng-repeat but not in ng-options
Can someone tell me what's wrong? I'm wracking my brains for hours already :(
I also have
$(document).ready(function () {
$('select').material_select();
});
and if I hard coded the <option></option> it wouldn't work unless I put
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/plugins/angular-materialize.js"></script>
<script type="text/javascript" src="js/plugins.min.js"></script>
Edit:
.controller('DashboardController', function ($http,$scope,$sessionStorage,StartingService,LogService,SweetAlert) {
(function init() {
$http.defaults.headers.common['Authorization'] = $sessionStorage.authenticate;
$scope.isLogin = $sessionStorage.showLogin;
$sessionStorage.currentBusiness;
$(document).ready(function () {
$('select').material_select();
$('.tooltipped').tooltip({delay: 50});
});
So I think you should use $onInit() like this:
controller: function() {
this.$onInit = function() {
$('select').material_select();
};
},
Or wrap you select initialization on $timeout:
$timeout(() => $('select').material_select());
You don't need wrap code to function
.controller('DashboardController', function ($http,$scope,$sessionStorage,StartingService,LogService,SweetAlert, $timeout) {
$http.defaults.headers.common['Authorization'] = $sessionStorage.authenticate;
$scope.isLogin = $sessionStorage.showLogin;
$sessionStorage.currentBusiness;
$timeout(function () {
$('select').material_select();
$('.tooltipped').tooltip({delay: 50});
});
HTML
<!DOCTYPE html>
<html ng-app="dropApp">
<head>
<meta charset="utf-8" />
<title>DropBox</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body ng-controller="mainctrl">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<a id="btn-login" ng-click="login()" ng-model="logbut" ng-show="logbut" class="btn btn-success">Login </a>
<div ng-include="template"></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
Amey Totawar
</p>
</div>
<script src="angularsrc.js"></script>
</body>
</html>
Javascript File
var dropApp = angular.module("dropApp",[]);
var path = require('path');
dropApp.controller("mainctrl", function($scope) {
$scope.logbut = true;
$scope.login = function() {
$scope.logbut = false;
$scope.template = {
name: 'login.html',
url: path.join(__dirname,'views','login.html')
};
}
});
Getting Error:
GET http://localhost:8600/angularsrc.js net::ERR_ABORTED and hence angular module not found.
I tried including min.jquery earlier.
I also tried changing angularsrc.js location, but nothing is working.
Please help!!
<!DOCTYPE html>
<html ng-app="dropApp">
<head>
<meta charset="utf-8" />
<title>DropBox</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="angularsrc.js"></script>
</head>
<body ng-controller="mainctrl">
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<a id="btn-login" ng-click="login()" ng-model="logbut" ng-show="logbut" class="btn btn-success">Login </a>
<div ng-include="template"></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
Amey Totawar
</p>
</div>
</body>
</html>
and your js is same
var dropApp = angular.module("dropApp", []);
var path = require('path');
dropApp.controller("mainctrl", function ($scope) {
$scope.logbut = true;
$scope.login = function () {
$scope.logbut = false;
$scope.template = {
name: 'login.html',
url: path.join(__dirname, 'views', 'login.html')
};
}
});
This is what you exactly looking for
Your references should be inside head like
<html ng-app="dropApp">
<head>
<meta charset="utf-8" />
<title>DropBox</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="angularsrc.js"></script>
</head>
<body ng-controller="mainctrl">
{{your code or logic goes here}}
</body>
</html>
I have these code samples that i am currently working on trying to learn angular js it worked well before but now it is not working at all
can some one please help me to make it right
//INDEX.HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
</html>
//app.js
angular.module('app',[]);
//main.ctrl.js
angular.module('app').controller("MainController",function(){
var vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searcInput ='';
});
Here is working solution with vm approach
angular.module('app',[]);
angular.module('app').controller('MainController',function($scope){
vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searchInput ='Initial Demo text'; //corrected variable spelling and added it to vm
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<!-- you can directly acceess model as above -->
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
Replace your controller code by this one :
angular.module('app').controller("MainController", function ($scope) {
$scope.titlex = 'AngularJS Tutorial Example';
$scope.searchInput = '';
});
I haven't changed any code but your code looks like working fine..
//app.js
angular.module('app',[]);
//main.ctrl.js
angular.module('app').controller("MainController",function(){
var vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searcInput ='';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
</html>
please refer updated below code snippet -
angular.module('app',[]);
angular.module('app').controller('MainController',['$scope',function($scope){ //added scope here
$scope.titlex = 'AngularJS Tutorial Example';
$scope.searchInput ='Initial Demo text'; //corrected variable spelling and added it to scope
}]);
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{titlex}}</h1>
<!-- you can directly acceess model as above -->
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="searchInput">
</div>
<p>{{searchInput}}</p>
</div>
</body>
</html>
Hope this helps!!
I've written a simple Login form with no actual server. Just a hard coded login credentials. And if they credentials are matching on angular controller function then I need to show another HTML page. On '/login.html', following code is written
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="/InfoGraph/js/angular/angular.min.js" ></script>
<script type="text/javascript" src="/InfoGraph/js/angular/angular-route.min.js" ></script>
<script type="text/javascript" src="/InfoGraph/js/login.js" ></script>
</head>
<body class="gray-bg" ng-app="login">
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div>
<h1 class="logo-name">IGraph</h1>
</div>
<h3>Welcome to IGraph</h3>
<form class="m-t" role="form" name="loginToIGraph" ng-controller="LoginController as login">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="" ng-model="user.username" >
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="" ng-model="user.password" >
</div>
<button type="submit" class="btn btn-primary block full-width m-b" ng-click="login.loginUser(user)">Login</button>
<small>Forgot password?</small>
<p class="text-muted text-center"><small>Do not have an account?</small></p>
<a class="btn btn-sm btn-white btn-block" href="register.html">Create an account</a>
</form>
</div>
</div>
</body>
</html>
And in 'login.js' the code is following :
(function(){
var app = angular.module('login',[]);
app.controller('LoginController', ['$scope','$location', function($scope,$location)
{
$scope.loginUser = function(user){
if(user.username == 'demo' && user.password == 'demo'){
$location.href('/afterLogin.html');
}
else{
alert('Wrong credentials')
}
}
}]);
})();
But on $location.href('/afterLogin.html'); , it does nothing. Even there is no error. What could be the cause?
Can you try like this below:
var path = "/afterLogin.html";
window.location.href = path;
you can use the angular $window.
just like sms said in previous answer for redirection.
Another way is through Routing - ngRoute or ui-router
This might help you.
Redirect to new Page in AngularJS using $location
Giving proper path will help you I think.