AngularJS controller not a function in IBM MobileFirst is what I am getting an error. I went through many similar questions being ask on Stack Overflow but nothing helped me.
Error Print Screen
// **************** app.js ***************
var app = angular.module('myApp',['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
});
// **************** login.js ***************
app.controller('loginController',function($scope){
$scope.login = function(){
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
console.log($scope.userName, $scope.password);
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
WL.Client.invokeProcedure($scope.loginProcedure, function(){
onSuccess: loginSuccess,
onFailure: loginFailure
});
$scope.loginSuccess = function()
{
alert('success');
};
$scope.loginFailure = function()
{
alert('failed');
};
}
});
<!-- INDEX.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AB</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body ng-app="myApp">
<!--application UI goes here-->
<div id="view" ui-view></div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="library/jquery.min.js"></script>
<script src="library/angular.1.4.9.js"></script>
<script src="library/angular-ui-router.min.js"></script>
<script src="library/bootstrap.min.js"></script>
<script src="controller/app.js"></script>
<script src="controller/login.js"></script>
</body>
</html>
<!-- Login.html -->
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
<!-- Login Box Start -->
<div class="panel panel-primary">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-group" name="lgForm">
<input type="text" class="form-control" id="usrName" ng-modal="usrName" required />
<input type="password" class="form-control" id="pass" ng-modal="pass" required />
<input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" />
</form>
</div>
</div>
<!-- Login Box End -->
<!-- error Modal start -->
<div class="modal" role="modal" id="errorPopup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Error</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<!-- error Modal End -->
</div>
You are specifying loginController in your html as well as in your route configuration. I'm not certain that this is the cause of the problem, but doing both is unnecessary. Remove one of them.
In other words, eliminate controller: 'loginController' from below
$stateProvider
.state('login',{
url:'/login',
templateUrl:'view/login.html',
controller:'loginController'
});
or eliminate: ng-controller="loginController" from:
<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">
Also, unrelated, but I doubt that these two lines:
$scope.userName = angular.element('#usrName').val();
$scope.password = angular.element('#pass').val();
do what you think. The purpose of angular.element is to wrap elements as jquery elements. I suspect you want to use document.getElementById here to get references to the items. However, you're using ngModel here, so none of this should be necessary if you use consistent spelling. (In one place you have userName and in another usrName.)
issue was wrong spelling of adapter
/* wrong one */
$scope.loginProcedure ={
procedure:'login',
adaptor:'SQL',
parameters:[$scope.userName, $scope.password]
};
/*write one */
$scope.loginProcedure ={
procedure:'login',
adapter:'SQL',
parameters:[$scope.userName, $scope.password]
};
Related
Having issues getting a simple filter to work for an album selection app i'm building for experience using jsonplaceholderdata. I tried to set ng-model to an expression and filtering by that expression but nothing changes when i enter text into my input bar. Unsure as to what I'm missing.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="album.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="album.css">
</head>
<body>
<div class="bar">
<input type="text" class="search" ng-model="q" placeholder="Enter your search terms" />
<button ng-click="search(q)">Search</button>
</div>
<div ng-app="myApp" ng-controller="AlbumCtrl">
<div ng-click="showme = !showme" ng-init="count=0" ng-repeat="album in albumData|filter:q" id="thumbWrapper">
<h1>{{album.id}}</h1>
<p>{{album.title}}</p>
<div id="thumbList"ng-show="showme"class="albumContent">
<ul ng-controller="PhotoCtrl" id="thumbList">
<li ng-repeat="photo in photoData" ng-if="album.userId == photo.albumId">
<img ng-src={{photo.url}}>
</li>
</ul>
</div>
</div>
</div>
This is my angular js code:
var app = angular.module('myApp', []);
app.controller('AlbumCtrl', function ($scope, $http) {
$http.get("http://jsonplaceholder.typicode.com/albums").then(function(response) {
$scope.albumData = response.data;
console.log($scope.albumData);
});
});
app.controller('PhotoCtrl', function($scope, $http) {
$http.get("http://jsonplaceholder.typicode.com/photos").then(function(response) {
$scope.photoData = response.data;
// console.log($scope.photoData);
});
});
Any help is much appreciated.
You don't need to use a controller function. Because your q is already on the $scope, it will work as soon as you start typing in the input box.
Your controller is outside of the scope of the 'q' scope variable though.
I have a html file
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Registration</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/lib/angular/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/registration.js"></script>
</head>
<body>
<header></header>
<div class="page">
<main class="cf" ng-view>
{{message}}</main>
</div>
</body>
</html>
Then I have app.js where i implement route providers.
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/login',{
templateUrl:'views/login.html',
controller:'RegistrationController'
}).
when('/register',{
templateUrl: 'views/register.html',
controller: 'RegistrationController'
}).
when('/success',{
templateUrl: 'views/success.html',
controller: 'SuccessController'
}).
otherwise({
redirectTo:'/login'
});
}]);
Then I have a registration.js where I implement the controller
myApp.controller('RegistrationController',['$scope',function($scope){
$scope.message="Welcome to my app";
}]);
this is the view file I am referring to:
<section class="card login">
<form name="myform"
novalidate>
<div class="textintro">
<h1>Hi there!</h1>
<p>Log-in to access the awesomeness!</p>
<p>{{message}}</p>
</div>
<fieldset>
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
</fieldset>
<button type="submit" class="btn">Login</button>
<p>or register</p>
</form>
</section>
The {{message}} is displayed as it is when I run the website !! I checked the console it says failed to load the module, what might be my mistake here or how can I solve this
Is your controller in the same file as the route config or it is separate file?
If it is in an extra file you have to replace
myApp.controller('RegistrationController',['$scope',function($scope){
with
angular.module('myApp').controller('RegistrationController',['$scope',function($scope){
If it is in the same file, please post the error message here
My angular app works locally (html only) but fails once deployed onto the server. No console error. No 404 errors. Basically...the UI doesn't render. The batarang extension says "module was created but never loaded"...yet when I run my app on localhost it doesn't show that message in Batarang.
I've researched the other similar issues with that issue but none of the solutions match my issue where it only works on localhost and not the server...
var ll_app = angular.module("liveLetter", []);
ll_app.service("ExportService", function()
{
this.export = function(format)
{
//code
};
});
ll_app.controller("MenuController", ["$scope", "$rootScope", "$sce", "ExportService", function($scope, $rootScope, $sce, ExportService)
{
//code
}]);
ll_app.controller("DraftController", ["$scope", "$rootScope", function($scope, $rootScope)
{
//code
}]);
Html....
<!DOCTYPE html>
<html>
<head>
<title>
Live Letter
</title>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css">
<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="./css/bootstrap-dialog.min.css" />
<link rel="stylesheet" type="text/css" href="./css/app.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="./js/app_kwikies.js"></script>
<script src="./js/angular/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="./js/bootstrap-dialog.min.js"></script>
<script src="./js/app.js"></script>
</head>
<body ng-app="liveLetter">
<div id="main_nav" ng-controller="MenuController" ng-class="loading ? 'default' : 'half_width'">
<p id="header_txt">{{ shuffled_text }}</p>
<div id="menu_buttons" ng-show="!loading">
<div class="menu_icon" ng-repeat="icon in icons">
<span class="symbola" ng-bind-html="icon.html" title="{{icon.title}}" ng-class="active_key === icon.key ? 'active_icon' : 'default_icon'" ng-click="icon.click_fn($event)"></span>
</div>
</div>
<span id="email" ng-show="!loading">rnirnber#gmail.com</span>
</div>
<div ng-controller="DraftController">
<div id="editor" ng-if="editable" contenteditable="true" ng-style="text_color_css">
{{content}}
</div>
<div id="rgb_inputs" ng-if="editable" style="display: block">
<input value="{{red}}" ng-blur="update_rgb(0, $event)" type="number" step="5" min="0" max="255" />
<input value="{{green}}" ng-blur="update_rgb(1, $event)" type="number" step="5" min="0" max="255"/>
<input value="{{blue}}" ng-blur="update_rgb(2, $event)" type="number" step="5" min="0" max="255" />
</div>
</div>
</body>
</html>
I am trying to learn angular. Can someone tell me why home.html does not show on my angular app? I have all required angular files included. No error happens when I start the app, just a blank screen. The jquery, bootstrap, and fontawesome were previously working, so no issues there. I can add a debugger statement and see that app.js is called, but home view does not show.
Folder Structure in my solution:
Root:
/index.html
/home.html
App Folder:
app/angular-route.js
app/app.js
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Learning Angular</title>
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="libs/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="libs/angular/angular.min.js"></script>
<script src="app/angular-route.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-app="myApp">
<div class="container">
<div ng-view></div>
</div> <!-- /container -->
</body>
<script src="libs/jquery/jquery-2.1.4.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
</html>
home.html
<p>
Welcome to Home {{user.firstName}}
</p>
<div class="row">
<div class="col-md-6">
<form class="registrationForm">
<h2 class="form-signin-heading faArrowIcon">Please sign in</h2>
<label for="inputEmail">Email address</label>
<input type="email" id="inputEmail" class="form-control validateIt" placeholder="Email address" required autofocus>
<label for="inputPassword">Password</label>
<input type="password" id="inputPassword" class="form-control validateIt" placeholder="Password" required>
<div style="padding: 0; margin: 0;" class="col-md-3 pull-right">
<button id="submitButton" class="btn btn-lg btn-primary btn-block" type="submit" disabled>Sign in</button>
</div>
</form>
</div>
</div>
app.js
var sampleApp = angular.module('myApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/home.html'
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
you need to specify a route for home and set it as your main route.
here's an example:
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
}).
when('/route2', {
templateUrl: 'route2.html',
}).
otherwise({
redirectTo: '/'
});
});
index.html
<body ng-controller="MainCtrl">
<div>
home
route2
</div>
<div ng-view></div>
</body>
and a working plnkr
my code seems ok but i cannot view the html using angularjs (exercise "reader" in codecademy course")
according to my knowledge seems to be working but I am beginner so likely i have to do some tweaking
here my codes
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,900' rel='stylesheet' type='text/css'>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="ReaderApp">
<div class="header">
<div class="container"> Reader </div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
</html>
the service
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
the view (routed)
<div class="bookshelf row">
<!-- TODO: Loop through myBooks and display each one with this HTML -->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}"> <img ng-src="{{ book.cover }}" />
<h3 class="title">{{ book.title }} </h3>
<p class="author"> {{ book.author }} </p>
</a>
</div>
</div>
controller
app.controller('BookshelfController', ['$scope','books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
and the module that create the app
var app = angular.module('ReaderApp', ['ngRoute ']);
app.config(function ($routeProvider) {
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirectTo: '/books'
});
});
thanks
Paolo
Typo in module dependency array.
var app = angular.module('ReaderApp', ['ngRoute ']);
^ remove this space!