How to import module and display on view in angular? - javascript

I am trying to load my first view in angular. But I make a project in modular fashion to learn good coding style.
I will show how I make a directory to create a module
Or look at full image here...
I write this on my index.html page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="lib/angular.js" type="text/javascript"></script>
<script src="lib/angular-ui-router.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body >
<div ng-app="firstApp">
<div ui-view="app"></div>
</div>
</body>
</html>
in app.js
var app= angular.module('firstApp',['ui.router']);
in controller firstcontroller.js file I write this
(function() {
'use strict';
angular
.module('firstApp')
.controller('firstcont', firstcont);
firstcont.$inject = ['$scope'];
function firstcont($scope) {
$scope.clickEvent=function(){
alert('---')
}
}
})();
on router.js file I write this
(function() {
'use strict';
angular.module('firstApp.firstdir').config(Routes);
Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function Routes($stateProvider, $urlRouterProvider) {
// Default
$urlRouterProvider.otherwise('/app');
// Application
$stateProvider
.state('app', {
url: '/app',
views:{
app: { templateUrl: 'firstdir/templates/firstpage.html' }
},
controller:"firstcont"
});
}
})();
in module.js file I write this
(function() {
'use strict',
angular.module('firstApp.firstdir', [
'ui.router',
]);
})();
on template.html I write this
<div ng-controller="firstcont">
<h1>First page</h1>
<button ng-click="clickEvent()"> go to second page</button>
</div>
I don't know why it doesn't display first view. Actually, I am not able to make plunker, because there is no way to make directory?
angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module firstApp due to:
Error: [$injector:modulerr] Failed to instantiate module firstApp.firstdir due to:
Error: [$injector:nomod] Module 'firstApp.firstdir' 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.2.21/$injector/nomod?p0=firstApp.firstdir
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1668:17
at ensure (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1592:38)
at module (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1666:14)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3852:22
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp.firstdir&…%3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A3846%3A5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3880:15
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at createInjector (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3786:11)
at doBootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1435:20)
at bootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1450:12)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp&p1=Error%…3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A1450%3A12)

First include the js files (the module declaration always come first, and first submodules)
<!-- The order here is very important -->
<script src="js/module.js" type="text/javascript"></script>
<script src="js/router.js" type="text/javascript"></script>
<script src="js/firstcontroller.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
Declare your 'firstcont' as a firstApp.firstDir controller:
var firstDir = angular.module('firstApp.firstdir');
...
firstDir.controller('firstcont', firstcont);
Put your submodule as a dependece of your firstApp module:
//Remember firstApp.firstdir must be already declared :)
var app= angular.module('firstApp',['firstApp.firstdir', 'ui.router']);
UPDATE:
Here's the code example http://goo.gl/xxvIvB (to run click in preview)

You've defined your routes in another module: firstApp.firstdir.
To import the module, use the following syntax:
var app= angular.module('firstApp',['firstApp.firstdir']);
You don't need to import ui.router, because its imported from firstApp.firstdir.

Related

Angular Controller Not loading : Error: [ng:areq] Argument Controller is not a function, got undefined

angular.js:13540 Error: [ng:areq] Argument 'PropertiesCtrl' is not a function, got undefined
I keep getting my controller isn't not a function and I can't determine why. If I copy the code from the propertiesCtrl.js and paste it in the app.js it works. But I can't seem to get it to work via a seperate file.
Thank you for your help in advance. Sorry for the newb question.
File Structure
Property Manager
-app
--properties
---propertiesCtrl.js
-css
-img
-js
--app.js
--libs
---(angular, UI, other vendor files(
-server.js
-views
--main.html
--about.html
-index.html
index.html
<!-- Angular and Controllers -->
<script src="/js/libs/angular.js"></script>
<script src="/js/libs/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<script src="/js/app.js"></script>
<script src="app/properties/propertiesCtrl.js"></script>
<span ng-controller="PropertiesCtrl as props">{{ props.name }}</span>
app.js
angular.module('app', ['ui.router']);
//configure our routes
angular.module('app').config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
var mainState = {
name: 'main',
url: '/',
templateUrl: 'views/main.html'
};
$stateProvider.state(mainState);
});
propertiesCtrl.js
function propertiesCtrl() {
this.name = 'Properties 1';
}
angular.module('app').controller('PropertiesCtrl', propertiesCtrl);
New Error
New Error

cannot inject datepickerConfigProvider from ui.bootstrap

I'm trying to inject datepickerConfig inside the run phase, but angular says that it's unable to find the provider: Unknown provider: datepickerConfigProvider <- datepickerConfig.
this is the code:
(function () {
angular.module('app', ['ngAnimate', 'ngCookies', 'ngRoute', 'ngSanitize', 'pascalprecht.translate', 'ui.bootstrap', 'ui.select']);
// config phase is omitted, it only configures the i18n async loading
function runFn($translate, datepickerConfig) {
datepickerConfig.currentText = $translate('label.today');
datepickerConfig.clearText = $translate('label.clear');
datepickerConfig.closeText = $translate('label.close');
}
runFn.$inject('$translate', 'datepickerConfig');
angular.module('app').run(runFn);
})();
I also tried to inject datepickerConfig inside the config phase, but angular gave me the same error.
I really can't figure out what is the problem.
In the index.html i have all the .js I need
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
what's wrong?
Thanks

Angular + Requirejs - each data is repeated twice?

