Uncaught ReferenceError : angular is not defined (Using testem) - javascript

Error is found in line 1 of 2 files:
- controllers.js
- app.js
Which is attached below together with html.
The app appears when I start up local server but I am unable to login or signup by clicking the sign up button after entering my details. Is it a 404 error?
I also tried to add these 2 lines into the index.html file (I thought was some items I didnt define) but did not work.
index.html file
<!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">
*<!-- ionic/angularjs js -->*
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script> <!-- firebase -->
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script> <!-- angularfire -->
<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script> <!-- firebase-simple-login -->
*<!-- cordova script (this will be a 404 during development) -->*
<script src="cordova.js"></script>
<!-- app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="bucketList" animation="slide-left-right-ios7">
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-chevron-left">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
controllers.js file (Error in first line)
angular.module('bucketList.controllers', [])
.controller('SignInCtrl', [
'$scope', '$rootScope', '$firebaseAuth', '$window',
app.js file (Error in first line)
angular.module('bucketList', ['ionic', 'firebase', 'bucketList.controllers'])

The error says, you are attempt to use angular before load the script. I didn't see any reference of angularjs library in your index.html file.
So add a reference for angularjs before app.js and controller.js.

App.js
angular.module('bucketList', ['ionic', 'firebase'])
.run(function($ionicPlatform, $rootScope, $firebaseAuth, $firebase, $window, $ionicLoading) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
controller.js
angular.module('bucketList', [])
.controller('SignInCtrl', [
'$scope', '$rootScope', '$firebaseAuth', '$window',
function($scope, $rootScope, $firebaseAuth, $window) {
$rootScope.checkSession();
$scope.user = {
email: "",
password: ""

Related

Ionic: $urlRouterProvider.otherwise('/') not working

I am having some trouble with Angular navigation in Ionic framework.
I have set two pages (states) and the app is supposed to show the first state when it is opened. However, the $urlRouterProvider.otherwise is not working (I think that's the problem, at least).
I have followed the oficial documentation and some tutorials but nothing made it work. Can you please help me?
var app = angular.module('famousguess', ['ionic', 'ui.router'])
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('welcome', {
url: '/',
templateUrl: 'views/welcome.html',
controller: 'WelcomeCtrl'
})
.state('grid', {
url: '/grid/:gridid',
templateUrl: 'views/grid.html',
controller: 'GridCtrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller('WelcomeCtrl', function ($scope, $state) {
}
app.controller('GridCtrl', function ($scope, $stateParams, $ionicHistory) {
}
<!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>Famous Guess</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>
</head>
<body ng-app="famousguess" id="wrapper">
<ion-nav-bar class="bar-energized">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
And here goes my template (views/home.html)
<ion-view view-title="welcome">
<ion-content scroll="false" class="box-energized">
<h1 id="logo">Famous Guess?</h1>
<a nav-transition="android" href="#/grid/1">
<button class="button button-block button-royal">
Start!
</button>
</a>
<button class="button icon-left button-block button-positive ion-social-facebook">
Connect to Facebook
</button>
</ion-content>
</ion-view>
Thanks!
i think you have used a wrong template in config
$stateProvider
.state('welcome', {
url: '/',
templateUrl: 'views/home.html',
controller: 'WelcomeCtrl'
})
.state('grid', {
url: '/grid/:gridid',
templateUrl: 'views/grid.html',
controller: 'GridCtrl'
});
$urlRouterProvider.otherwise('/');
});
i think the above will work !! you have loaded the wrong template file in tempalateurl

TypeError: undefined is not a function while returning resource

i googled it before asking here but no luck.
I am trying to invoke rest service using ngresource but app UI is not launching because it is breaking with
05-13 02:16:08.011 2402-2402/com.app.mvalt I/chromium: [INFO:CONSOLE(25642)] "TypeError: undefined is not a function
at Object.<anonymous> (file:///android_asset/www/js/services.js:8:9)
at Object.invoke (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17762:17)
at Object.enforcedReturnValue [as $get] (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17615:37)
at Object.invoke (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17762:17)
at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17580:37
at getService (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17721:39)
at Object.invoke (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:17753:13)
at extend.instance (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:22311:34)
at nodeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:21421:36)
at compositeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:20853:13)", source: file:///android_asset/www/lib/ionic/js/ionic.bundle.js (25642)
Here is my service.js:
angular.module('app.services', ['ngResource'])
.factory('BlankFactory', [function(){
}])
.factory('User', [function($resource){
return $resource('http://1.2.3.4:1234/UASAPI/userRegistration');
}])
.service('BlankService', [function(){
}]);
Here is my 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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular-resource.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding{
padding-top:20px;
}
.manual-remove-top-padding{
padding-top:0px;
}
.manual-remove-top-padding .scroll{
padding-top:0px !important;
}
</style>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable bar-balanced">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
I donwloaded angular-resource.min.js from http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js
Here is my app.js
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
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();
}
});
})
Could someone help in what i am missing.
User factory has problem, you haven't injected $resource object before using it in factory function.
.factory('User', ['$resource', //<-- $resource dependency was missing here.
function($resource){
return $resource('http://1.2.3.4:1234/UASAPI/userRegistration');
}
])
Also make sure, angular file version & ng-resource version should
not get mismatch.

Angular UI Router not rendering nested views and links

I've been learning Angular and now that I have a while learning it I decide to make an small app to test my knowledge, but the links on my app and the nested views doesn't seem to work for a reason I can't understand yet, I've using angular-ui-router because it's pretty awesome to handle routes and that sort of things.
the problem: I'm trying to load the templates of the routes into the div that contains the ui-view but it doesn't work.
I have this three js files:
first config.route.js
'use strict';
angular.module('weekobApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: {
'header': {
templateUrl : 'app/layout/header.html',
},
'content': {
templateUrl : 'app/layout/dashboard.html',
controller : 'DashboardController'
},
'footer': {
templateUrl : 'app/layout/footer.html',
}
}
});
});
dashboard.js
'use strict';
angular.module('weekobApp', [])
.controller('DashboardController', ['$scope', function ($scope) {
$scope.myname = "Dashboard";
}]);
and finally the html file:
<!DOCTYPE html>
<html ng-app="weekobApp">
<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>Title</title>
<!-- build:css content/styles/style.css -->
<link href="content/styles/style.css" rel="stylesheet" />
<!-- endbuild -->
</head>
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- build:js app/main.js -->
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../../bower_components/angular-resource/angular-resource.min.js"></script>
<!-- Dashboard modules -->
<script src="app/dashboard/config.route.js"></script>
<script src="app/dashboard/dashboard.js"></script>
<!-- endbuild -->
</body>
</html>
You should only declare the module dependency list once:
angular.module('weekobApp', ['ui.router']);
angular.module('weekobApp')
.config(function($stateProvider, $urlRouterProvider) {
angular.module('weekobApp')
.controller('DashboardController', ['$scope', function ($scope) {
The first line creates the module. The other two add components to the module. Your code was overwriting the previous component.

Ionic with angular js. the button not linked to another html

Can someone help me on how to fix this?
Seems like I can't get my button to link to another page.
I did some research and try to follow the demo, but it's dead end.
I don't know which part I should fix.
register.html
<!DOCTYPE html>
<html ng-app="starter">
<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>
</head>
<body ng-app="starter">
<ion-pane>
<ion-view view-title="Register">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="RegistrationCtrl" class="content">
<button class="button button-positive" ng-click="goToNextState()">Go to next state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
after.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>
</head>
<body ng-app="starter">
<ion-pane>
<ion-view view-title="After">
<ion-content>
<div class="bar bar-header bar-stable">
<h1 class="title">Register</h1>
</div>
<div ng-controller="AfterCtrl" class="content">
<button class="button button-positive" ng-click="goToPrevState()">Go to prev state (page)</button>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/',
templateUrl: 'register.html',
controller: 'RegistrationCtrl'
})
.state('after', {
url: 'after',
templateUrl: 'after.html',
controller: 'AfterCtrl'
});
$urlRouterProvider.otherwise('/');
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
I could not find AfterCtrl controller in your app.js
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
app.controller("RegistrationCtrl", function($scope, $location){
$scope.goToNextState = function() {
$location.path("/after");
};
});
Also i would suggest to use $state.go("register") and $state.go("after") and also do not forget to inject $state
function($scope, $state)
I ran into a similar issue recently. I found that using
<button class="button button-positive" ui-sref="STATENAME" >Go to prev state (page)</button>
fixed my issue.

Templates not loading in angularJS and Ionic

I set up a basic ionic app with av few views and controllers. When I load the startpage I ALWAYS end up in $urlRouterProvider.otherwise('views/error.html'); line. And no templates gets loaded either.. even for the error.html.
I have no idea why. I get no js errors in the console or anything. Any ideas?
This is my code:
the 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/controllers/LoginController.js"></script>
<script src="js/controllers/MainMenuController.js"></script>
<script src="js/controllers/SettingsController.js"></script>
</head>
<body ng-app="iou">
<ion-nav-view></ion-nav-view>
</body>
</html>
the javascript
var app = angular.module('iou', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'views/login.html',
controller: 'LoginController'
});
$stateProvider.state('mainmenu', {
url: '/mainmenu',
templateUrl: 'views/mainmenu.html',
controller: 'MainMenuController'
});
$stateProvider.state('settings', {
url: '/settings',
templateUrl: 'views/settings.html',
controller: 'SettingsController'
});
$urlRouterProvider.otherwise('views/error.html'); // I always end up here
});
errors.html is in your views folder and has some markup to render? $urlRouteProvider.otherwise('directory/file.html') will always load first when your app starts up.
So the solution for me was to change:
$urlRouterProvider.otherwise('views/error.html');
to:
$urlRouterProvider.otherwise('/');

Categories