I've got a constant set up in my app.js file, and I've injected it into my controller (main.js), but it doesn't seem to want to work:
app.js
angular.module('fireApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase'
])
.constant('FBURL', 'https://outcomes.firebaseio.com/')
...
main.js
var app = angular.module('fireApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase'
]);
app.controller('MainCtrl', function ($scope, $filter, $timeout, $firebase, FBURL) {
...
}
Now I do question why I've got two modules set up. Is there a way around this? I'd like to keep my module, config and constant in my (app.js) file. How can I inject that .constant('FBURL') from my (app.js) file to my (main.js) file?
Any help is appreciated. Thanks in advance
Of course, there are different ways of doing this but I tend to structure my Angularjs app like so:
In the app.js file
angular
.module('fireApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase'
])
.constant('FBURL', 'https://outcomes.firebaseio.com/')
and in the /controllers/main.js I have:
angular.module('fireApp')
.controller('myController', ['$scope','FBURL', function($scope,FBURL) {
}])
This should solve your problem. Note that I have't injected all the same things as you so you will need to add these.
Related
So in my project I'm using only one module everywhere.
Here is how it looks:
angular
.module('moduleToMock', [
'ngAnimate',
'ngAria',
'ngMessages',
'ngRoute',
'ngMaterial',
'md.data.table',
'textAngular',
'ui.utils.masks',
'mp.colorPicker',
'mdPickers',
'ngCookies',
'ngIdle',
'toastr',
'ui.bootstrap',
'ui.bootstrap.typeahead'
])
You see a bunch of services in require section.
Right now I'm going to start writing tests. The error I'm getting is Module 'ngAnimate' is not available. I already found the same question discussed
So as I see, I should go with something like this:
beforeEach(function(){
module('moduleToMock');
module(function ($provide) {
$provide.value('ngAnimate', module('ngAnimate', []));
$provide.value('ngAria', module('ngAria', []));
$provide.value('ngMessages', module('ngMessages', []));
$provide.value('ngRoute', module('ngRoute', []));
$provide.value('ngMaterial', module('ngMaterial', []));
...
});
});
And this piece of code I have to insert in the beginning of each test of each service, factory, controller and etc.? Is there a way to do not copy-paste it each time I'm writing tests? Most of dependencies I have is not being injected into controllers, just declared as ngModule requirenment.
I'm starting with AngularJS, but Router not working on my site.
This is some config relate to my route:
Firstly, app.js:
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider,
$routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/'});
}]);
Secondly, view1.js
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: '/views/view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
angular.js, app.js and view1.js are added to the index.html
ng-view is used to show the content in view1.html
this is my folder tree:
Project
** admin
****** app.js
****** index.html
****** views
********** view1
*************** view1.html
*************** view1.js
Could you give me some advise to make it working??
Thanks for watching my question!
I would suggest moving your configuration all to one config. Also there is no need to reference myApp in your module instantiation. Another thing is make sure you have angularjs route file in your index.html. The following will work.
Try this:
var app = angular.module('myApp', ['ngRoute']).
app.config(function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.when('/view1', {
templateUrl: '/views/view1/view1.html',
controller: 'View1Ctrl'
})
.otherwise({redirectTo: '/'});
});
I am using this library for angularjs toaster:
https://github.com/jirikavi/AngularJS-Toaster
and added the following references:
<link rel="stylesheet" href="bower_components/AngularJS-Toaster/toaster.min.css" type="text/css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-animate.min.js"></script>
<script src="/bower_components/AngularJS-Toaster/toaster.min.js"></script>
I also added angular-animate as it seems using it, and added dependency injection on app module as:
.module('venture', [
'oc.lazyLoad',
'ui.router',
'ui.bootstrap',
'angular-loading-bar',
'satellizer',
'angularPayments',
'angularFileUpload',
'ngBootbox',
'ui.tinymce',
'ngSanitize',
'pikaday',
'ngAnimate',
'toaster',
])
My controller parametes looks as:
.controller("ClassController", ['$scope', '$location', '$rootScope', '$timeout', '$state', 'ClassService', 'ERROR_MSG', 'SUCCESS_MSG', 'FileUploader', 'REST_END_POINT', '$stateParams', 'UserService', 'toaster',
function ($scope, $location, $rootScope, $timeout, $state, ClassService, ERROR_MSG, SUCCESS_MSG, FileUploader, REST_END_POINT, $stateParams, UserService, toaster) {
and somewhere on the code I am using:
toaster.pop('success', "title", "text");
I know it comes here the execution but the toaster never shows up, nor the error comes...
Just so you know I am using angualarjs 1.2.16
I donw know what I am missing out here?
You didn't mention that you added
<toaster-container></toaster-container>
to index.html
Maybe that's it?
From the documentation of the toaster plugin your using:
AngularJS-Toaster requires AngularJS v1.2.6 or higher and specifically
targets AngularJS, not Angular 2, although it could be used via
ngUpgrade.
I´m using loopback with angular JS. I have a Person model on loopback and generated the lb-services.js to get acces to the Person model.
I added the lb-services to the module:
(function() {
'use strict';
angular
.module('frontend', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngResource', 'ngRoute', 'ui.bootstrap', 'toastr','lbServices']);
})();
However on my PersonsController when calling the createPerson() method I´m getting that Persons is undefined. I don´t understand why, since I have the dependecy on the controller.
This is my code:
angular.module('frontend').controller('PersonsController',['$scope','Person',function($scope){
$scope.person = {name:'guest',last_name:"none",age:55};
$scope.createPerson= function(){
console.log("CREATING PERSON...");
Person.create({name:$scope.person.name,last_name:$scope.person.last_name,age:$scope.person.age}).$promise
.then(function(){
console.log("Created person.")
});
};
}])
Can anyone help me out?
angular.module('frontend').controller('PersonsController',['$scope','Person',function($scope, Person){
just add Person as second parameter in function declaration and read the docs about DI in angular.
I am building an app with MEAN.js and I am trying to add https://github.com/oitozero/ngSweetAlert
The first thing I did was to edit the config/env/all.js file to include the javascript files for SweetAlert
I then edited the public/dist/application.js file to add the "oitozero.ngSweetAlert" module as follows:
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'oitozero.ngSweetAlert'];
Now in my controller I try to add the module, and once I do this I get the Unknown Provider error:
angular.module('stock').controller('myController', ['$rootScope', '$scope', '$stateParams', '$location', '$http', '$modal', 'Authentication', 'Stock', 'Users', 'SweetAlert',
function($rootScope, $scope, $stateParams, $location, $http, $modal, Authentication, Stock, Users, SweetAlert) {
I would really appreciate any suggestions as to what I am doing wrong. TIA!