I am very new to Angularjs. I have a single page application where index.html is the root page.it contains below content
index.html
//links to other pages
//ng-view
I have an app.js file linked to index.html which loads the respective pages when user clicks on links in index.html using ngRoute.
my app.js page looks something like this
app.js
'use strict';
angular.module('myApp', [ 'ngRoute', 'ngAnimate', 'ngSanitize',
'ui.bootstrap', 'checklist-model', 'blockUI','isteven-multi-select' ]);
var App = angular.module('myApp');
//ngroute code
Now a page search_name.html and search_name_controller.js loaded when user clicks on one of the links in index.html
search_name_controller looks something like this.
search_name_controller.js
'use strict';
App.controller('SearchCifCtrl', [ '$scope', '$location', '$uibModal',
'WorkflowService', 'ConstantService', function($scope, $location, $uibModal,
WorkflowService, ConstantService) {
//some code
} ]);
Snce it is a single page application angular.module statement is written only in app.js file. It is not written in any other js file. Now i want to test search_name_controller.js using KARMA.I have written test code like below
search_name_controller.test.js
describe('search_name_controller', function () {
beforeEach(function() {
module('myApp');
});
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
//code to test method
});
While i try to run this test, I am getting error as "$controller is not a function". i feel the error is because the angular.module part is not defined in search_name_controller.js file. When i try to add it ,i am able to run the test.But i am not allowed to make any changes to existing code. Is there any way where my test file can read angular.module part of app.js file even if i write test scenario for search_name_controller.js.
Kindly help
beforeEach(inject(function($controller){
controller = $controller('SearchCifCtrl', {
$scope: scope
});
}));
//try this to inject your controller
Related
I'm trying to inject my factory into my controller and I'm getting this error from AngularJS:
Error: $injector:unpr Unknown Provider
I have looked through almost all of the questions on here and still cannot find a solution to my problem. I believe my controller and factory and declared correctly and the injection is correct but it looks like this isn't the case.
My factory code is as follows:
var app = angular.module('test', []);
app.factory('processingFactory', function () {
var factory = {};
factory.newTest = function() {
console.log("TEST");
}
return factory;
});
This is then injected into the controller which looks like this:
angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']).controller("dashboardController", [
"$scope",
"$timeout",
"$http",
"$window",
"$interval",
"$resource",
"ModalService",
"$filter",
'$q',
'processingFactory',
function($scope, $timeout, $http, $window, $interval, $resource,
ModalService, $filter, $q, processingFactory) {
//other code removed
$scope.newWorkorder = processingFactory.newWorkorder;
}
]);
This function is called through a button click on the web page. All of the files needed are in script tags on this html page. I am fairly new to angular so this could be a simple error or something I am not aware of.
Calling angular.module with an array as the second argument declares a module, which can only happen for any given module name. You are declaring the module twice (once in your controller code, and again in your factory code).
Try changing the first part of your factory code to:
var app = angular.module('test');
If you are doing the same thing elsewhere in the app you will need to remove the second argument there too, so that there is only one module declaration in the whole app.
if there are any dependencies for your module "test" why do not you have them declared in the first line itself like:
var app = angular.module("test", ["angularModalService", "anguFixedHeaderTable",
'angular-loading-bar', "ngResource", "agGrid",
'ui.tree']);
Then declare your controller like::
app.controler(...)
Things should work fine.
I am making an app using angular and firebase. I want to implement angular-trix editor so that users can post their own articles. But I don't know how to integrate angular-trix. I have included the js files and in app.js I have injected the 'angularTrix'.
var app = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngAnimate', 'firebase', 'ngSanitize','angularTrix']);
This is my html page.
<div>
<trix-editor ng-model="trix" angular-trix></trix-editor>
<button ng-click="save()">Save!</button></div>
and this is controller
app.controller('profileCtrl', ['$scope', "$routeParams", "$firebaseObject", "$sce", "Auth", function($scope, $firebaseObject, $routeParams, $rootScope, Auth, $sce) {
// Demo controller
console.log('In ctrl');
$scope.trix = '<p>Hello</p>';
$scope.save = function() {
alert($scope.trix);
};}]);
I don't know what I have to include in a controller. I want that when a user will press submit button, it should extract the HTML and save it to the firebase.
I know how to save data in firebase but not how to extract the HTML from AngularTrix.
A snippet of code of controller would be of much help.
The inner html is stored in the model which you pass to the editor through ng-model attribute like this:
<trix-editor angular-trix ng-model="foo"></trix-editor>
Here, foo would have your markup:
angular.module('trixDemo', ['angularTrix']).controller('trixDemoCtrl', function($scope) {
$scope.foo = '<div>Hello world!</div>';
});
Small Demo
I'm making this very preliminary attempt of using node/npm/browserify to build my angular app. The ./app/controllers, ./app/directives, ./app/services basically have index.js files which in turn require() the js files! Below is the root js file i.e. public/index.js.
require('./app/controllers/');
require('./app/directives/');
require('./app/services/');
var app = angular.module('myApp', ['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when("/movie/:movieId", {
template: require('./views/movie.html'),
controller: 'MovieCtrl as movie'
})
.when("/movie/:movieId/scene/:sceneId", {
template: require('./views/scene.html'),
controller: 'SceneCtrl as scene'
});
});
module.exports = app;
Now after running below command i do get a bundle.js however,
browserify public/index.js -o release/bundle.js
However, the below line in bundle.js throws the error "Uncaught ReferenceError: app is not defined"
app.controller('MainCtrl', function ($route, $routeParams, $location, MyFactory) {
Now, i was assuming because var app is specified in index.js it should be accessible in MainCtrl.js. Could someone suggest how i could make this work?
----- Adding some more info ------
app/controllers/index.js contains below code:-
require('./MainCtrl.js')
require('./MovieCtrl.js')
require('./SceneCtrl.js')
And MainCtrl.js contains below code:-
app.controller('MainCtrl', function ($route, $routeParams, $location, MyFactory) {
//...
})
I don't know where the line in your code is... it isn't clear from the question, but anyway:
Now, i was assuming because var app is specified in index.js it should be accessible in MainCtrl.js.
That assumption is false. You will need to pass in a reference to whatever you need when you instantiate whatever you included.
For example..
var mainCtrl = new MainCtrl(app);
Ok, so i kind of understood what was going on. var app is local and cannot be accessible anywhere else. Once i set app to the global scope (which is obviously a horrible thing!) and required files after declaring app, it worked. This is mostly not the correct way of doing it, but as i mentioned this was a very preliminary attempt.
app = angular.module('myApp', ['ngRoute'])
app.config(function($routeProvider) {
$routeProvider
.when("/movie/:movieId", {
template: require('./views/movie.html'),
controller: 'MovieCtrl as movie'
})
.when("/movie/:movieId/scene/:sceneId", {
template: require('./views/scene.html'),
controller: 'SceneCtrl as scene'
});
});
require('./app/controllers/');
require('./app/directives/');
require('./app/services/');
I'm getting an error when running my app: Argument 'AppCtrl' is not a function, got undefined - I believe it has something to do with the separation of controller files?
Ok, so I have in my first file: app.js this:
angular.module('zerochili', [
'ionic',
'zerochili.controllers',
'zerochili.services',
'zerochili.directives'
])
Then I have some different controller files - Lets take the file there the AppCtrl is - This looks like the following:
angular.module('zerochili.controllers', [])
.controller('AppCtrl', ['$scope', '$ionicModal', '$timeout', function ($scope, $ionicModal, $timeout){
}])
And another file fx like so:
angular.module('zerochili.controllers', [])
.controller('LoginCtrl', ['$scope', '$state', '$ionicPopup', '$timeout', function($scope, $state, $ionicPopup, $timeout){
}]);
What am I doing wrong? Can't seem to quite figure it out?
You can think of your app.js as the part where you define the module. The controller files should be adding to the module (not have ", []" as this creates the module).
You should probably be doing this in your controllers
angular.module('zerochili')
.controller('AppCtrl', etc.
So, remove these: 'zerochili.controllers', 'zerochili.services', 'zerochili.directives' from the app.js and add your controllers,services and directives to the 'zerochili' module like above.
If you want to keep, for example, 'zerochili.controllers' make sure that you don't create this module twice, i.e. have angular.module('zerochili.controllers', []) twice.
It's only because you are creating a new modul with []
you can put at the end of your app.js
angular.module('zerochili.controllers', []);
angular.module('zerochili.directives', []);
angular.module('zerochili.services', []);
and then use it like this:
angular.module('zerochili.controllers')...
I am using angularjs in my application, by using ngDialog the page is not loading and shows blank page
I have used like
angular.module('pswApp', ['ngRoute', 'ngAnimate', 'ngTouch', 'ngDialog', 'ui.grid', 'myApp','newApp'])
.config(['$routeProvider',
function($routeProvider) {}]);
But the page is not loaded, when i use ngDialog in the module wherever i use it. I have used the ngDialog.js file in the common html file and i load the pages using ng route
Even i used it in another js file like this
angular.module('myApp', [ 'ngDialog' ]).controller('mainCtrl',
function($scope, ngDialog) {
});
The page is not getting loaded, is there any other way to solve this issue.
You are declaring module again while defining controller.
Injection should also be in controller.
angular.module('myApp', []).controller('mainCtrl', 'ngDialog',
function($scope, ngDialog) {
});