Im having a problem, the code inside $ionicPlatform.ready is not firing if I add my router file and the controller file but I can not find the problem.
Template and controller is working fine.
index.html
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/core/router/app.router.js"></script>
<script src="js/feature/notification/notification.js"></script>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
</body>
app.js
angular
.module('app', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
console.log('##################');
});
});
app.router.js
angular
.module('app', ['ionic', 'ui.router'])
.config(Router);
Router.$inject = ['$stateProvider', '$urlRouterProvider'];
function Router($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('notifications', {
url: '/',
templateUrl: 'js/feature/notification/notification.html',
controller: 'NotificationCtrl',
controllerAs: 'model'
});
}
notifications.js
angular
.module('app')
.controller('NotificationCtrl', NotificationCtrl);
function NotificationCtrl() {
var model = this;
console.log('Test');
}
Thanks for your time
The code wrapped in $ionicPlatform.ready does not run because you are defining your app module more than once when it should only be defined in your app.js. Subsequent calls to the module should leave off the dependency annotations. In this case, you can change the line in app.router.js from .module('app', ['ionic', 'ui.router']) to .module('app').
Another thing to note is that with Ionic, you don't need to inject ui-router yourself as it is included in the Ionic bundle.
You should not, however, remove Router.$inject = ['$stateProvider', '$urlRouterProvider']; unless you are using an automated annotation tool such as ng-annotate due to potential issues when minifying your code (thanks, #AdityaSingh).
(Edited for clarity and accuracy.)
Related
How to use one module for multiple controllers, when these controllers are in different js files.
I have 3 js file
1. app.js
2. Login. js
3. Register.js
app.js
var app = angular.module("myApp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'Login/login.html',
controller: 'myCtrl'
})
.when('/register', {
templateUrl: 'Register/register.html',
controller: 'registerCntrl'
})
})
Login.js
var app = angular.module("myApp");
app.controller("myCtrl", function ($scope) {
$scope.login = function (data) {
console.log(data);
if (data.name == 'pinku' && data.pswd == '1234') {
console.log("Login Successfull");
} else {
console.log("Not successful");
}
};
$scope.moreInfo = function () {
alert("M in more info");
}
});
Register.js
var app = angular.module("myApp");
app.controller("registerCntrl", function ($scope) {
});
I have defined mymodule in my app.js file now i want to register my controller to that module and controllers are in different class. I have injected ng-Route in app.js. In login m using already defined module but m getting error
'Failed to instantiate module ngRoute due to:'
Thanks in advance
You can rather do:
angular.module("myApp")
.controller(...)
for both the controllers, rather than writing the variable here
Note: app.js should be loaded before any of the controllers for this to work.
This is one of the ways it can be done:
<html ng-app="myApp">
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controller1.js"></script>
<script type="text/javascript" src="controller2.js"></script>
</body>
</html>
Apart from this you can also use some task runners like gulp OR grunt to do that automatically.
If you load your app.js first, in other files you can inject your modules like
app = angular.module("myApp");
Note that I omit [] from the function call. It means that you are trying to get already defined module.
I want to use lazy loading in my Angular project:
This is the relevant app.js code:
var app = angular.module('eva', ['ui.router',
'controllers', 'oc.lazyLoad']);
app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$locationProvider', '$ocLazyLoadProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider, $ocLazyLoadProvider) {
$httpProvider.interceptors.push('AuthInterceptor');
$urlRouterProvider.otherwise("/");
$locationProvider.hashPrefix('!');
$stateProvider.state('challenge', {
url: '/challenges',
templateUrl: 'views/Challenges.html',
controller: 'ChallengeCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (!auth.isLoggedIn()) {
$state.go('login');
}
}],
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('js/controllers/ChallengeController.js');
}]
}
This is my controller definition code:
angular.module('eva').controller('ChallengeCtrl', ['$scope', 'auth','$translate', 'challengeFactory', 'userFactory', 'userService',
function($scope, auth, $translate, challengeFactory, userFactory, userService) {
I am not loading the challengecontroller.js file in the index.html file.
I include oclazyload just before app.js in the index.html file:
<script type="text/javascript" src="js/lib/oclazyload/dist/ocLazyLoad.js"></script>
<script type="text/javascript" src="js/app.js"></script>
I get this error now when I run the app:
Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=ChallengeCtrl&p1=not%20a%20function%2C%20got%20undefined
I tried many things for lazy loading, none of them worked. Now I just followed the example on Example
I really am in a pickle here, and I have no clue what to do to get the lazy loading working. I rather not work with requirejs.
angular config is just a function, any dependencies should be already $inject before you call this config. you may include it in <script> tag and add it to app = angular.module['app', ['depend1'])
so you change it and try it again.
app.config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider, $ocLazyLoadProvider) {
btw: open your Browser Dev-Tools, to check whether this file js/controllers/ChallengeController.js is loadead correctly
I have this project structure :
-root
|-JS
|-app.js
|-COMPONENTS
|-HOME
|-homeController.js
|-homeView.html
|-ERROR
|-error.html
|-index.html
Here is index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- JS LOADING -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!--APP JS -->
<script src="js/components/app.js"></script>
<script src="./js/shared/services/lb-service.js"></script>
<!--HOME JS-->
<script src="./js/components/home/homeController.js"></script>
</head>
<body ng-app='benirius'>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="error">Error</a></li>
</ul>
<div ui-view></div>
</body>
</html>
and app.js:
'use strict';
angular.module('benirius', [
'lbServices',
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/components/home/homeView.html',
controller: 'homeController'
})
.state('error', {
url: '/error',
templateUrl: '/components/error/error.html'
});
$urlRouterProvider.otherwise('/');
}]);
edit adding homeController.js:
angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
Angular ui router does not create links / load pages.
All js files are loaded and no javascript error shown in console.
Does someone know why ui-router is not working ?
Ps : I've been playing around with templateUrl path with no success.
As show here in angular doc, when you separate files and add controllers, services, or others to a module, you have to load it with no arguments.
You first define your app in a file :
angular.module('benirius', [
'lbServices',
'ui.router'
])
.config(
// CODE IN HERE
);
$urlRouterProvider.otherwise('/');
}]);
Then if you want to add elements to your app in another file, you load the module with no arguments, like this:
// notice there is no second argument therefore it loads the previously defined module 'benirius'
angular.module('benirius')
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
//=> NO ERROR
instead of:
// In this case, it is considered as a redefinition of 'benirius' module with no dependencies injected
angular.module('benirius',[])
.controller('homeController', ['$scope', function($scope) {
$scope.test = "Inside home.";
}]);
//=> ERROR
I am using angularjs to make a MVC web application...But it gives an error when i'm opening it on internet explorer... But I don't receive an error in other browsers and views are not loading either when click on the links.
This is the error received in Internet Explorer
Unhandled exception at line 33, column 487 in //localhost:18012/Scripts/angular.min.js
0x800a139e - JavaScript runtime error: [$injector:modulerr] http://errors.angularjs.org/1.2.27/$injector/modulerr?p0=sampleApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.27%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A36%3A196)%0A%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A34%3A273)%0A%20%20%20at%20d%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A34%3A487)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A33%3A386)%0A%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A7%3A288)%0A%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A33%3A207)%0A%20%20%20at%20ec%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A36%3A307)%0A%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A18%3A168)%0A%20%20%20at%20dc%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A18%3A380)%0A%20%20%20at%20Wc%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A17%3A415)
I have attached my angular model below. Please help me to solve this.
app.js
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/homeContent.html',
controller: 'AddOrderController'
}).
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
when('/players', {
templateUrl: 'templates/playersMen.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/'
});
}]);
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 are inject $routeProvider
please make sure you loaded:
angular-route.js
cdn:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.js
when u loaded,then
add dependency to your app with ngRoute
angular.module('app', ['ngRoute']);
Firstly you have to inject 'ngRoute' in your angular module in the way:
var sampleApp = angular.module('sampleApp', ['ngRoute']);
Another thing is include angular-route.js in your index.html file
This will resolve your problem
Your module is missing ngRoute dependency.Make sure first you add angular-route.min.js
Then added ngRoute dependency inside your app
Your app should look like below.
var sampleApp = angular.module('sampleApp', ['ngRoute']);
Add script reference to html exact after angular.min.js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.js"></script>
Hope this is helpful to you.
My answer to another case with similar error, if you do not VS2015 US cord that will find it: references the Angular after platformOverrides.js
<body>
<div class="app">
<p id="deviceready" class="event">Connecting to Device</p>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"</script>
<script src="angular/angular.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
As I felt my single controller was growing too large I am now trying to make use of multiple controllers. However, my UserController can't be found for some reason when I navigate to /signup. I'm getting this error:
Error: [ng:areq] Argument 'UserController' is not a function, got undefined
app.js
var app = angular.module('myApp', [
'ui.router',
'ngResource',
'myApp.controllers',
]);
angular.module('myApp.controllers', []);
app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: "UserController"
});
});
I'm including the .js files in this order:
<script src="angular/controllers/mainCtrl.js"></script> //binded to body tag
<script src="angular/controllers/userCtrl.js"></script> //set in signup state
<script src="angular/app.js"></script>
UserController
angular.module('myApp.controllers').controller('UserController', function () {
//do stuff
});
What am I missing?
Make it easier on yourself and create cleaner code.
var app = angular.module('myApp', [
'ui.router',
'ngResource',
'myApp.controllers',
])
.config(function($stateProvider) {
$stateProvider
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: "UserController"
});
});
you weren't using $urlRoutProvider and $httpProvider so why inject them?
Angular Modules are good for nothing...so far. Except for loading 3rd-party angular code into your app and mocking during testing. Other than that, there is no reason to use more than one module in your app.
To create your UserController do a
app.controller('UserController', function ($scope) {
//do stuff
});
<script src="angular/controllers/mainCtrl.js"></script> //binded to body tag
<script src="angular/controllers/userCtrl.js"></script> //set in signup state
<script src="angular/app.js"></script>
You cant use a module before it's declared.so switch the scripts order.
You should stick to 1 independent module declaration per file and you'll be fine,otherwise you'll have to manage script order.
Your app.js has to be declared first like below BEFORE you pull in its controller subcomponents:
<script src="angular/app.js"></script>
<script src="angular/controllers/mainCtrl.js"></script> //binded to body tag
<script src="angular/controllers/userCtrl.js"></script> //set in signup state