Whenever I try to add more than 3 modules to the angular dependencies I get this output:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.vuelo due to:
Error: [$injector:nomod] Module 'starter.vuelo' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Any suggestions?
This is a factory.
I can not put more than one factory in a single module. And if I create a new module, I can not add it to dependencies because apparently there can not be more than 3.
For example:
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])
This works but I need the other module
angular.module('starter', ['ionic', 'starter.controllers','starter.services','starter.vuelo'])
Breaks all navigation
services.js
angular.module('starter.services',['starter.controllers'])
.factory('MenuService', function() {
var menu = [
{
id:0,
titulo:'Buscar Charters',
descripcion:'',
icono:'ion-search'
},
{
id:1,
titulo:'Escalas vacias',
descripcion:'',
icono:'ion-plane'
},
{
id:2,
titulo:'Mi perfil',
descripcion:'',
icono:'ion-briefcase'
},
{
id:3,
titulo:'Mensajes',
descripcion:'',
icono:'ion-chatboxes'
}];
return {
all: function() {
return menu;
},
get: function(itemId) {
// Simple index lookup
return menu[itemId];
}
}
});
vuelo.js
angular.module('starter.vuelo',[])
.factory('VueloService', function () {
var vuelos = [{
id:1,
salida:{'MAN','Aeropuerto Augusto Cesar Sandino'},
destino:{'SJO','Juan Santamaria Intl'},
escalas:[],
aeronave:1,
asientos:4,
precioNormal:4199,
precioMiembro:2819,
horario:'diurno',
tiempoEstimado:45,
fechaVuelo:'20/10/14',
hora:'11:00am'
}];
return{
all: function() {
return vuelos;
},
get: function (vueloId) {
return vuelos[vueloId];
}
}
});
controllers.js
angular.module('starter.controllers', [])
.controller('MenuCtrl', function($scope, MenuService) {
$scope.menus = MenuService.all();
})
.controller('MenuDetalleCtrl', function($scope, $stateParams, MenuService) {
$scope.menu = MenuService.get($stateParams.menuId);
})
.controller('CharterCtrl', function($scope, $stateParams, VueloService) {
$scope.vuelos = VueloService.all();
});
app.js
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.menu', {
url: '/menu',
views: {
'index-tab': {
templateUrl: 'templates/index-tab.html',
controller: 'MenuCtrl'
}
}
})
// .state('tab.opcion', {
// url: '/menu/:menuId',
// views: {
// 'index-tab': {
// templateUrl: 'templates/vuelosCharter.html',
// controller: 'MenuDetalleCtrl'
// }
// }
// })
.state('tab.charters', {
url: '/menu/0',
views: {
'index-tab': {
templateUrl: 'templates/buscarCharter.html',
controller: 'MenuDetalleCtrl'
}
}
})
.state('tab.escalas', {
url: '/menu/1',
views: {
'index-tab': {
templateUrl: 'templates/escalasVacias.html',
controller: 'CharterCtrl'
}
}
})
.state('tab.perfil', {
url: '/menu/2',
views: {
'index-tab': {
templateUrl: 'templates/datosCuenta.html',
controller: 'MenuDetalleCtrl'
}
}
})
.state('tab.mensajes', {
url: '/menu/3',
views: {
'index-tab': {
templateUrl: 'templates/buscarCharter.html',
controller: 'MenuDetalleCtrl'
}
}
})
.state('tab.cuenta', {
url: '/cuenta',
views: {
'cuenta-tab': {
templateUrl: 'templates/cuenta.html'
}
}
})
.state('tab.buscar', {
url: '/buscar',
views: {
'buscar-tab': {
templateUrl: 'templates/buscar.html'
}
}
});
// $urlRouterProvider
// .when('/menu/0',{
// templateUrl :'buscarCharter.html'
// })
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/menu');
});
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>Jets</title>
<!-- ionic css -->
<link href="lib/css/ionic.css" rel="stylesheet">
<!-- your app's css -->
<link href="css/app.css" rel="stylesheet">
<!-- ionic/angularjs scripts -->
<script src="lib/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's script -->
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/vuelo.js"></script>
</head>
<!--
'starter' is the name of this angular module (js/app.js)
-->
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views
Additional attributes set its look, ion-nav-bar animation and icons
Icons provided by Ionicons: http://ionicons.com/
-->
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon button-clear ion-ios7-arrow-back">
</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>
tabs.html
<ion-tabs class="tabs-icon-top tabs-default">
<ion-tab title="Menú" icon="icon ion-home" href="#/tab/menu">
<ion-nav-view name="index-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Mi cuenta" icon="icon ion-person" href="#/tab/cuenta">
<ion-nav-view name="cuenta-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Buscar" icon="icon ion-search" href="#/tab/buscar">
<ion-nav-view name="buscar-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
index-tab
<ion-view title="Menú">
<ion-content>
<ion-list>
<ion-item ng-repeat="menu in menus" type="item-text-wrap" href="#/tab/menu/{{menu.id}}" >
<i class="icon {{menu.icono}}"></i>
<p>{{menu.titulo}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
escalasVacias.html
<ion-view title='Escalas vacias'>
<ion-content>
<ion-list>
<ion-item ng-repeat="vuelo in vuelos">
{{vuelo.id}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Update:
I have tried what quicoli suggests, but it is not the case. I figured out that one object in the element was missing the keys, and throwed an Unexpected token exception.
salida:{'MAN','Aeropuerto Augusto Cesar Sandino'},
destino:{'SJO','Juan Santamaria Intl'},
salida:{'cod':'MAN','ap':'Aeropuerto Augusto Cesar Sandino'},
destino:{'cod':'SJO','ap':'Juan Santamaria Intl'},
Thanks
Friend,
I just got what's wrong... your vuelo.js has sintaxe erros.... below is the correct version:
angular.module('starter.vuelo',[])
.factory('VueloService', function () {
var vuelos = [{
id:1,
salida:{ id: 'MAN', name:'Aeropuerto Augusto Cesar Sandino'}, //<<--- here
destino:{id: 'SJO',name :'Juan Santamaria Intl'}, //<<--- and here
escalas:[],
aeronave:1,
asientos:4,
precioNormal:4199,
precioMiembro:2819,
horario:'diurno',
tiempoEstimado:45,
fechaVuelo:'20/10/14',
hora:'11:00am'
}];
return{
all: function() {
return vuelos;
},
get: function (vueloId) {
return vuelos[vueloId];
}
}
});
I'll give you a tip.... when you get a black screen when using angular/ionic, enter in chrome developer tools, I used that to see what was wrong.....
Now I now I could help you :)
your controller is dependent of 'starter.vuelo' module. See:
.controller('CharterCtrl', function($scope, $stateParams, VueloService) {
$scope.vuelos = VueloService.all();
});
So, when you declare you controller module, you should declare this dependency:
angular.module('starter.controllers', ['starter.vuelo'])
After doing that you can add back:
angular.module('starter', ['ionic', 'starter.controllers','starter.services','starter.vuelo'])
I hope I could help you. :)
Related
I have a problem regarding tabs in ionic. I'm creating a basic hotel app in Ionic v1 as a school project but I can't get my tabs or controller to work. The states aren't found, it immediately directs me to the link provided in $urlRouterProvider.otherwise. I've followed my teachers tabs example closely and the example found when starting a new tabs project in Ionic. I did get it to work briefly about two days ago but when I returned to the project today it was just blank (besides what i type in the index file nav-view).
This is my app.js file
angular.module('sthlmBB', ['ionic', 'sthlmBB.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("tabs", {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
})
.state("tabs.home", {
url: "/home",
views: {
"home-tab": {
templateUrl: "templates/home.html",
controller: "HotelCtrl"
}
}
})
.state("tabs.bookings", {
url: "/bookings",
views: {
"bookings-tab": {
templateUrl: "templates/bookings.html",
controller: "BookingsCtrl"
}
}
})
.state("tabs.events", {
url: "/events",
views: {
"events-tab": {
templateUrl: "templates/events.html",
controller: "EventsCtrl"
}
}
});
$urlRouterProvider.otherwise("/tabs/home");
})
controllers.js
angular.module('sthlmBB.controllers', [])
.controller('HotelCtrl', function($scope, $http, $state){
var url = 'link to php file';
$http.get(url).success(function(response){
$scope.rooms = response.data;
console.log('HotelCtrl Test')
console.log($state);
})
$scope.data = { };
$scope.submit = function(){
var url = 'link to another php file';
$http.post(url, $scope.data)
.then(function(response){
$scope.response = response;
console.log($scope.response);
});
}
})
In the index.html file I have link to both app.js and controllers.js in the head an ion-nav-view in the body.
tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="My Bookings" icon="ion-home"
href="#/tab/bookings">
<ion-nav-view name="bookings-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Events" icon="ion-home"
href="#/tab/events">
<ion-nav-view name="events-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
I'm fairly new to this so chances are there's just a rookie mistake in there somewhere. I would really appreciate any help I can get!
It was a typo in app.js under the first state where the url was '/tab' when it should be '/tabs'. facepalm
I have spend a whole week trying every method possible but I keep recreating the same error. I know that ngCordova.min.js must be above Cordova.js. But it seems nothing is loading my plugins. I visited ngCordova website and they explained that this error can be frustrating and hard to fix. Here are my files thank you
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.directives','app.services','ngCordova'])
.config(function($ionicConfigProvider, $sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist([ 'self','*://www.youtube.com/**', '*://player.vimeo.com/video/**']);
})
.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();
}
});
})
/*
This directive is used to disable the "drag to open" functionality of the Side-Menu
when you are dragging a Slider component.
*/
.directive('disableSideMenuDrag', ['$ionicSideMenuDelegate', '$rootScope', function($ionicSideMenuDelegate, $rootScope) {
return {
restrict: "A",
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
function stopDrag(){
$ionicSideMenuDelegate.canDragContent(false);
}
function allowDrag(){
$ionicSideMenuDelegate.canDragContent(true);
}
$rootScope.$on('$ionicSlides.slideChangeEnd', allowDrag);
$element.on('touchstart', stopDrag);
$element.on('touchend', allowDrag);
$element.on('mousedown', stopDrag);
$element.on('mouseup', allowDrag);
}]
};
}])
/*
This directive is used to open regular and dynamic href links inside of inappbrowser.
*/
.directive('hrefInappbrowser', function() {
return {
restrict: 'A',
replace: false,
transclude: false,
link: function(scope, element, attrs) {
var href = attrs['hrefInappbrowser'];
attrs.$observe('hrefInappbrowser', function(val){
href = val;
});
element.bind('click', function (event) {
window.open(href, '_system', 'location=yes');
event.preventDefault();
event.stopPropagation();
});
}
};
});
controller.js
angular.module('app.controllers', [])
.controller('menuCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
/*
.controller('scannerCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName $ionicPlatform.ready(function() {
function ($scope, $stateParams) {
}])
*/
.controller('scannerCtrl',['$scope','$stateParams', function($scope, $rootScope, $cordovaBarcodeScanner, $ionicPlatform,stateParams) {
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
alert(imageData.text);
console.log("Barcode Format -> " + imageData.format);
console.log("Cancelled -> " + imageData.cancelled);
}, function(error) {
console.log("An error happened -> " + error);
});
};
}])
.controller('qRCodeCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
.controller('profileCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
.controller('signupCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
.controller('loginCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
index.html (Template)
<!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>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.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">
-->
<link href="lib/ionic/css/ionic.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;
}
ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
margin-left:-10px;
margin-right:-10px;
}
ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
border-radius:0px;
border-left:0px;
border-right: 0px;
}
.show-list-numbers-and-dots ul{
list-style-type: disc;
padding-left:40px;
}
.show-list-numbers-and-dots ol{
list-style-type: decimal;
padding-left:40px;
}
</style>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.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>
<ion-side-menus enable-menu-with-back-views="false" data-componentid="side-menu21">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" id="side-menu21">
<ion-header-bar class="bar-stable">
<div class="title">Menu</div>
</ion-header-bar>
<ion-content ng-controller="menuCtrl" padding="false" class="side-menu-left has-header "></ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
</body>
</html>
scanner.html (Template)
<ion-view title="Scanner" id="page2">
<ion-content padding="true" class="has-header">
<div class="card">
<div class="item">
<button class="button button-block button-positive" ng-click="scanBarcode()">
<i class="icon ion-qr-scanner"></i>
Scan Now
</button>
</div>
</div>
</ion-content>
</ion-view>
Error satan wrote himself
0 801650 error Error: undefined is not an object (evaluating '$cordovaBarcodeScanner.scan')
scanBarcode#http://192.168.1.73:8100/js/controllers.js:26:31
fn
http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:65429:21
$apply#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:30500:30
http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:65428:19
defaultHandlerWrapper#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:16792:15
eventHandler#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:16780:23
dispatchEvent#[native code]
triggerMouseEvent#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:2953:20
tapClick#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:2942:20
tapMouseUp#http://192.168.1.73:8100/lib/ionic/js/ionic.bundle.js:3018:13
File Setup
You have a little bug on your code, you forgot to annotate $cordovaBarScaner.
.controller('scannerCtrl',['$scope','$rootScope','$cordovaBarcodeScanner', '$ionicPlatform', '$stateParams', function($scope, $rootScope, $cordovaBarcodeScanner, $ionicPlatform,stateParams) {
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
alert(imageData.text);
console.log("Barcode Format -> " + imageData.format);
console.log("Cancelled -> " + imageData.cancelled);
}, function(error) {
console.log("An error happened -> " + error);
});
};
}])
I'm using ui router and angular js so when I test the app, I just get a blank screen with an injector:module error. This is the link to the error:
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=myApp&p1=Error%3A%…dflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.11%2Fangular.min.js%3A17%3A350
Here is my app.js code:
var app = angular.module('myApp', ['ui.router', 'firebase']);
// Creating fireref instance
app.factory('FireRef', function($firebase){
var ref = new Firebase('https://dablog.firebaseio.com/');
return ref;
});
// Creating fireauth instance
app.factory('FireAuth', function($firebaseAuth){
var ref = new Firebase('https://dablog.firebaseio.com/');
return $firebaseAuth(ref);
});
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/site/home');
$stateProvider
.state('site', {
url: '/site',
templateUrl: 'partials/site.html'
})
.state('site.home', {
url: '/home',
templateUrl: 'partials/home.html'
})
.state('site.about', {
url: '/about',
templateUrl: 'partials/about.html'
})
.state('site.projects', {
url: '/projects',
templateUrl: 'partials/projects.html'
})
.state('site.blog', {
url: '/blog',
templateUrl: 'partials/blog.html'
// controller: 'BlogCtrl'
})
.state('site.login', {
url: '/login',
templateUrl: 'partials/login.html'
// controller: 'LoginCtrl'
})
.state('site.newpost', {
url: '/newpost',
templateUrl: 'partials/newpost.html',
// controller: 'NewPostCtrl'
})
.state('site', {
url: '/contact',
templateUrl: 'partials/contact.html'
});
})
Here is my blog.js file where it says "app is not defined":
'use strict'
app.controller('BlogCtrl', function($scope, $firebase, $firebaseArray, FireRef, $state){
var data = $firebaseArray(FireRef);
$scope.posts = data;
$scope.$watch('posts', function(newValue, oldValue){
$scope.posts = $sce.trustAsHtml(data);
})
$scope.login = function() {
$state.go('site.login');
}
$scope.newPost = function(){
$state.go('site.newPost');
}
});
Here is my index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.min.js"></script>
<!-- Angular UI Router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
<!-- Angular Animate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-animate.min.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
<!-- Controllers -->
<script src="js/controllers/BlogCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
<script src="js/controllers/NewPostCtrl.js"></script>
<!-- App -->
<script src="js/app.js"></script>
<!-- Styling -->
<link rel="stylsheet" type="text/css" href="css/styles.css">
<link rel="stylsheet" type="text/css" href="css/animate.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
</body>
</html>
You have declared 'use strict', so the app variable is undefined. You need to add
var app = angular.module('myApp');
to the top of BlogCtrl.js
Also, move <script src="js/app.js"></script> so that it's before the controller scripts in index.html. Because you load app.js after BlogCtrl.js, the module defined in app.js is not available in BlogCtrl.js.
I don't have enough reputation to comment, but I do want to add information: do not add var app = angular.module('myApp', []) in blog.js, because the brackets initialize a new app, so Angular will think you're creating a new app and will throw an error, since 'myApp' already exists. Be sure to use var app = angular.module('myApp') instead. Also be sure to link the the .js file in your index file after Angular has been loaded.
I think you need to include this line at the top of blog.js:
var app = angular.module('myApp');
Edited to remove the second parameter: , [].
i try to write an angular app using best code practice and i got to this:
index.html file contain :
<!DOCTYPE html>
<html ng-app='hrsApp'>
<head>
<title>Hrs app</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-controller="homeCtrl">
<div class='container'>
<div ng-view></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min.js"></script>
<script src='app.js'></script>
<script src='js/controllers/homeCtrl.js'></script>
<script src='js/controllers/avCtrl.js'></script>
</body>
</html>
Main file: app.js:
angular.module('home', []);
angular.module('av', []);
// Declare app level module which depends on filters, and services
angular.module('hrsApp', [
'hrsApp.controllers',
'hrsApp.services',
'hrsApp.directives',
'hrsApp.filters',
// AngularJS
'ngRoute',
// All modules are being loaded here but EMPTY - they will be filled with controllers and functionality
'home',
'av'
]);
// configure our routes
angular.module('hrsApp').config([
'$routeProvider',
function ($routeProvider) {
'use strict';
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
// route for the about page
.when('/av', {
templateUrl: 'views/av.html',
controller: 'avCtrl'
})
// route for the contact page
.otherwise({
redirectTo: '/'
});
}
]);
Then i added the home controller:
/*global angular*/
angular.module('home').controller('homeCtrl', [
'$scope',
function ($scope) {
'use strict';
$scope._init = function () {
$scope.message = "welcome to Home Ctrl";
};
// DESTRUCTOR
$scope.$on('$destroy', function () {
});
// Run constructor
$scope._init();
$scope.log('info', '[HomeCtrl] initialized');
}
]);
and home template that for the moment contain only a binding to the message variable:
<div>{{message}}</div>
When i try to run the application i got : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=hrsApp&p1=Error%3A%…googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.0%2Fangular.min.js%3A18%3A3) angular.js:38
Any idea what i do wrong?
From your code I can see that you have injected modules that you did not declared.
in order todo so you must add the following lines to your code:
angular.module('hrsApp.controllers',[]);
angular.module('hrsApp.services',[]);
angular.module('hrsApp.directives',[]);
angular.module('hrsApp.filters',[]);
i'm new in ionic ( just a little less in angularjs ) .
i'm trying to do a simple switch between two views:
HTML
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="intro"></ion-nav-view>
<ion-nav-view name="login"></ion-nav-view>
<ion-nav-view name="home"></ion-nav-view>
<ion-nav-view name="pizze"></ion-nav-view>
<ion-nav-view name="sponsor"></ion-nav-view>
<ion-nav-view name="scontrino"></ion-nav-view>
</body>
APP.js
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('intro', {
url: '/intro',
views: {
'intro': {
templateUrl: 'templates/intro.html',
controller: 'IntroCtrl'
}
}
})
.state('login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
$urlRouterProvider.otherwise('/intro');
});
Controllers.js
angular.module('starter.controllers', [])
.controller('IntroCtrl', function($scope,$location) {
$location.url("/login");
})
.controller('LoginCtrl', function($scope,$location) {
})
Intro is shown correctly but when it tries to change location to "login.html" it says:
TypeError: Cannot read property 'querySelectorAll' of undefined
at cancelChildAnimations (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:30611:21)
at Object.leave (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:30176:11)
at Object.leave (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:38411:24)
at updateView (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:41540:31)
at eventHook (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:41501:17)
at Scope.$broadcast (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:21190:28)
at $state.transition.resolved.then.$state.transition (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:33975:22)
at wrappedCallback (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:19894:81)
at http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:19980:26
at Scope.$eval (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:20906:28)
What could be the problem???
Thanks!
Try this
angular.module('starter.controllers', [])
.controller('IntroCtrl', function($scope,$state) {
$state.transitionTo("login");
})
.controller('LoginCtrl', function($scope,$location) {
})
You are using the view names wrong.
In a state, the view's name
views: {
'_name_': {
}
is used for different navigation histories for different views.
Say you have two tabs, home and pizza, and you want both to have several pages, then the view name comes in handy.
For your example it is important to know, how you want the views to be used.
I set up an example for you, making the views accessible in tabs.
See here for that example: http://plnkr.co/edit/Yd5ehQd0wnwlPzP0KYnp?p=preview