I had this warning of trying to load angular more than once and I Solve it by changing the order of my script tags on my Index.html page, but the problem is that when I build the app It still doesn't work even after the warning has disappeared !
Those are the scripts that caused the issue in the first place
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
I solved This by removing the script that calls ionic.bundle.js and by placing the other scripts after all the script are called
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy">
<title></title>
<!-- weather font -->
<link href="css/weather-icons.min.css" rel="stylesheet">
<!-- ionic gallery -->
<link href="lib/ionic-gallery/css/ion-gallery.css" rel="stylesheet">
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- style.css -->
<link rel="stylesheet" href="css/style.css" />
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- angular-nl2br js -->
<script src="lib/angular-nl2br/angular-nl2br.min.js"></script>
<!-- ionic number picker -->
<script src="lib/ionic-numberpicker/dist/ionic-numberpicker.bundle.min.js"></script>
<!-- elastic js-->
<script src="lib/angular-elastic/elastic.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- google maps javascript -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<!-- ionic gallery -->
<script src="lib/ionic-gallery/js/ion-gallery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced" align-title="center">
<!-- Back button -->
<ion-nav-back-button>
Back
</ion-nav-back-button>
<!-- Burger button -->
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<!-- Cart button -->
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-android-more-vertical" ui-sref="home">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<!-- Main view content -->
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-content>
<!-- User profile -->
<div class="text-center">
<a ui-sref="user({userId: 0})">
<img class="profile-picture circle" menu-close="" src="img/thumb/adam.jpg">
<h4>Adam Lambert</h4>
</a>
</div>
<!-- Menu -->
<div class="list" menu-close="">
<div class="item item-icon-left" ui-sref="home">
<i class="icon ion-ios-home-outline"></i>
Home
</div>
<div class="item item-icon-left" ui-sref="nearby">
<i class="icon ion-ios-location-outline"></i>
Nearby
</div>
<div class="item item-icon-left" ui-sref="chats">
<i class="icon ion-ios-email-outline"></i>
Message
<span class="badge badge-assertive">2</span>
</div>
<div class="item item-icon-left" ui-sref="ticket">
<i class="icon ion-android-plane"></i>
Flight booking
</div>
<div class="item item-icon-left" ui-sref="weather">
<i class="icon ion-ios-cloud-outline"></i>
Weather
</div>
<div class="item item-icon-left" ui-sref="gallery">
<i class="icon ion-images"></i>
Photos
</div>
<div class="item item-icon-left" ui-sref="friends">
<i class="icon ion-ios-people-outline"></i>
Friends
</div>
<div class="item item-icon-left" ui-sref="taxi">
<i class="icon ion-model-s"></i>
Taxi
</div>
<div class="item item-icon-left" ui-sref="shopping">
<i class="icon ion-bag"></i>
Shopping
</div>
<div class="item item-icon-left" ui-sref="currency">
<i class="icon ion-card"></i>
Currency
</div>
<div class="item item-icon-left" ui-sref="login">
<i class="icon ion-log-out"></i>
Logout
</div>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
And with those changements the warning disappeared but the app still doesn't work on the mobile device!
Related
So I'm learning JS/Ajax and I wanted to try to load html content into my page with the click of a button. Everything works as long as I call the function outside of my Navbar and I cant figure out why?
I'm trying to load html content from "bestellung.html" into a div with the id of "main-well". Everything works fine except when I want to call the ladeBestellung() function from within my Navbar... the content gets loaded but is instantly overwritten and disappears... why??
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QR2BUY Bestellübersicht</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Eigene Styles -->
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container"><!-- Haupt-Container -->
<!-- Haupt-Navigationsleiste -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><!-- Anfang Navigationsleiste-Header -->
<!-- Button für die mobile Ansicht -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation aufklappen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-qrcode"></span> QR2BUY
</a>
</div><!-- Ende Navigationsleiste-Header -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Hilfe</li>
<li class="dropdown">
Konto <span class="caret"></span>
<ul class="dropdown-menu">
<li>Einstellungen</li>
<li>Bestellhistorie</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right"><!-- Anfang Suchfeld -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Bestell-Nr. eingeben...">
<div class="input-group-btn">
<button class="btn btn-default" onClick="ladeBestellung()"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form><!-- Ende Suchfeld -->
</div>
</div>
</nav><!-- Ende Haupt-Navigationsleiste -->
<div class="row"><!-- Start Main-Row -->
<div class="col-xs-12"><!-- Start Main Col -->
<div class="well" id="main-well">
</div><!-- Ende Well -->
</div><!-- Ende Main-Col -->
</div><!-- Ende Main-Row -->
</div><!-- Ende Haupt-Container -->
<footer class="footer"><!-- Anfang Footer -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<p class="text-center">
<span>© 2016 QR2BUY</span> - Impressum - Kontakt
<p>
</div>
</div>
</div><!-- Ende Haupt-Container -->
</footer><!-- Ende Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
document.getElementById('main-well').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'bestellung.html');
function ladeBestellung() {
xhr.send();
}
</script>
</body>
</html>
Default type of <button> is "submit" which reloads the page and overrides the javascript-generated html - so the solution is to use <button type="button"></button>
I'm learning Framework7 now, but I'm stuck in this problem. I have created two pages, this is the file
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#673ab7">
<title>Ciptaloka Editor</title>
<link rel="icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="assets/css/framework7.material.min.css">
<link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="theme-teal">
<div class="views">
<div class="view view-main">
<div class="pages navbar-fixed">
<div data-page="index" class="page">
<!-- off canvas -->
<div class="panel-overlay"></div>
<div class="panel panel-left panel-cover">
a
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel" data-panel-left>
<i class="icon material-icons">menu</i>
</a>
</div>
<div class="center">
Custom T-Shirt
</div>
<div class="right">
<a class="link">
Done
</a>
</div>
</div>
</div>
<!-- Toolbar -->
<div class="toolbar toolbar-bottom tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#produk" class="link tab-link active">
<i class="icon material-icons">dashboard</i>
<span class="tabbar-label">Produk</span>
</a>
<a href="#image" class="link tab-link">
<i class="icon material-icons">add_a_photo</i>
<span class="tabbar-label">Image</span>
</a>
<a href="#text" class="link tab-link">
<i class="icon material-icons">text_fields</i>
<span class="tabbar-label">Text</span>
</a>
<a href="#clipart" class="link tab-link">
<i class="icon material-icons">photo_filter</i>
<span class="tabbar-label">Clipart</span>
</a>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
<div class="tabs">
<div class="tab active" id="produk">
Go home 2
</div>
<div class="tab" id="image">
Image
</div>
<div class="tab" id="text">
Text
</div>
<div class="tab" id="clipart">
Clipart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/framework7.min.js"></script>
<script type="text/javascript" src="assets/js/my-app.js"></script>
</body>
</html>
index2.html
<div data-page="index2" class="page">
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a class="link open-panel">
<a href="index.html">
<i class="icon material-icons">back</i>
</a>
</a>
</div>
<div class="center">
Custom Case
</div>
</div>
</div>
<!-- Content -->
<div class="page-content">
<div class="content-block">
Success direct page
</div>
</div>
</div>
When I'm click 'go home 2' at index.html, its succesfully direct to index2.html, content is shown, but not with the navbar, its only shown a background, but the text is hidden. This my screenshoot :
Why this is happen? Is I miss something?
your navbar is inside your data-page
you switch to index2 and all page change.
let navbar outside -> view-main -> navbar and then the data-page
sorry my bad english.
I keep getting an error trying to inject angular into my application. I get an error that says Error: $injector:modulerr Module Error. Below is my code:
admin-index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js" ng-jq> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>AdminLTE 2 | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.2 -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- Font Awesome Icons -->
<link href="../components/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!-- Ionicons -->
<link href="../bower_components/ionicons/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
<!-- Theme style -->
<link href="../bower_components/adminlte/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect.
-->
<link href="../bower_components/adminlte/dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css"/>
<!--<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="admin-app.css">
<link rel="stylesheet" href="reportview/report-view.css">
<script src="../bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script>
var locale = 'zh-CN';
document.write('<script src="../bower_components/angular-i18n/angular-locale_'+locale+'.js"><\/script>');
</script>
<![endif]-->
</head>
<body class="skin-blue">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a ng-click="$event.stopPropagation()" class="logo"><b>ZAN Admin</b></a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- search form (Optional) -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<li class="header">Header</li>
<!-- Optionally, you can add icons to the links -->
<li class="treeview">
<i class="fa fa-circle-o"></i>Report Views<i class="fa fa-angle-left pull-right"></i>
<ul class="treeview-menu" ng-cloak>
<li ng-repeat="dsm in dsmeta">
<a ng-href="admin-index.html#/admin/reportview/{{dsm.name}}">{{dsm.name}}</a>
</li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" ng-view>
<!-- Content Header (Page header) -->
</div><!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer" ng-controller="AdminSyncConsole">
<!-- To the right -->
<!-- <div class="pull-right hidden-xs">
Anything you want
</div> -->
<!-- Default to the left -->
<!-- <strong>Copyright © 2015 Company.</strong> All rights reserved. -->
<!-- Apply any bg-* class to to the info-box to color it -->
<div class="info-box bg-green">
<span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Current Sync Status</span>
<span class="info-box-number">{{syncStatus}}</span>
<!-- The progress section is optional -->
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
<div class="box box-solid box-default">
<div class="box-header">
<h3 class="box-title">Sync Sessions</h3>
</div>
<div class="box box-default collapsed-box">
<div class="box-header with-border">
<h3 class="box-title">Expandable</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div class="box-body">
The body of the box
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</footer>
</div><!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.1.3 -->
<script src="../bower_components/adminlte/plugins/jQuery/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../bower_components/adminlte/plugins/fastclick/fastclick.min.js"></script>
<!-- build:js ../minjs/angular.js -->
<!-- angular dependencies -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->
<!-- AdminLTE App -->
<script src="../bower_components/adminlte/dist/js/app.js" type="text/javascript"></script>
<script src="../bower_components/angular-translate/angular-translate.js"></script>
<script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<!-- build:js ../minjs/z-ui.js -->
<script src="../js/z-ui.js"></script>
<!-- endbuild -->
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="reportview/reportview.js"></script>
<script src="../translation/translate.js"></script>
<script src="admin-app.js"></script>
<script src="../components/util/report-view-service.js"></script>
</body>
</html>
admin-app.js:
'use strict';
var baseSyncUrl = "../api/rest/{{path.version}}/syncsessions";
var getSyncSessionsReq = {method: "GET", url: baseSyncUrl, params: {targetSystemType:{}, pageSize: ""}, path: {version: "v1"}};
// Declare app level module which depends on views, and components
var app = angular.module('app', ['z.components']);
app.controller('AdminSyncConsole', ['$scope', '$http', 'RESTCaller', function ($scope, $http, RESTCaller) {
$scope.syncStatus = "Completed";
$scope.syncSessions;
//REST API to get the sync sessions
$scope.getSyncSessions = function() {
var req = getSyncSessionsReq;
var targetSystem = {'id': '1', 'type': 'SPOTLIGHT', 'description': 'Spotlight'};
req.params.targetSystemType = targetSystem;
//Page size is not necessarily required
// req.params.pageSize =
var data = RESTCaller.getConfig(req);
data.then(function(result){
if(result) {
console.log("Result: ", result);
}
});
}
//Getting the sync sessions
console.log("Hi");
$scope.syncSessions = $scope.getSyncSessions();
//Call REST API to get the sync status
}]);
I'm confused as to why this is happening. I don't have any other problems injecting angular.min.js into my other files, and I can't seem to pinpoint where the error is coming from because it just complains about angular.min.js. I have checked and my ng-app seems to be correct and z.components comes from another module that comes from a file that I have already included called ../js/z-ui.js. RESTCaller also comes from z-ui.js file. Any help would be appreciated. Thanks!
I think that you should retrieve this module not create but I don't know what you do
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Additionally:
Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module
As you said:
I have checked and my ng-app seems to be correct and z.components comes from another module that comes from a file that I have already included called ../js/z-ui.js.
Do you use all of these files?
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
i'm getting Angular.js: 13424 Error: [ng:areq] Argument 'enfermerosController' is not a function, got undefinederror I don't know what is happening. Found in some places that it's maybe i'm calling ng-app twice or my module but I don't. I'm using Angular 1.5.3 and it's my first time with this problem. I will be grateful with any help you can give.
Thanks
This is my router
'use strict'
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/views/admin/partials/hola.html',
controller: 'adminController'
})
$routeProvider.when('/admin/geriatras', {
templateUrl: '/views/admin/partials/geriatras.html',
controller: 'geriatrasController'
})
$routeProvider.when('/admin/medicos', {
templateUrl: '/views/admin/partials/medicos.html',
controller: 'medicosController'
})
$routeProvider.when('/admin/enfermeros', {
templateUrl: '/views/admin/partials/enfermeros.html',
controller: 'enfermerosController'
})
$routeProvider.when('/admin/pacientes', {
templateUrl: '/views/admin/partials/pacientes.html',
controller: 'pacientesController'
})
$routeProvider.otherwise({
redirectTo: '/'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})
}])
and after this is one of my controllers pacientesController (with all I have the same problem)
'use strict'
myApp.controller('pacientesController',['$scope', ($scope) => {
$scope.hello = "hello"
}])
This is enfermerosController (as you see, there's no code yet in my controllers)
'use strict'
myApp.controller('enfermerosController', ['$scope', function($scope) {
}])
and my html is this one
<!DOCTYPE html>
<html lang="es" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hospital</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/public/assets/dist/css/Matadero.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>:D</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Hospital</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Navegación</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- Notifications: style can be found in dropdown.less -->
<!-- Tasks: style can be found in dropdown.less -->
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">!!Nombre Usuario Loggeado¡¡</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<!-- Menu Body -->
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Perfil
</div>
<div class="pull-right">
Cerrar sesión
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" ng-controller="navController">
<li class="header">Menú</li>
<li class="active treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Personal Médico</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li ng-class="{active: isActive('/admin/geriatras')}"><i class="fa fa-circle-o"></i>Geriatras</li>
<li ng-class="{active: isActive('/admin/medicos')}"><i class="fa fa-circle-o"></i>Médicos</li>
<li ng-class="{active: isActive('/admin/enfermeros')}"><i class="fa fa-circle-o"></i>Enfermeros</li>
</ul>
</li>
<li ng-class="{active: isActive('/admin/pacientes')}"><i class="fa fa-book"></i> <span>Pacientes</span></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Panel de Control</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<div ng-view="">
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Equipo Fiucsa</b>
</div>
<strong>Tecnológico de Monterrey © 2016 Repositorio.</strong>
</footer>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!--Angular -->
<script type="text/javascript" src="/libs/angular/angular.js"></script>
<script type="text/javascript" src="/libs/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/public/js/app.js"></script>
<script src="/libs/angular-aria/angular-aria.js"></script>
<script src="/libs/angular-animate/angular-animate.js"></script>
<script src="/libs/angular-material/angular-material.js"></script>
<script src="/libs/angular-messages/angular-messages.js"></script>
<script type="text/javascript" src="/libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>
<script type="text/javascript" src="/public/js/controllers/cuestionarioController.js"></script>
<script type="text/javascript" src="/public/js/controllers/geriatrasController.js"></script>
<script type="text/javascript" src="/public/js/controllers/medicosController.js"></script>
<script type="text/javascript" src="/public/js/controllers/enfermerosController.js"></script>
<script type="text/javascript" src="/public/js/controllers/navController.js"></script>
<script type="text/javascript" src="/public/js/controllers/adminController.js"></script>
<!-- jQuery 2.1.4 -->
<script src="/libs/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 3.3.5 -->
<script src="/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/public/assets/dist/js/app.min.js"></script>
</body>
</html>
I just found my error and it was the arrow functions when I define my controllers. I think we can only use arrow functions inside controllers not when you define it
theres a little explanation here:
Are ES6 arrow functions incompatible with Angular?
I am using mobile angular ui. I want to hide side for particular page.
http://mobileangularui.com/
This side bar by default put in every page. But i don't want this side bar in home page. Mobile angular ui have one index.html file. One sidebar.html import in index file. And every page import in index file. But when come home.html file will come then sidebar should be hide.
Index.html
<html>
<head>
<meta charset="utf-8" />
<title>y</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<link rel="stylesheet" href="css/app.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<!-- inject:js -->
<script src="js/app.min.js"></script>
</head>
<style>
.color-winni-text
{
color:#c62222;
}
</style>
<body ng-app="Y" ng-controller="MainController">
<!-- Sidebars -->
<div ng-include="'sidebar.html'"
ui-track-as-search-param='true'
class="sidebar sidebar-left">
</div>
<div class="app">
<!-- Navbars -->
<div class="navbar navbar-app navbar-absolute-top">
<div class="navbar-brand navbar-brand-center " ui-yield-to="title">
<a class="color-winni-text" href="#/"> <strong>Winni Celebration</strong></a>
</div>
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
<i class="fa fa-bars color-winni-text fa-2x"></i>
</div>
</div>
<div class="btn-group pull-right" ui-yield-to="navbarAction">
<div ui-toggle="uiSidebarRight" class="btn">
<i class="fa fa-sign-in color-winni-text"></i>
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a style="color:#c62222" href="#/" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Home</a>
<a style="color:#c62222" href="#/my-winni" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> My Winni</a>
<a style="color:#c62222" href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a>
</div>
</div>
<!-- App Body -->
<div class="app-body background-color-body" style="background-color:white" ui-prevent-touchmove-defaults>
<div class="app-content scrollable-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<div ui-yield-to="modals"></div>
</body>
</html>
Screen Shot of index file
App.js File.
angular.module('Y', [
'ngRoute',
'mobile-angular-ui',
'Y.controllers.Main'
])
.config(function($routeProvider) {
$routeProvider.when('/', {templateUrl:'home.html', reloadOnSearch: null})
.when('/cityPage', {templateUrl:'cityPage.html', reloadOnSearch: false})
.when('/category-prduct', {templateUrl:'category-prduct.html', reloadOnSearch: false})
.when('/product-description', {templateUrl:'product-description.html', reloadOnSearch: false})
.when('/my-winni', {templateUrl:'my-winni.html', reloadOnSearch: false})
.when('/gift-box', {templateUrl:'gift-box.html', reloadOnSearch: false});
});
I want to hide sidebar only on home.html page.
Try wrapping your <div ng-include="'sidebar.html'"> element in an ngIf directive that examines the location path.
You can inject the $location service into your MainController and expose the value of $location.path() to the template.
Example: $scope.currentPath = $location.path()
Then use:
<div ng-if="currentPath !== ''">
<div ng-include="'sidebar.html'">`
Also, use the controllerAs syntax instead of $scope.