I am learning angularJS and i am using the book, "Learning Web Development with Bootstrap and AngularJs" and i am trying to create a ng-click functionality to a button. but nothing happens when i click it. this is my controller.js...
function AppCtrl($scope){
$scope.clickHandler = function(){
window.alert('Clicked!');
};
}
this is my view...
<html ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<title>Contacts Manager</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contacts Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="active">Browse</li>
<li>Add Contact</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search">
</form>
</div>
</nav>
<div class="col-sm-8">
<button ng-click="clickHandler()">Click Me</button>
</div>
</body>
</html>
what am i doing wrong???
You need to create a module, and make the controller on the module. You then need to tell angular to bootstrap the module as the root of the application (using ng-app directive). I would reccomend taking another look at the exaple you are following.
Here's a short snippet setting up a button with a click-handler:
angular.module('myApp', [])
.controller('AppCtrl', function($scope){
$scope.clickHandler = function(){
window.alert('Clicked!');
};
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<button ng-click="clickHandler()">Click Me</button>
</div>
Inject $window, and call it. You have not dome that
Related
I'm trying learn angular by using multiple modules for a html page. One module for routing and the others for displaying content.
For example, here i have 3 modules in app.js. I have routeApp for the routes, comentUpp for displaying content. and combineApp to combine everything.
var routeApp = angular.module('routeApp',['ngRoute']);
routeApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'views/comment.php',
});
});
var commentUpp = angular.module('commentUpp',['mainCtrl', 'commentService']);
var combineApp = angular.module('combineApp',['routeApp','commentUpp'])
and in index.php i have it like this:
<!DOCTYPE html>
<html ng-app="combineApp" >
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"> </script>
<script src="js/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body >
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" >
<div ng-view></div>
</div>
</body>
</html>
As you can see i'm trying to inject comment.php into index.php.
below is my comment.php
<html>
<div ng-controller="mainController">
<div class="col-md-8 col-md-offset-2">
<!-- PAGE TITLE =============================================== -->
<div class="page-header">
<h2>Laravel and Angular Single Page Application</h2>
<h4>Commenting System</h4>
</div>
<!-- NEW COMMENT FORM =============================================== -->
<form ng-submit="submitComment()"> <!-- ng-submit will disable the default form action and use our function -->
<!-- AUTHOR -->
<div class="form-group">
<input type="text" class="form-control input-sm" name="author" ng-model="commentData.author" placeholder="Name">
</div>
<!-- COMMENT TEXT -->
<div class="form-group">
<input type="text" class="form-control input-lg" name="comment" ng-model="commentData.text" placeholder="Say what you have to say">
</div>
<!-- SUBMIT BUTTON -->
<div class="form-group text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
<!-- LOADING ICON =============================================== -->
<!-- show loading icon if the loading variable is set to true -->
<p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>
<div class="comment" ng-hide="loading" ng-repeat="comment in comments">
<h3>Comment #{{ comment.id }} <small>by {{ comment.author }}</h3>
<p>{{ comment.text }}</p>
<p>Delete</p>
</div>
</div>
</div>
</html>
for some reason it shows
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=combineApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.3%2Fangular.min.js%3A22%3A179)
any idea on how to fix this? thanks
You don't need a separate Module to have mainCtrl and commentService injected, you need to inject the commentService to your mainCtrl,
var commentUpp = angular.module('commentUpp',[]);
then
var combineApp = angular.module('combineApp',['routeApp','commentUpp'])
I'm working on a NodeJS Project that uses Sails.js as a framework.
What I'm trying to accomplish is a permissions system where the permissions per group are set by Check Boxes, I'm using a typical form with AngularJS.
When I click my "Sumbit" button it throws this error at my Browser's console:
angular.1.3.js:11594 TypeError: Cannot read property '0' of null
at $parseFunctionCall (angular.1.3.js:12333)
at callback (angular.1.3.js:22949)
at Scope.$eval (angular.1.3.js:14383)
at Scope.$apply (angular.1.3.js:14482)
at HTMLFormElement.<anonymous> (angular.1.3.js:22954)
at HTMLFormElement.eventHandler (angular.1.3.js:3011)(anonymous function) # angular.1.3.js:11594
Any help with this would be greatly appreciated.
EDIT Forgot the Code:
Here is the code that receives the information POSTed from the form
createGroup: function(req, res) {
Groups.create({
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
});
Here is the code for that catches the information and POSTs it to the create function
angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {
$scope.createGroup = {
loading: false
};
$scope.createGroupForm = function(){
// Set the loading state (i.e. show loading spinner)
$scope.createGroup.loading = true;
// Submit request to Sails.
$http.post('/createGroup', {
groupName: $scope.createGroupForm.groupName,
canViewUsers: $scope.createGroupForm.canViewUsers,
canEditUsers: $scope.createGroupForm.canEditUsers,
canPromoteToStaff: $scope.createGroupForm.canPromoteToStaff,
canViewNotes: $scope.createGroupForm.canViewNotes,
canEditPermissions: $scope.createGroupForm.canEditPermissions
})
.then(function onSuccess(sailsResponse){
window.location = '/groups';
})
.catch(function onError(sailsResponse){
// Handle known error type(s).
// If using sails-disk adpater -- Handle Duplicate Key
var groupAlreadyExists = sailsResponse.status == 409;
if (groupAlreadyExists) {
toastr.error('That group already exists', 'Error');
}
})
.finally(function eitherWay(){
$scope.createGroup.loading = false;
})
There are closing brackets but they aren't getting formatted correctly in the post.
And finally here is the code for the Form itself:
<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
<div class="row">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Insomnia eSports</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-users" aria-hidden="true"></i> Group Management </li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<form ng-submit="createGroupForm()" id="create-group-form" class="form-signin" name="createGroupForm">
<h2 class="form-signin-heading">Create an account</h2>
<div class="row">
<!-- Group Name -->
<label>Group Name</label>
<input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroupForm.name" ng-maxlength="25" required>
</div>
<!-- Can View Users -->
<label>View Users?</label>
<input type="checkbox" name="canViewUsers" ng-model="canViewUsers.value">
<!-- Can View Users -->
<label>Edit Users?</label>
<input type="checkbox" name="canEditUsers" ng-model="canEditUsers.value">
<!-- Can Promote To Staff -->
<label>Promote to Staff?</label>
<input type="checkbox" name="canPromoteToStaff" ng-model="canPromoteToStaff.value">
<!-- Can Promote To Staff -->
<label>Can view notes?</label>
<input type="checkbox" name="canViewNotes" ng-model="canViewNotes.value">
<!-- Can Promote To Staff -->
<label>Can edit permissions?</label>
<input type="checkbox" name="canEditPermissions" ng-model="canEditPermissions.value">
<br/>
<!-- Disable signup button until the form has no errors -->
<button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroupForm.$invalid">
<span ng-show="!createGroupForm.loading">Create Group</span>
<span class="overlord-loading-spinner fa fa-spinner" ng-show="createGroupForm.loading" ></span>
<span ng-show="createGroupForm.loading">Preparing your new group...</span>
</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
This was solved by me incorrectly using $scope on createGroupForm instead of just createGroup. The corrected code bit is below:
Instead of:
$scope.createGroupForm.canViewUsers
Use:
$scope.createGroup.canViewUsers
I'm setting up a page using angular.js and am using angular-ui-router and am running into a pretty basic issue which i can't seem to figure out. I have required the proper CDN's and I believe I have setup the angular correctly but am running into a an error:
> angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=portfolioApp&p1=Err…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.5%2Fangular.min.js%3A21%3A19)
My app.js is as follows:
> angular.module('portfolioApp', ['ui.router','ui.bootstrap']).config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider)
>{$urlRouterProvider.otherwise('/');
> $stateProvider
> .state('main', {
> url: '/',
> views: {
> '/': {
> templateUrl: '/views/main.html'
> }
> }
> }); $locationProvider.html5Mode({
> enabled: true,
> requireBase: false
> });
>}]);
my index.html file which is located within the main folder of my app:
<!DOCTYPE html>
<html>
<head>
<title>Tammer Galal</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script> -->
<script src="/js/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/style/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.css">
</head>
<body ng-app='portfolioApp' class="portfolioBody">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Github Repositories<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Repos</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div ui-view><div>
<!-- <footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to load a basic home partial which i have named partial-home.html which is within my public/views/partials directory path.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
</div>
<div class="col-xs-12 text-center">
<img class="img-rounded me" id="firstPicture" src="/img/me.jpg">
</div>
<div class="col-xs-12 text-center">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div>
<h3 class="siteHeader"><strong>Rock Paper Scissors!</strong></h3>
<img class="img-rounded" id="rpsPic" src="/img/rps.jpg">
<p class="siteDescrip">Play a game of Rock, Paper, Scissors! Created utilizing: <br /><strong>HTML, CSS3, Javascript, and jQuery</strong></p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<h3 class="siteHeader"><strong>Face Check</strong></h3>
<img class="img-rounded" id="faceCheckPic" src="/img/faceCheckPic.jpg">
<p class="siteDescrip">A facial and emotional recognition app Created utilizing: <br /><strong>HTML, CSS3, Javascript, jQuery, AJAX, and 3 APIs</strong><br /><strong>Co-Creators: Long Phan and Evan Bates</strong></p>
</div>
<div class="col-sm-4 col-md-4">
<h3 class="siteHeader"><strong>RU Fly?</strong></h3>
<img class="img-rounded" id="faceCheckPic" src="/img/rufly.jpg">
<p class="siteDescrip">RU Fly is a Rutgers Web Flyer, where students can add their favorite restaurants and leave reviews, so everyone knows the best place to eat! Adding upcoming events soon!<br /><strong>HTML, CSS3, Javascript, Node.js, MySQL, Sequelize, Express, JawsDB</strong></p>
</div>
</div>
</div>
I really cannot figure out what it is i have done wrong and am thinking about starting from scratch. Any help would be greatly appreciated.
I tried to reproduce this error. Everything works fine, but when I added 'ui.bootstrap' module in app 'portfolioApp', same error message displayed. Also, I am not seeing any reference for 'ui.bootstrap' module in your 'index.html'. Try to remove 'ui.bootstrap' or add reference of this module in 'index.html'.
When viewing at mobile screen resolution and you select the mobile nav icon bar, nothing happens. The desired effect is to have the same main navigation be used in mobile. I have ensured my data-targets (mobile_nav) match, and that markup looks good, but am new to Bootstrap. Any help appreciated!
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Loading Fonts Awesome CDN from boostrapcdn.com -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- add padding from best practices for fixed topbar navs -->
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobile_nav" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div class="collapse navbar-collapse" id="mobile_nav">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<form action="" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</header>
</body>
</html>
Bootstrap requires jQuery to work, you should include it before the Bootstrap JS in your HTML:
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I am having great difficulty finding out why my MVC Bootstrap Menus don't work on a page with the TinyMCE HTML editor (I'm using ASP.Net MVC, the TinyMCE plugin, but just showing the generated HTML below).
What I'm looking for, is some way of finding conflicts between TinyMCE and the script to make the drop down menus work in Twitter Boostrap.
It should show:
... when I hover over Properties, however, when I have the TinyMCE editor on the page, the hover drop down does not work:
My generated HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Edit</title>
<link href="/content/css?v=MUk2LfSuGyP1dibrYRROgQuE_irzerGsrA5KYasVO_U1" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" title="Flexible Group Booking System">Flexible Group Booking System</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Properties <b class='caret'></b></a>
<ul class="dropdown-menu">
<li>Property List</li>
</ul>
</li>
<li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Room Types <b class='caret'></b></a>
<ul class="dropdown-menu">
<li>Room Type List</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<form action="/email/Edit" method="post">
<input name="__RequestVerificationToken" type="hidden" value="mFXxdzlDHBlUyPia3kwCvb1" /><fieldset>
<div class="editor-label">
<label for="EmailBody">EmailBody</label>
</div>
<div class="editor-field">
<script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {
$(function () {
$('#EmailBody').tinymce({
// Location of TinyMCE script
script_url: '/Scripts/tinymce/tiny_mce.js',
theme: "advanced",
height: "300",
width: "790",
verify_html: false
});
});
})();
</script>
<textarea length="1418" cols="20" data-val="true" data-val-required="The EmailBody field is required." id="EmailBody" name="EmailBody" rows="2">
</textarea>
</div>
<p class="form-actions">
<input type="submit" value="Save" class="btn btn-primary" />
</p>
</fieldset>
</form>
</body>
</html>
There are no javascript errors showing in either IE or Chrome.
How else can I troubleshoot where the conflict is, and try to resolve it?
Thank you,
Mark
It looks like a possible conflict between 2 different versions of jQuery at the same time:
<script src="/Scripts/jquery-1.9.1.js"></script>
and TinyMCE's custom jquery library:
<script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
Try this solution to load TinyMCE BEFORE jQuery:
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
tinyMCE.init({ mode : "none"});
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('textarea.tinymce').tinymce({
theme : "simple",
script_url : 'tiny_mce/tiny_mce.js',
});
});
</script>