I'm trying to create simple navigation in my ionic application, but I get following error.
Argument 'LoginCtrl' is not a function, got undefined in the Ionic
What I did wrong?
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!— IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
—>
<!— ionic/angularjs js —>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-route.js"></script>
<script src="lib/angular-cookies.js"></script>
<script src="lib/ng-cordova/dist/ng-cordova.min.js"></script>
<!— cordova script (this will be a 404 during development) —>
<script src="cordova.js"></script>
<!— your app's js —>
<script src="js/app.js"></script>
<script src="js/restService/login.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js:
angular.module('starter', ['ionic',
'Authentication',
'ngCookies'])
.config(function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.otherwise('views/main')
$stateProvider.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'views/throbber.html'
})
})
.run(['$ionicPlatform', '$rootScope', '$location', '$cookieStore', '$http',
function($ionicPlatform, $rootScope, $location, $cookieStore, $http) {
$ionicPlatform.ready(function() {
try {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
} catch (ex) {
alert(ex);
}
});
}]);
angular.module('Authentication', []);
js/restService/login.js:
angular.module('Authentication')
.controller('LoginCtrl' [
function () {
alert('test');
}
]);
views/throbber.html:
<div>THROBBER</div>
your login.js is loaded after app.js.
When you are configuring routes, LoginCtrl controller is not available to angular, therefore it is "undefined"/"not a function".
You need to have the contents of login.js moved into app.js, or have your gulp/grunt task runner to combine the contents.
Related
I have set up a basic AngularJS page, and I've set up a couple of extra pages, a home page and a login page.
My index.html looks like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
</head>
<body ng-app="votee">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
View Login
View Home
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>
My app.js looks like this
var votee = angular.module('votee', ['ionic', 'ngRoute']);
votee.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
})
.otherwise({
redirectTo: '/login'
});
});
votee.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.Keyboard) {
window.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
votee.controller('loginController', function ($scope) {
});
votee.controller('homeController', function ($scope) {
})
The HTML pages for Home and Login are in the same directory as index.html, and when clicking on one of the links, it will say http://localhost:8100/#/login, which implies to me that the routing is at least partially correct, however the pages don't load.
Any suggestions would be greatly appreciated.
I am developing MEAN stack application. I have used external angular modules in an application. Due to the performance issue, I used the $ocLazyLoad module to load module wise dependency in an application. It works fine with a custom controller, directive, services which I have created and it loads lazily. But when I tried to use with external angular modules, it returns an error. Such as "reCAPTCHA" module of angular use for integrating google recaptcha in an application. it uses only in one place which is signup. Right now I required to include in index.html globally and it loads unnecessarily in every page of an application. So I don't know how to load external angular modules using $ocLazyLoad.
If I remove the dependency from index.html and add in $ocLazyLoadProvider then it throws me an error of an angular module dependency. Can anyone suggest me how to resolve this issue? I am not able to find out the solution of this issue. My main issue is that I don't know how to manage this external modules dependency using $ocLazyLoad. I tried to found from Internet but fails to manage in an application.
app.js
(function() {
'use strict';
}());
/*
* #param angular
*/
angular.
module('myApp', [
'ngResource',
'ngCookies',
'ngRoute',
'ngAnimate',
'ui.router',
'ngNotificationsBar',
'reCAPTCHA',
'oc.lazyLoad'
])
.config(
['reCAPTCHAProvider',
function(reCAPTCHAProvider) {
// required, please use site key:)
reCAPTCHAProvider.setPublicKey('my publick key');
// optional
reCAPTCHAProvider.setOptions({
theme: 'custom',
custom_theme_widget: 'recaptcha_widget' // The id of your widget element.
});
}
], ['notificationsConfigProvider',
function(notificationsConfigProvider) {
// auto hide
notificationsConfigProvider.setAutoHide(true);
}
], ['cookieProvider',
function(cookieProvider) {
}
],
.run(['$rootScope', '$http', 'UserService', function($rootScope, $http, UserService) {
}]);
app.routes.js
(function () {
function config($ocLazyLoadProvider, $stateProvider, $urlRouterProvider, $httpProvider, $provide, $locationProvider) {
$urlRouterProvider.otherwise('home');
$ocLazyLoadProvider.config({
debug: true, // For debugging 'true/false'
events: true, // For Event 'true/false'
cache: true,
series: true,
modules: [{
name: 'authenticationAndAuthorization',
files: [
"/modules/auth/controllers/auth.js"
]
}, {
name: 'userNotification',
files: [
"/modules/user/controllers/UserNotificationCtrl.js",
]
}, {
name: 'appSocket',
files: [
"/modules/common/services/HzSocket.js"
]
}]
});
$stateProvider
.state('app', {
url: '/',
abstract: true,
views: {
'globalHeaderLine1': {templateUrl: '/partials/headerLine1.html'},
},
resolve: {
content: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load(['userNotification'])
}]
}
})
/*
* Error page
*/
.state("app.error", {
url: "error/:code",
views: {
'content#': {templateUrl: '/partials/error.html', controller: 'ErrorCtrl', controllerAs: 'Error'}
}
})
.state("app.signin", {
url: "signin/:referer",
views: {
'globalHeaderLine1#': "",
'content#': {templateUrl: '/views/auth/signin.html', controller: 'SigninCtrl', controllerAs: 'Signin'}
}
})
.state("app.signup", {
url: "signup",
views: {
'globalHeaderLine1#': "",
'content#': {templateUrl: '/views/auth/signup.html', controller: 'SignupCtrl', controllerAs: 'Signup'}
}
})
}
angular
.module('myApp')
.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', '$provide', '$locationProvider', config])
}());
index.html
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
<html class="lt-ie9 lt-ie8" lang="en">
<![endif]-->
<!--[if IE 8]>
<html class="lt-ie9" lang="en">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html lang="en" ng-app="myApp" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="MobileOptimized" content="320" />
<meta name="description" content="MyApp" />
<meta http-equiv="Cache-control" content="public" />
<link rel="shortcut icon" href="/favicon.ico" />
<link data-require="bootstrap-css#3.0.1" data-semver="3.0.1" rel="stylesheet" href="/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/css/angular-csp.css" />
<link type="text/css" rel="stylesheet" href="/css/style.css" />
<link type="text/css" rel="stylesheet" href="/css/animation.css" />
<title>Welcome to MyApp</title>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</head>
<body>
<div id="site_loader"></div>
<!-- Header section -->
<header id="ccr-header" ui-view="globalHeaderLine1"></header>
<div class="clear"></div>
<div>
<div class="container_video" ui-view="homeVideoPage"></div>
<div ui-view="featureBar"></div>
<div ui-view="content"></div>
<footer class="clear" ui-view="footer"></footer>
</div>
<!-- Javascript Dependencies -->
<!-- Application-->
<script type="text/javascript" src="/vendor/utils/modernizr.custom.js"></script>
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/vendor/utils/lodash.min.js"></script>
<!-- angular core files -->
<script type="text/javascript" src="/vendor/angular/angular.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-cookies.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-sanitize.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-animate.js"></script>
<script type="text/javascript" src="/vendor/utils/ocLazyLoad.js"></script>
<!-- notificationbar -->
<script type="text/javascript" src="/vendor/angular/ngNotificationsBar.min.js"></script>
<!-- google recaptch -->
<script type="text/javascript" src="/vendor/angular/angular-re-captcha.min.js"></script>
<script type="text/javascript" src="/client/app.js"></script>
<script type="text/javascript" src="/client/app.routes.js"></script>
</body>
</html>
controller.js
I am following below way to developing a code in the controller.
(function () {
'use strict';
function SignupCtrl($http, $scope, $rootScope, $cookies, UserService, HzServices, HzSocket) {
// Signup code.
}
angular
.module('myApp')
.controller('SignupCtrl', ['$http', '$scope', '$rootScope', '$cookies', 'UserService', 'HzServices', 'HzSocket', SignupCtrl]);
}());
I used Angular for a while, but it has changed greatly since I last used it... I'm running into some issues, as I can't get the application to load at all.
When I try to load the individual webpages, I get just the basic HTML, but no error messages... [I'm loading it using the live preview option in Brackets]
The file hierarchy is as follows:
index.html
bower_components
js
-- app.js
-- ctrl
--- about.js
--- home.js
html
-- home.html
-- about.html
The files:
index.html
<!DOCTYPE HTML>
<html lang="en" np-app="stagerite" ng-controller="indexCtrl">
<head>
<!-- meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title/icon -->
<title>StageRite - {{ Page.title() }}</title>
<link rel="shortcut icon" href="img/" />
<!-- bower imports -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- local css -->
<!-- local js -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/ctrl/index.js"></script>
<script type="text/javascript" src="js/ctrl/home.js"></script>
<script type="text/javascript" src="js/ctrl/about.js"></script>
<!-- fonts -->
</head>
<body unresolved fullbleed>
<div ng-view></div>
</body>
</html>
app.js
/*global angular, console, alert*/
(function () {
'use strict';
/* Initialize application. */
var stagerite = angular.module('stagerite', [
'ngRoute'
]);
/* Set routes. */
stagerite.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/about', {
templateUrl: '../html/about.html',
controller: 'aboutCtrl'
}).
when('/home', {
templateUrl: '../html/home.html',
controller: 'homeCtrl'
}).
otherwise({
templateUrl: '../html/home.html',
controller: 'homeCtrl'
});
}]);
/* Set page titles. */
stagerite.factory('Page', function () {
var title = 'Home';
return {
title: function () {
return title;
},
setTitle: function (newTitle) {
title = newTitle;
}
};
});
}());
home.html
<div ng-controller="homeCtrl">
</div>
index.js
/*global angular, console, $, alert*/
/*jslint plusplus: true*/
(function () {
'use strict';
var indexCtrl = angular.module('stagerite', []);
indexCtrl.controller('indexCtrl', ['$scope', 'Page', function ($scope, Page) {
$scope.Page = Page;
}]);
}());
home.js
/*global angular, console, $, alert*/
/*jslint plusplus: true*/
(function () {
'use strict';
var homeCtrl = angular.module('stagerite', []);
homeCtrl.controller('homeCtrl', ['$scope', 'Page', function ($scope, Page) {
Page.setTitle('Home');
}]);
}());
I am new to angular and trying to create new login app, i want to maintain separate controller but when separate the controllers from controllers.js I am getting function got undefined error.
here is My code:
app.js
<!-- begin snippet: js hide: false -->
// MainCtrl.js
angular.module('myapp.controllers', [])
.controller('MainCtrl',
function($scope, $state) {
console.info("inside main ctrl");
});
//
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<!-- <script src="js/controllers.js"></script> -->
</head>
<body ng-app="starter" ng-controller = "MainCtrl">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
login.html
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
got this error:
ionic.bundle.js:26771 Error: [ng:areq] Argument 'LoginCtrl' is not a function, got undefined
http://errors.angularjs.org/1.5.3/ng/areq?p0=LoginCtrl&p1=not%20a%20function%2C%20got%20undefined
at ionic.bundle.js:13415
at assertArg (ionic.bundle.js:15191)
at assertArgFn (ionic.bundle.js:15201)
at $controller (ionic.bundle.js:23350)
at self.appendViewElement (ionic.bundle.js:59763)
at Object.switcher.render (ionic.bundle.js:57874)
at Object.switcher.init (ionic.bundle.js:57794)
at self.render (ionic.bundle.js:59623)
at self.register (ionic.bundle.js:59581)
at updateView (ionic.bundle.js:65261)
The code works as expected if I replace the myapp.controller with starter.controller in LoginCtrl.js and adding starter.controller along with myapp.controller in app.js.
angular.module('starter', ['ionic', 'myapp.controllers', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
cache:false,
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
// LoginCtrl.js
angular.module('starter.controllers',[])
.controller('LoginCtrl', function($scope, $state){
$scope.login = function() {
console.log("LOGIN user");
// $state.go('app.home')
}
});
My index.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body ng-app="app">
THIS WORKS NOW!
<div ng-view></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
And in app.js, I have:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'templates/home.html'
}).when('/dashboard', {
templateUrl: '/templates/dashboard.html'
}).otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
]);
So I run cordova build ios and it does it's magic to make an xcode project, which I then open and run. I see THIS WORKS NOW!, but I don't see the contents of my home.html file.
What am I doing wrong?
You need bootstrap angular:
app.js is fine!
but remove ng-app inside the tag <body> and start angular when the event onDeviceReady has been triggered :
index.js file:
var app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
document.addEventListener("deviceready", this.onDeviceReady, false);
},
onDeviceReady: function () {
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
}
};
normally that is all you need to do.