I'm working on new project and I want to use two modules placed in separated files. Unfortunetaly, when I try to declare second in my root one I receive an error
Uncaught Error: [$injector:modulerr]
So, here is my root file, app.js:
var beerMe = angular.module("beerMe", ["admin", "ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "../views/home/home.html",
controller: "MyCtrl"
})
.otherwise({
redirectTo: "/home"
})
}])
.controller("MyCtrl", ["$scope", function($scope) {
}]);
And second one, which I want to bind, admin.js:
var admin = angular.module("admin", ["firebase", "ngRoute"]);
admin.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/add.html",
controller: "AdminCtrl"
}).when ("/edit", {
templateUrl: "views/edit.html",
controller: "AdminCtrl"
}).otherwise({
redirectTo: "/"
})
}]);
admin.controller("AdminCtrl", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
// my code goes here
}]);
In admin.js I connnect to firebase and I want to have access to all data from my module "beerMe".
I'd be very grateful if you could help me to figure out why there's a problem with binding these two.
Change var admin = angular.module("admin", ["firebase", "ngRoute"]);
to var admin = angular.module("admin");
and change root module like this
var beerMe = angular.module("beerMe", ["admin", "ngRoute", "firebase"])
It looks like your dependencies are the wrong way round. Having admin as a dependency of beerMe will not make the beerMe module available in your admin module.
If you want your admin module to be able to access data from inside the beerMe module then beerMe should be a dependency of admin.
var admin = angular.module('admin', ['firebase', 'ngRoute', 'beerMe']);
Related
I have a problem trying to load some modules.
controller1.js:
angular.module('LPC')
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
And app.js:
var app = angular.module('mis_peliculas', []);
app.config(function($routeProvider){
$routeProvider
.when("/pagina_principal",{
templateUrl: "views/pagina_principal.html",
controller: "lista_peliculas_controller"
})
.when("/lista_peliculas",{
templateUrl: "views/lista_peliculas.html",
controller: "lista_peliculas_controller"
})
.when("/lista_series",{
templateUrl: "views/lista_series.html",
controller: "lista_series_controller"
})
.otherwise({
redirectTo: "/pagina_principal"
})
});
The console says that there is a problem with the injector.
Can you find the error?
You must add angular-route.js . Reference
The ngRoute module provides routing and deeplinking services and
directives for AngularJS apps.
How do you fix it?
var app = angular.module('mis_peliculas', ['ngRoute','LPC']);
And
angular.module('LPC', [])
Update your code to use right module name:
angular.module('mis_peliculas')
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
and if you want to use separate modules, you need to initiliaze it first and inject it into your main module
angular.module('LPC',[])
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
var app = angular.module('mis_peliculas', ['LPC']);
I assume your routing is already set correctly.
without the complete log of the error i can't be more precise, but i think that the injection error could be related to your module not being instantiated.
try to change
angular.module('LPC') //here you get a reference to a module, that could cause your error
to
angular.module('LPC', []) //here you instantiate a module
You need to pass in the 'LPC' Module to your app 'mis_peliculas' module for it use the 'lista_peliculas_controller' Controller which is in 'LPC' Module.
Try this code
angular.module('LPC',[])
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
This should be your controller1.js and should be defined before you define your app. Now the app.js should look like
var app = angular.module('mis_peliculas', ['LPC']);
app.config(function($routeProvider){
$routeProvider
.when("/pagina_principal",{
templateUrl: "views/pagina_principal.html",
controller: "lista_peliculas_controller"
})
.when("/lista_peliculas",{
templateUrl: "views/lista_peliculas.html",
controller: "lista_peliculas_controller"
})
.when("/lista_series",{
templateUrl: "views/lista_series.html",
controller: "lista_series_controller"
})
.otherwise({
redirectTo: "/pagina_principal"
})
});
This should remove all the errors and you should be able to use the controller from other module.
Hope it helps
I'm trying to use Angular with my Codeigniter project. The problem is that it doesn't load the proper template file through angular router.
In the root instead of showing templateUrl: 'index.php/welcome/home', it loads the index.php/welcome. It loads the index page inside the controller instead of the ones I have specified.
Below is my code:
JS
var app = angular.module('MyCtrl', ['ngRoute', "ui.bootstrap.modal"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.php/welcome/home',
controller: 'mainController'
})
.when('/user', {
templateUrl: 'index.php/user/account',
controller: 'userController'
})
});
app.controller('mainController', function($scope) {
$scope.message = 'main con';
});
app.controller('userController', function($scope) {
$scope.message = 'user con!';
});
Welcome controller in Codeigniter:
public function home(){
$this->load->view('home');
}
Can someone tell me why this is not working and what I have done wrong?
I have created a Spring MVC project along with a client side angular app.
For the angular app,
Here is the content of /webapp/resources/js/app.js file
'use strict';
// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
'ngRoute',
'ngMaterial',
'rzModule'
]);
app.config(function ($routeProvider) {
$routeProvider
.when('/views/1', {
controller: 'MyController',
templateUrl: '/views/view1.html'
})
.when('/views/2', {
controller: 'MyController',
templateUrl: '/views/view2.html'
})
.when('/views/file-upload', {
controller: 'MyController',
templateUrl: '/views/file-upload.html'
})
.otherwise({
redirectTo: '/'
});
});
But the given templateUrls like "templateUrl: '/views/file-upload.html'" are seem to be not working.
The views are within /webapp/WEB-INF/views folder.
I want to know which addresses should I give inorder to route this views in app.js
I am new to windows store app development. Any how manage to get worked angularjs inside Windows 8 store app by editing angular js library. But Could not understand how to use angulerjs routing inside store app.
Can anyone explain how to use angular js routing in side Windows Store app or give an example to how to do that.
I'm building a universal app and I'm using angularjs.
It is my app.js
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/views/default.html',
controller: 'default'
}).
when('/customers', {
templateUrl: '/views/customers.html',
controller: 'customers'
}).
when('/products/:param', {
templateUrl: '/views/products.html',
controller: 'products'
}).
otherwise({
redirectTo: '/'
});
}]);
I have the below code for opening customers screen.
$scope.openCustomers = function () {
$location.path('/customers');
}
I have the below code for opening products screen.
$scope.openProducts = function () {
$location.path('/products/123');
}
It is my customers controller code
app.controller('customers', ['$scope', function ($scope) {
});
It is my products controller code
app.controller('products', ['$scope', '$routeParams', function ($scope,$routeParams) {
$scope.param= $routeParams.param;
});
I'm trying to build a myApp.config module to store some settings for my app, I wrote a config.js file:
angular.module('myApp.config', [])
.constant('APP_NAME','My Angular App!')
.constant('APP_VERSION','0.3');
I added it to my app.js (angular-seed):
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'myApp.config']).
I added it to the index.html file, and now I'm trying to figure out how to get it in my controllers, I tried:
angular.module('myApp.controllers', ['myApp.config'])
.controller('ListCtrl', ['$scope', 'myApp.config', function($scope, $config) {
$scope.printme = $config;
}])
but I'm getting:
Unknown provider: myApp.configProvider <- myApp.config
I'm probably doing something wrong here, any ideas ?
I don't think it is valid to use the module name in an injection like that. You can simply inject the constants by name, though:
angular.module('myApp.controllers', ['myApp.config'])
.controller('ListCtrl', ['$scope', 'APP_NAME', function($scope, appName) {
$scope.printme = appName;
}]);
I think the simplest approach is to add a constant using an object literal. This fits most application configuration use cases I think, because it supports a complex config object. The constant step also runs early, before other providers are registered.
angular.module('myApp').constant('cfg', {
url: 'https://myapi.com/v1/',
httpTimeout: 5000
})
To use it you just inject cfg:
angular.module('myApp').factory('user', function(cfg, $http){
// cfg and $http together at last
})
It should also be noted that SimplGy's solution means that the 'cfg' object is a constant, however the properties of that object are not. This means, that you cannot reassign 'cfg' like so:
cfg = { randomProperty: randomValue };
You CAN reassign the properties of the 'cfg' object like so:
cfg.url = 'BrandNewURL.com';
cfg.httpTimeout = 30;
Check out the use of constants in this example:
angular
.module('abp001App', ['ngRoute'])
.constant("myConfig", {
"url": "http://localhost",
"port": "80"
})
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.controller('MainCtrl', function (myConfig) {
// Do something with myConfig...
});