I've encountered a problem that I can't seem to fix and I hope someone out there can help me out!
I keep getting this error:
Failed to instantiate module musicApp due to:
{1}
This is the function I'm using:
'use strict';
var angular = angular
.module('angular', ['ngResource', 'ngRoute'])
.config (function ($RouteProvider){
$RouteProvider
.when ('/', {
templateULR: '/templates/list-artists.html'
})
.when ('/add-artist', {
templateUrl: '/add-artist.html'
})
.when ('/artist-details/:id', {
templateUrl: 'artist-details.html'
})
.otherwise ({redirectTo: '/'});
})
.constant ('author', 'Sekret Doge'
This is where I'm calling this function:
'use strict';
angular.controller('ListArtistsController',
function ListArtistsController($scope, artistData) {
$scope.artists = artistData.getAllArtists();
});
And this is my html file, that's supposed to show the information I require:
<div class="jumbotron" ng-controller="ListArtistsController">
<div class="row">
<div ng-repeat="artist in artists">
<div class="col-md-4" text-center>
<h2> {{ artist.name }}</h2>
</div>
</div>
</div>
</div>
I'll even give the script sources because some people are having problems thanks to them:
<script src="lib/jquery-2.1.0.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/PageController.js"></script>
<script src="js/controllers/ListArtistsController.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/ui-bootstrap-tpls-0.9.0.min.js"></script>
If there are anymore codes or files missing from this post that you need to look at, just tell me to edit the post!
getAllArtists function:
'use strict';
angular.factory('artistData', function ($resource) {
var resource = $resource('/data/artist/:id', {id: '#id'});
return {
getArtist: function (id) {
return resource.get ({id: id});
},
saveArtist: function (artist) {
artist.id = 999;
resource.save (artist);
},
getAllArtists: function() {
return resource.query();
}
}
});
PageController:
'use strict';
angular.controller('PageController',
function PageController($scope) {
$scope.author = "Sekret Doge";
$scope.date = {
year: 2014,
month: 4,
day: 4
}
}
);
app:
'use strict';
var angular = angular
.module('angular', ['ngResource', 'ngRoute'])
.config (function ($RouteProvider){
$RouteProvider
.when ('/', {
templateUrl: '/templates/list-artists.html'
})
.when ('/add-artist', {
templateUrl: '/add-artist.html'
})
.when ('/artist-details/:id', {
templateUrl: 'artist-details.html'
})
.otherwise ({redirectTo: '/'});
})
.constant ('author', 'Sekret Doge');
Thanks for helping out!
It looks like you aren't loading the ngRoute javascript. It's in a separate file.
http://docs.angularjs.org/api/ngRoute
The following library in the script tag in your HTML needs included in your .js.
lib/ui-bootstrap-tpls-0.9.0.min.js
at the top of app.js add ui.bootstrap.
var angular = angular
.module('angular', ['ngResource', 'ngRoute', 'ui.bootstrap'])
Related
app.js
(function(){
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home/home.html',
controllerAs: 'vm'
})
}
})();
home.controller.js
(function () {
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {
$rootScope.bodylayout ='main_page_que';
var vm = this;
}
})();
home.js
var app = angular.module('app', []);
app.controller('RedCtrl', function($scope) {
$scope.OpenRed = function() {
$scope.userRed = !$scope.userRed;
$scope.userBlue = false;
}
$scope.HideRed = function() {
$scope.userRed = false;
}
$scope.OpenBlue = function() {
$scope.userBlue = !$scope.userBlue;
$scope.userRed = false;
};
$scope.HideBlue = function() {
$scope.userBlue = false;
};
});
home.html
<div ng-controller="RedCtrl">
Show Red
<div hide-red="HideRed()" class="loginBox" ng-show="userRed"></div>
Show Blue
<div hide-blue="HideBlue()" class="loginBoxBlue" ng-show="userBlue"></div>
</div>
Index.html
<html lang="pl" ng-app="app">
<body class="{{bodylayout}}">
<div class="content">
<div ng-view style="margin:auto"></div>
</div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"></script>
<script src="home.js"></script>
<script src="app.js"></script>
<script src="authentication.service.js"></script>
<script src="flash.service.js"></script>
<script src="user.service.local-storage.js"></script>
<script src="home/home.controller.js"></script>
</body>
</html>
Hey, this is part from application when I use ngRoute and dynamically add home.html, but I think I have wrong app.js or home.controller.js beacuse when I add external file home.js (when is ng-controller=""RedCtrl. I get error [$controller:ctrlreg] RedCtrl is not register. Have you ideas why? I am new in Angular and I think the main reason is lack of my knowledge.
You are overwriting app module in home.js thus getting the error
Use
var app = angular.module('app'); //Get previously defined module
instead of
var app = angular.module('app', []); //It declares new module
You also need to change the sequence of JavaScript files
<script src="app.js"></script>
<script src="home.js"></script>
I have 2 html file and I want to pass parameters via angular service between them.
these are the files I have:
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<script type="text/javascript" src="services.js"></script>
<div ng-app="myApp" ng-controller="myCtrl2">
</div>
enter here
<script>
var app=angular.module("myApp");
app.controller("myCtrl2", ['$scope','$location', 'myService',
function($scope, $location, myService) {
myService.set("world");
}]);
</script>
</body>
</html>
enter2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<script type="text/javascript" src="services.js"></script>
<div ng-app="myApp" ng-controller="myCtrl3">
hello {{x}}
</div><script type="text/javascript">
var app=angular.module("myApp");
app.controller("myCtrl3", ['$scope','$location', 'myService',
function($scope, $location, myService) {
$scope.x=myService.get();
}]);
</script>
</body>
</html>
services.js
var app=angular.module("myApp", []);
app.factory('myService', function() {
var savedData = {}
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
});
why can't I get "hello world" in enter2.html, but instead get "hello" (x is not found by service)...?
When you go from index.html to enter2.html the whole page loads from scratch. For the data that you are expecting to stay in the browser, you might need to use advanced angular concepts such as loading just a part of the page using ng-view.
If that's something you have already overruled, saving the data in the service somewhere (may be the browser session) before unloading (window.onunload event) the page and then loading it back from there when the service loads (window.onload event) could also work.
Here is a working example based on your code.
I kept your index.html and added ui-view to have a single page application. The app uses 'ui.router'.
In the myCtrl2 I saved the data in the service, and call it back from myCtrl3:
.controller('myCtrl2', ['$scope', 'myService', function($scope, myService) {
console.log('myCtrl2');
myService.set('world');
}])
.controller('myCtrl3', ['myService', function(myService) {
console.log('myCtrl3');
var vm = this;
vm.x = myService.get();
}])
To keep things simple, I have one Javascript file:
angular.module('myApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
controller: 'myCtrl2',
controllerAs: 'vm'
})
.state('enter2', {
url: '/enter2',
templateUrl: 'enter2.html',
controller: 'myCtrl3',
controllerAs: 'vm'
});
})
.factory('myService', function() {
var savedData = {}
function set(data) {
savedData = data;
}
function get() {
return savedData;
}
return {
set: set,
get: get
}
})
.controller('myCtrl2', ['$scope', 'myService', function($scope, myService) {
console.log('myCtrl2');
myService.set('world');
}])
.controller('myCtrl3', ['myService', function(myService) {
console.log('myCtrl3');
var vm = this;
vm.x = myService.get();
}])
I also uses the var vm=this and ControllerAs as often recommended to avoid $scope issues.
index.html looks like below... pleaes note the ui-sref instead of href:
<div ui-view="">
<a ui-sref="enter2">Enter here</a>
</div>
enter2.html is now just the div part and your content:
<div>
Hello {{ vm.x }}
</div>
Let us know if that helps.
Additional info:
AngularJS Routing Using UI-Router
AngularJS's Controller As and the vm Variable
Sounds like you need to use a controller for your view page
https://docs.angularjs.org/guide/controller
I can't seem to figure how to inject multiple services into a controller.
I have listed my files here:
index.html file:
<script src="'./angular/angular.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<script src="'./angular-route/angular-route.js'></script>
<script src='./app/app.js'></script>
<script src='./app/welcome/welcome.js'></script>
<script src='./app/controls/questions.js'></script>
<script src='./app/services/questionsdata.js'></script>
<script src='./app/services/getsong.js'></script>
console.log error:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=getsongProvider%20%3C-%20getsong%20%3C-%20QuestionsCtrl
at Error (native)
at http://localhost:8000/static/angular/angular.min.js:6:416
at http://localhost:8000/static/angular/angular.min.js:43:7
at Object.d [as get] (http://localhost:8000/static/angular/angular.min.js:40:270)
at http://localhost:8000/static/angular/angular.min.js:43:69
at d (http://localhost:8000/static/angular/angular.min.js:40:270)
at e (http://localhost:8000/static/angular/angular.min.js:41:1)
at Object.instantiate (http://localhost:8000/static/angular/angular.min.js:41:364)
at http://localhost:8000/static/angular/angular.min.js:87:42
at link (http://localhost:8000/static/angular-route/angular-route.js:977:26) <section class="container-fluid ng-scope" id="main" ng-view="">
My app.js file:
(function(){
'use strict';
angular.module('myApp', ['ngRoute', 'myApp.welcome', 'myApp.questions' ])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
redirectTo: '/welcome'
})
.when('/welcome', {
templateUrl: 'static/app/welcome/welcome.html',
controller: 'WelcomeCtrl'
})
.when('/questions', {
//templateUrl: 'static/app/questions/questions.html',
templateUrl: 'static/app/views/questions.html',
//controllerAs: 'question',
controller: 'QuestionsCtrl'
})
.otherwise('/')
});
})();
My controller file:
(function () {
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
function QuestionCtrl(questionsdata,getsong) {
var vm = this;
var data = {
params: "1,1"
};
....
My questionsdata (first service) file:
(function () {
'use strict';
angular
.module('myApp.questions')
.factory('questionsdata', questionsdata);
function questionsdata() {
var service = {
getQuestions: getQuestions
};
return service;
.....
My get song (second service) file
(function () {
'use strict';
angular
.module('myApp.questions')
.factory('getsong',getsong);
function getsong($http, $window, $interval) {
var service = {
getId: getId,
getMySong: getMySong
};
return service;
....
That's ain't working.
When I change my controller file to use only the questionsdata service as follows:
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
function QuestionCtrl(questionsdata) {
It's working well. But when trying to use only the get song service as follows:
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
function QuestionCtrl(getsong) {
It ain't working as well.
Weird, right? What am I missing?
Try using the inject method:
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
QuestionCtrl.$inject = ['getsong', 'questiondata'];
function QuestionCtrl(getsong, questiondata){
Try this in index.html:
<script src="'./angular/angular.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<script src="'./angular-route/angular-route.js'></script>
<script src='./app/controls/questions.js'></script>
<script src='./app/welcome/welcome.js'></script>
<script src='./app/app.js'></script>
<script src='./app/services/getsong.js'></script>
<script src='./app/services/questionsdata.js'></script>
Because myApp depends on myApp.welcome and myApp.questions, so you have to put them first.
I am trying to modularize the implementation of an angular js project. I am aiming to implement different controllers in their own js files. But that doesnt seem to work.
The following is my config.js ( where the primary module is also defined )
(function() {
var app= angular.module("spa", [
//oob angular modules
//3rd party modules
'ui.router',
'ui.bootstrap'
]);
app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);
//function to config the routes
function configRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dashboard', {
url: '/',
templateUrl: '../App/Views/dashboard.html',
controller: 'dashboardController',
controllerAs: 'vm'
})
.state('supplier', {
url: '/suppliers',
templateUrl: '../App/Views/supplier.html',
controller: 'supplierController',
controllerAs: 'vm'
})
.state('event', {
url: '/events',
templateUrl: '../App/Views/event.html',
controller: 'eventController',
controllerAs: 'vm'
})
.state('partner', {
url: '/partners',
templateUrl: '../App/Views/partner.html',
controller: 'partnerController',
controllerAs: 'vm'
})
$urlRouterProvider.otherwise('/');
}
app.controller('dashboardController', dashboardController)
function dashboardController() {
alert('dashboard-same function');
}
}());`
the dashboardController triggers fine. But other controllers, written in seperate files dont trigger.
(function () {
'use strict';
var app = angular.module('spa');
app.controller('eventController', eventController);
function eventController() {
alert('event');
}
});
This is the sequence of my references:
<!--External Libs-->
<script src="../Scripts/jquery-1.9.1.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-animate.js"></script>
<script src="../Scripts/angular-sanitize.js"></script>
<script src="../Scripts/angular-cookies.js"></script>
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<!--Jquery Plugins-->
<!--Custom Libs-->
<script src="../App/Common/config.js"></script>
<!--Controllers-->
<script src="../App/Controllers/event.js"></script>
<script src="../App/Controllers/partner.js"></script>
<script src="../App/Controllers/dashboard.js"></script>
<script src="../App/Controllers/supplier.js"></script>
Thanks in advance
As per my comment, you forgot to execute the wrapping function of eventController.js. It should be
(function () {
'use strict';
var app = angular.module('spa');
app.controller('eventController', eventController);
function eventController() {
alert('event');
}
})();
//^^--------You forgot these
If it doesn't work after said fix, please create a fiddle from your local code instead of the fiddle code to prevent any typo errors and I will take a look.
Also I don't see routes.js in your html, or maybe you meant config.html.
Not completely sure what is going wrong on your side, but here is an example of how I do it:
For example I am using the following setup for modularizing my AngularJS app (v1.3.6):
index.html:
<html>
<head>
<title>Modularize</title>
<!-- load module -->
<script src="app/app.js"></script>
<script src="app/app.constant.js"></script>
<script src="app/app.config.js"></script>
<script src="app/app.run.js"></script>
<!-- load controllers/services/directives/factories -->
<script src="app/controllers/MyController.js"></script>
</head>
<body>
<!-- REST OF THE APP -->
</body>
</html>
app.js
var myapp = angular.module('spa', ['ui.router']);
app.constant.js
myapp.constant(function () {
});
app.config.js
myapp.config(function ($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/views/home.html',
controller: 'MyController',
});
});
app.run.js
myApp.run(function () {
});
MyController.js
myapp.controller('MyController', function ($scope) {
});
I have two angular js controllers. When the click the ng-href link in recorddetails.html,
I am able to see the result binded as "The activity name is Exercise" but the same if I do with ng-click by clicking button with find() in send.html. I am able to see the recorddetails.html but the page is displaying without the data being binded as "The activity name is {{activity}}".I have provided the code belowe for reference.Kindly, provide some valuable solutions.
index.html
<div ng-controller="controllerOne">
<a ng-href="#/recorddetails/100">Running</a>
</div>
recorddetails.html
<div ng-controller="controllerTwo">
<p> The activity name is {{activity}}</a>// The scope name is Exercise
</div>
send.html
<div ng-controller="controllerThree">
<button ng-click="find()">
</div>
JS file
angular.module('exampleapp', ['ngRoute').config(
[ '$provide', '$httpProvider', '$routeProvider', function($provide, $httpProvider, $routeProvider) {
$routeProvider.
when('/recorddetails/:id', {
templateUrl: '/records/recorddetails.html',
controller: 'controllerTwo'
.otherwise({
redirectTo: '/defaultpage'
});
app.controller('controllerOne',
[ '$scope','$location',function($scope,$location) {`enter code here`
}
app.controller('controllerTwo',
[ '$scope','$location',function($scope,$location) {
$scope.activity = "Exercise";
}
app.controller('controllerThree',
[ '$scope','$location',function($scope,$location) {
$scope.find = function(){
$location.path("/recorddetails/100");
}
}
var app=angular.module('binding',['ngRoute'])
app.config(['$routeProvider',function ($routeProvider)
{
$routeProvider
.when('/',
{
templateUrl:'one.html',
controller:'controllerOne'
})
.when('/recorddetails/:id', {
templateUrl: 'recorddetails.html',
controller: 'controllerTwo'
})
.when('/send', {
templateUrl: 'send.html',
controller: 'controllerThree'
})
}])
app.controller('controllerOne',function($scope,$location){
})
app.controller('controllerTwo', function($scope,$location) {
$scope.activity = "Exercise";
})
app.controller('controllerThree',function($scope,$location) {
$scope.find = function(){
console.log('in 3');
$location.path("/recorddetails/100");
}
})
<html ng-app="binding">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="routefile.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>