how to include module in angualar js to remove error module not found?
I am make simple app to display only header using angular js .here is my code http://plnkr.co/edit/dplJ6sf4kgiwJ5pXu4GE?p=preview It is showing only "home" header I make same code in computer and install karma and everything ..
my issue is I am not able to test it's controller .I am getting this error
Failed to instantiate module app.home due to:
Error: [$injector:nomod] Module 'app.home' 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.
http://errors.angularjs.org/1.4.8/$injector/nomod?p0=app.home
at /Users/naveenkumar/Documents/ionic_work/SimpleDemo/bower_components/angular/angular.js:68:12
I make karma.conf.js like that
// Karma configuration
// Generated on Fri Dec 18 2015 19:53:32 GMT+0530 (IST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'bower_components/angular/angular.js' ,
'bower_components/jquery/dist/jquery.js' ,
'bower_components/angular-mocks/angular-mocks.js' ,
'bower_components/angular-resource/angular-resource.js' ,
'app/**/.js',
'app/**/*.html',
'test/**.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'app/**/*.html':['ng-html2js']
},
ngHtml2JsPreprocessor:{
moduleName:'templates'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultanous
concurrency: Infinity
})
}
I do testing like this
describe('check value',function(){
var controller,
$scope,
$rootScope;
beforeEach(function(){
module('app.home')
inject(function($injector){
$rootScope=$injector.get('$rootScope');
$scope=$rootScope.$new();
controller=$injector.get('$controller')('homecntrl',{$scope:$scope});
})
})
//it('check value after click',function(){
// controller.clickbtn();
// expect(controller.message).toEqual('test');
//})
it('check init',function(){
expect(controller.message).toBeUndefined();
})
it('check fine',function(){
expect(true).toBeTruthy();
})
})
Answer
The problem was two fold in your index.html file.
The first problem was that you imported your controller before you imported your modules in the HTML file. The second problem arose where the Karma version you imported did not match the angular version you were using.
Modules imported before controller
<script src="controller/home.controller.js"></script>
<script src="router/router.js"></script>
<script src="app.js"></script>
Karma set to Angular version 1.4.8, but Angular is version 1.2.16
<script data-require="angular.js" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
When importing the scripts for an Angular app, you must have module dependencies imported before the module themselves and finally all controllers, directives and services must be imported after the module they are attributed to. 'app' is dependant on 'app.home' so 'app.home' is imported before 'app'. 'homeCntrl' is attributed to the module 'app' so 'app' is imported before 'homeCntrl'.
Rearrange to be as follows:
<script src="router/router.js"></script>
<script src="app.js"></script>
<script src="controller/home.controller.js"></script>
And finally update your version of Karma to match the version of Angular you're using.
<script data-require="angular.js" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
plunkr:
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM