I have an angular app and I have implemented node into it later on.
Now when I try to run the node app I receive this kind of errors:
SyntaxError: expected expression, got '<'
jquery.min.js (regel 1)
ReferenceError: angular is not defined
angular.module('controllers').controller('ChallengeCtrl', ['$scope',
'auth',
This is my index.html file:
<!DOCTYPE html>
<html lang="en" ng-app="eva">
<head>
<meta charset="UTF-8" name="viewport" content="initial-scale=1"/>
<title>EVA - eet plantaardig!</title>
<link rel="shortcut icon" type="image/x-icon" href="../styles/favicon.ico">
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="../styles/public/js/lib/angular-material/angular-material.min.css">
<link rel="stylesheet" type="text/css" href="../styles/animate.min.css" >
<link rel="stylesheet" type="text/css" href="../styles/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/public/js/lib/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body layout="column" ng-controller="AppCtrl" layout-fill>
<!-- ANGULAR MATERIAL LOADING -->
<md-toolbar layout="row">
<div class="md-toolbar-tools ng-scope" ng-controller="NavCtrl as demo">
<md-button ng-click="toggleSidenav('left')" class="md-icon-button" ng-show="isLoggedIn()" aria-haspopup="true" aria-expanded="true"
aria-label="sidebar menu">
<!--<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>-->
<md-tooltip md-direction="bottom">Gebruikers Menu</md-tooltip>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</md-button>
<span>
<md-button md-no-ink href="#/index" aria-label="logo">
<img src="../styles/images/logo/48x48.png" alt="logo" >
</md-button>
</span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-fab-speed-dial md-open="demo.isOpen" md-direction="left" ng-class="md-fling"
ng-mouseenter="demo.isOpen = true" ng-mouseleave="demo.isOpen = false">
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn">
<md-tooltip md-direction="bottom">Menu</md-tooltip>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="Login" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/login">
<md-tooltip md-direction="bottom">Log in</md-tooltip>
<span class="glyphicon glyphicon-user"></span>
</md-button>
<md-button aria-label="Registreer" class="md-fab md-raised md-mini" ng-hide="isLoggedIn()" href="#/register">
<md-tooltip md-direction="bottom">Registreer</md-tooltip>
<span class="glyphicon glyphicon-plus"></span>
</md-button>
<md-button aria-label="Profiel" class="md-fab md-raised md-mini" ng-show="isLoggedIn()" href="#/profile">
<md-tooltip md-direction="bottom">Profiel</md-tooltip>
<span class="glyphicon glyphicon-user"></span>
</md-button>
<md-button aria-label="Logout" class="md-fab md-raised md-mini" ng-show="isLoggedIn()"
ng-click="logOut()">
<md-tooltip md-direction="bottom">Log out</md-tooltip>
<span class="glyphicon glyphicon-off"></span>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</md-toolbar>
<div layout="row" flex>
<!-- SIDENAV -->
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2 md-closed ng-scope ng-isolated-scope" md-component-id="left"
ui-view="sidebarLeft" ng-controller="NavCtrl" layout-fill>
<md-toolbar class="sidebar-left-toolbar ng-scope ">
<div class="md-toolbar-tools layout-align-start-center layout-row">
<div class="sidebar-left-logo">
<img src="../styles/images/logo/32x32.png" alt="logo" width="24px">
</div>
<span flex></span>
<div>
{{ currentUser() }}
</div>
</div>
</md-toolbar>
<div layout="row" flex id="contentSideNav">
<div layout="column" flex>
<md-content layout="column" flex class="md-padding">
<ul>
<li>
<md-button href="#/profile" layout-fill>
Profiel
</md-button>
</li>
<md-divider></md-divider>
<li>
<md-button href="#/challenges" layout-fill>
Challenges
</md-button>
</li>
<md-divider></md-divider>
</ul>
</md-content>
</div>
</div>
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<ui-view></ui-view>
</md-content>
</div>
</div>
<!-- homepage -->
<script type="text/ng-template" id="/home.html"></script>
<!-- loginpage -->
<script type="text/ng-template" id="/login.html" ng-controller="UserCtrl"></script>
<!-- register page -->
<script type="text/ng-template" id="/register.html" ng-controller="UserCtrl"></script>
<!-- challengespage -->
<script type="text/ng-template" id="/challenges.html" ng-controller="ChallengeCtrl"></script>
<!-- profiel page -->
<script type="text/ng-template" id="/profile.html" ng-controller="ProfileCtrl" ></script>
<!-- footer -->
<footer>
<div layout="row" layout-align="space-around center">
<div id="social" layout="row" layout-align="space-around center">
<i class="fa fa-facebook-f"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest-p"></i>
</div>
<div>
<p class="text-center">© Copyright 2015 - Projecten Groep 6</p>
</div>
</div>
</footer>
<!-- JS files integration -->
<script type="text/javascript" src="../styles/public/js/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-aria/angular-aria.min.js"></script>
<script type="text/javascript" src="../public/js/lib/angular-material/angular-material.min.js"></script>
<script type="text/javascript" src="../styles/angular/angular-messages.min.js"></script>
<script type="text/javascript" src="../styles/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/controllers/bootstrap.js"></script>
<script type="text/javascript" src="js/controllers/ChallengeController.js"></script>
<script type="text/javascript" src="js/controllers/AppController.js"></script>
<script type="text/javascript" src="js/controllers/MainController.js"></script>
<script type="text/javascript" src="js/controllers/NavController.js"></script>
<script type="text/javascript" src="js/controllers/UserController.js"></script>
<script type="text/javascript" src="js/controllers/ProfileController.js"></script>
<script type="text/javascript" src="js/factories/bootstrap.js"></script>
<script type="text/javascript" src="js/factories/AuthInterceptorFactory.js"></script>
<script type="text/javascript" src="js/factories/AuthFactory.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
At first I thought that the links to all the files were incorrect from the index.html, but they seem fine so I don't know what the problem is.
Additional info screen:
I think the issue is you have mention wrong reference path for angular libraries.
Like it should point to /js/lib rather than pointing to /styles(which has css)
<script type="text/javascript" src="../js/lib/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/lib/angular/angular-ui-router.min.js"></script>
Addtional note is you can't have ng-controller="ProfileCtrl" on script with type="text/ng-template", that wouldn't add controller on that template, you need to specify that ng-controller in the template.
Related
I've been scratching my head to make a Bootstrap Carousel with AngularJS inside a Node-Red Dashboard template node. I have even found several tips here, but the presented solutions are not working for me... here is the complete code inside Node-Red dashboard template: (any help is much appretiatted!)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Spotify UI</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<md-content>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab md-on-select="send({getFeatured: true})" ng-click="send({getFeatured: true})">
<md-tab-label><md-icon ng-md-icon icon="stars" style="fill: LIGHTGREEN"></md-icon></md-tab-label>
<md-tab-body>
<md-content>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="item in featured track by $index">
<img class="d-block w-100" src="{{item.images[0].url}}" alt="missing">
<p>{{$index}}</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</md-content>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg.payload.playlists.items) {
scope.featured = msg.payload.playlists.items;
};
});
})(scope);
</script>
</body>
</html>
Update 01.10.2018 - I finally managed to make it work after changing the class from class="item"to class="carousel-item".
I'm in trouble using together Thymeleaf and AngularJS. I try to sidenav menu with angular and I'm following this tutorial. I did same on the link but Thymeleaf throws this exception:
Caused by: org.xml.sax.SAXParseException: Attribute name "flex" associated with an element type "section" must be followed by the ' = ' character.
Here is the html:
<!DOCTYPE html>
<html ng-app="app" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="webjars/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="webjars/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-route.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-resource.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-animate.js"></script>
<script type="text/javascript" src="webjars/angularjs/1.5.5/angular-aria.js"></script>
<script type="text/javascript" src="webjars/angular-material/1.1.0/angular-material.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/tokenInterceptorService.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>
<script type="text/javascript" src="js/sidenav.js"></script>
<title>Title</title>
</head>
<body ng-controller="navigation">
<div ng-controller="SideNavCtrl" layout="column" style="height: 500px;" data-ng-cloak="">
<section layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop md-whiteframe="4">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Disabled Backdrop</h1>
</md-toolbar>
<md-content layout-margin>
<p>
This sidenav is not showing any backdrop, where users can click on it, to close the sidenav.
</p>
<md-button ng-click="toggleLeft()" class="md-accent">
Close this Sidenav
</md-button>
</md-content>
</md-sidenav>
<md-content flex layout-padding>
<div layout="column" layout-align="top center">
<p>
Developers can also disable the backdrop of the sidenav.<br/>
This will disable the functionality to click outside to close the sidenav.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-raised">
Toggle Sidenav
</md-button>
</div>
</div>
</md-content>
</section>
</div>
</html>
What is the problem? Does Theymeleaf want a parameter like flex="..."?
Yes, usually attributes like that are specified: flex="flex".
How do I center md-content, I used this layout-align but it's not working:
<md-content flex="75" layout-padding layout-align="center center">
<p align="justify">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</md-content>
Add layout-align="center center" and that should work,
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
<!-- Use dev version of Angular Material -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<md-content class="md-padding" layout-xs="column" layout="row" layout-align="center center">
<div flex-xs flex-gt-xs="40" layout="column" layout-align="center center">
<md-card class="card-40-center">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Sign Up</span>
</md-card-title-text>
</md-card-title>
</md-card>
</div>
</md-content>
<div layout="column" layout-fill flex style="max-height:100%">
</div>
</body>
</html>
Point is layout-align will not work without specifying layout='row'or layout='column' and make you have enough flex to see the space in between. Even writing just layout would default to row.
in app.js
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
in controller.js
angular.module('PoliticalOrg').controller('HomePageController',function( $scope ) {
$scope.Login= function () {
alert("s");
}
});
in index.html
<!DOCTYPE html>
<html lang="en" ng-app="PoliticalOrg">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta charset="utf-8">
<title>Organization</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="" name="description">
<meta content="" name="author">
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen">
<!-- BEGIN CORE CSS FRAMEWORK -->
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/boostrapv3/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css">
<!-- END CORE CSS FRAMEWORK -->
<script src="libs/vendor/angularJS/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="js/login/config.js"></script>
<script src="js/login/Controllers.js"></script>
<script type="js/login/services.js"></script>
<script type="js/globalmethods/login.js"></script>
<!-- BEGIN CSS TEMPLATE -->
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom-icon-set.css" rel="stylesheet" type="text/css">
<!-- END CSS TEMPLATE -->
<script src="js/app.js"></script>
<script src="js/Controllers.js"></script>
<script src="js/registration/config.js"></script>
<script src="js/registration/Controllers.js"></script>
<script src="js/login/config.js"></script>
<script src="js/login/Controllers.js"></script>
<script src="js/login/services.js"></script>
<script src="js/candidate/config.js"></script>
<script src="js/candidate/Controllers.js"></script>
<script src="js/candidate/services.js"></script>
<script src="js/submemberrequests/config.js"></script>
<script src="js/submemberrequests/Controllers.js"></script>
<script src="js/submemberrequests/services.js"></script>
<script src="js/messages/config.js"></script>
<script src="js/messages/Controllers.js"></script>
<script src="js/messages/services.js"></script>
<script src="js/users/config.js"></script>
<script src="js/users/Controllers.js"></script>
<script src="js/users/services.js"></script>
<script src="js/admin/config.js"></script>
<script src="js/admin/Controllers.js"></script>
<script src="js/admin/services.js"></script>
<script src="js/users/services.js"></script>
<script src="js/globalmethods/map.js"></script>
<script src="js/globalmethods/login.js"></script>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="boxed-layout breakpoint-1024 pace-done grey"><div class="pace pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>
<!-- BEGIN HEADER -->
<div class="container">
<div class="header navbar navbar-inverse ">
<!-- BEGIN TOP NAVIGATION BAR -->
<div class="container">
<div class="navbar-inner">
<div class="header-seperation" style="display: none; height: 61px;">
<ul class="nav pull-left notifcation-center" id="main-menu-toggle-wrapper" style="display:none">
<li class="dropdown"> <a id="main-menu-toggle" href="#main-menu" class=""> <div class="iconset top-menu-toggle-white"></div> </a> </li>
</ul>
<!-- BEGIN LOGO -->
<img src="assets/img/logo.png" class="logo" alt="" data-src="assets/img/logo.png" data-src-retina="assets/img/logo2x.png" width="106" height="21">
<!-- END LOGO -->
<ul class="nav pull-right notifcation-center">
<li class="dropdown" id="header_task_bar"> <div class="iconset top-home"></div> </li>
<li class="dropdown" id="header_inbox_bar"> <div class="iconset top-messages"></div> <span class="badge animated bounceIn" id="msgs-badge">2</span> </li>
<li class="dropdown" id="portrait-chat-toggler" style="display:none"> <div class="iconset top-chat-white "></div> </li>
</ul>
</div>
<!-- END RESPONSIVE MENU TOGGLER -->
<div class="header-quick-nav">
<!-- BEGIN TOP NAVIGATION MENU -->
<!-- END TOP NAVIGATION MENU -->
<!-- BEGIN CHAT TOGGLER -->
<div class="pull-right">
<div class="chat-toggler">
<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
<div class="user-details">
<div class="username">
<span class="bold">Login</span>
</div>
</div>
<div class="iconset top-down-arrow"></div>
</a>
<div id="notification-list" style="display:none">
<div style="width:300px">
<div class="grid-body no-border">
<div class="row-fluid">
<p>Enter your username and password to login</p>
<br>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="text" id="email" name="email" class="form-control" placeholder="someone#example.com">
<span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
</div>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="password" id="password" name="password" class="form-control" placeholder="your password">
<span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
<button type="button" class="btn btn-white btn-cons-md">Clear</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CHAT TOGGLER -->
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END TOP NAVIGATION BAR -->
</div>
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
<!-- BEGIN SIDEBAR -->
Scroll
<!-- END SIDEBAR -->
<!-- BEGIN PAGE CONTAINER-->
<div class="page-content condensed" data-height="679">
<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<div id="portlet-config" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"></button>
<h3>Widget Settings</h3>
</div>
<div class="modal-body"> Widget settings form goes here </div>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="page-title">
<h3>Home Page</h3>
</div>
</div>
</div>
<!-- BEGIN CHAT -->
<!-- END CHAT -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN CORE JS FRAMEWORK-->
<script src="assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/breakpoints.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-block-ui/jqueryblockui.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js" type="text/javascript"></script>
<!-- END CORE JS FRAMEWORK -->
<!-- BEGIN PAGE LEVEL JS -->
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-numberAnimate/jquery.animateNumbers.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN CORE TEMPLATE JS -->
<script src="assets/js/core.js" type="text/javascript"></script>
<script src="assets/js/chat.js" type="text/javascript"></script>
<script src="assets/js/demo.js" type="text/javascript"></script>
<!-- END CORE TEMPLATE JS -->
</div><div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"><div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div></div></body></html>
I mentioned app.js and controller.js in index.html. Here's the problem I am facing. When I click on the login button in index.html ng-click="Login()" function defined in HomePageController the Login function is not called.
This happened because the controller is not loaded correctly, you were trying to load the controller form the index.html page at the same time you included your scripts on index.html page.
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
so what you should do is breakdown your views using ui-view.
put the folowing in home.html file
<!-- BEGIN CHAT TOGGLER -->
<div class="pull-right">
<div class="chat-toggler">
<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
<div class="user-details">
<div class="username">
<span class="bold">Login</span>
</div>
</div>
<div class="iconset top-down-arrow"></div>
</a>
<div id="notification-list" style="display:none">
<div style="width:300px">
<div class="grid-body no-border">
<div class="row-fluid">
<p>Enter your username and password to login</p>
<br>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="text" id="email" name="email" class="form-control" placeholder="someone#example.com">
<span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
</div>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="password" id="password" name="password" class="form-control" placeholder="your password">
<span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
<button type="button" class="btn btn-white btn-cons-md">Clear</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CHAT TOGGLER -->
and add ui-view in the index.html instead of the above code. then change the route like this
$routeProvider.when('/', {
templateUrl : appUrl + '/home.html',
controller : 'HomePageController'
})
i.e you should initialize the index.html from the file not from the route
Follow this ui-router documentation.
I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});
I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.