I am running Angular under Requirejs, but I have this multiple occurrence where the data in the controller class is repeated twice. Unless I remove ng-app="myApp" from the div. Why?
welcomeController.js,
define(['app'], function (app) {
app.controller('welcomeController', ['$scope', function($scope) {
//your minsafe controller
$scope.message = "Message from WelcomeController";
console.log($scope.message); // it is repeated twice here.
}]);
});
HTML,
<head>
<link rel="stylesheet" href="style.css">
<script data-main="scripts/main.js" src="scripts/vendors/requirejs/require.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="welcomeController">
{{message}}
</div>
</div>
</body>
main.js,
require.config({
//baseUrl: "",
// alias libraries paths. Must set 'angular'
paths: {
'domReady': 'vendors/requirejs-domready/domReady',
'angular': 'vendors/angular/angular',
'angular-route': 'vendors/angular-route/angular-route',
'jquery': 'vendors/jquery/dist/jquery'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
exports: 'angular'
}
}
});
define([
'controllers/welcomeController',
'bootstrap'
]);
bootstrap.js,
define([
'require',
'angular',
'app'
], function (require, ng) {
'use strict';
require(['domReady!'], function (document) {
ng.bootstrap(document, ['myApp']);
});
});
app.js,
define([
'angular'
], function (ng) {
'use strict';
//For single module retrun.
return ng.module('myApp', []);
});
But it works ok on Angular without Requirejs. I don't need to remove remove ng-app="myApp" from the div. Why?
<head>
<link rel="stylesheet" href="style.css">
<script src="scripts/vendors/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('welcomeController', ['$scope', function($scope) {
$scope.message = "Message from WelcomeController";
console.log($scope.message); // It occurs only once.
}]);
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="welcomeController">
{{message}}
</div>
</div>
</body>
What have I done wrong under Requirejs with Angular?
You are bootstrapping Angular twice: once with the ng-app directive and once with the ng.bootstrap(...) code in bootstrap.js! Go either for automatic (ng-app) or for manual (angular.bootstrap) bootstrapping.
Also, like Josep mentioned in his (deleted) answer, it is better to shim angular-route as:
shim: {
'angular-route': {
deps: ['angular']
}
}
This is NOT the cause of the problem, but will prevent potential future problems (i.e. route being loaded before Angular).
angular-require-lazy may contain some useful ideas for Angular-RequireJS integration with lazy loading

Uncaught Error: [$injector:modulerr] Failed to instantiate module due to:

First I've to say that I've looked every existing question relating to my problem, but I've found nothing dealing with my problem.
Uncaught Error: [$injector:modulerr] Failed to instantiate module Arrows due to:
Error: [$injector:nomod] Module 'Arrows' is not available! You either misspelled the
module name or forgot to load it. If registering a module ensure that you specify ...
<omitted>...2)
my index.html:
<html ng-app='Arrows'>
<head>
<title>Arrows</title>
<script data-main="app" src="modules/require.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="modules/angular-1.2.21/angular.js"></script>
<script src="modules/angular-1.2.21/angular-route.js"></script>
</head>
<body ng-controller='menuController'>
<div ng-view>
{{ message }}
</div>
</body>
</html>
my app.js:
define([
'./controller/menu',
'./controller/game'
], function(
menu,
game
) {
var Arrows = angular.module('Arrows', ['ngRoute']);
Arrows.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/menu.html',
controller : 'menuController'
})
.when('/game', {
templateUrl : 'pages/game.html',
controller : 'gameController'
})
.otherwise( {
redirectTo: '/',
controller: 'menuController'
});
});
Arrows.controller('gameController', function($scope) {
$scope.message = 'hello! Its working!';
});
Arrows.controller('menuController', function($scope) {
$scope.message = 'hello! Its working!';
});
});
No clue what to do there. I mean, I loaded angular-route.js, what is the answer to most questions concerning this error. And I made sure to write ng-app='Arrows' inside the html-tag.
As you are using require.js you have to bootstrap your AngularJS application in a special way. Read this article - https://www.startersquad.com/blog/angularjs-requirejs/ - and try to incorporate what is described there for your specific case.
In the end you will use something like
define([
'require',
'angular'
], function (require, ng) {
'use strict';
require(['domReady!'], function (document) {
ng.bootstrap(document, ['Arrows']);
});
});

AngularJS routeprovider injection error

I'm learning AngularJS, and I'm now trying the $routeProvider, but I can't get it to work.
index.html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
view.html:
<p>Hello World!</p>
controllers.js:
var app = angular.module('App', ['ngRoute']);
app.config(
function($routeProvider){
$routeProvider.when("/something",{
templateUrl: "view.html",
controller: "MyController"
})
.otherwhise({
redirectTo: "/"
});
}
);
function MyController($scope){
}
Whenever I run this, I get an error message that says
Uncaught Error: [$injector:modulerr]
How can I solve this?
Change .otherwhise to .otherwise.
A good practice when you run into these issues is to try the un-minified version of Angular.
The un-minified error is much more helpful:
Uncaught Error: [$injector:modulerr] Failed to instantiate module App
due to: TypeError: Object # has no method 'otherwhise'
Solution: Create a $inject property on your route config as follows: -
var app = angular.module('App', ['ngRoute']);
(function (app) {
var routeConfig = function($routeProvider){
$routeProvider.when("/something",{
templateUrl: "view.html",
controller: "MyController"
})
.otherwhise({
redirectTo: "/"
});
};
routeConfig.$inject = ['$routeProvider'];
app.config(routeConfig);
})(angular.module("App"));
AngularJS will now be able to inject $routeProvider successfully when js is minified.

Categories