HTML page doesn't see AngularJS module

HTML page doesn't see AngularJS module - javascript

I am entirely new to AngularJS. The task is however simple: to parse XML file from the url and make a table out of it.
Yet somehow angular doesn't load. I searched similar questions, but neither worked. My index.html:
<!doctype html>
<html ng-app="myApp">
<head>
<title>jj</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular.intellisense.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/myscript.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">Text.</p>
</div>
<div ng-controller="AppController">
<h3>for example 2+3= {{3+2}}</h3>
</div>
</div>
</body>
</html>
I should get 5 instead of 2+3 if angular is loaded?
myscript.js currently looks like:
angular.module('myApp.service', []).
myApp.factory('DataSource', ['$http', function ($http) {
return {
get: function(file,callback,transform){
$http.get(
file,
{transformResponse:transform}
).
success(function(data, status) {
console.log("Request succeeded");
callback(data);
}).
error(function(data, status) {
console.log("Request failed " + status);
});
}
}
}]);
angular.module('myApp', ['myApp.service']);
var AppController = function ($scope, DataSource) {
var SOURCE_FILE = "guitars.xml";
xmlTransform = function (data) {
console.log("transform data");
var x2js = new X2JS();
var json = x2js.xml_str2json(data);
return json.customers.customer;
};
setData = function (data) {
$scope.dataSet = data;
};
DataSource.get(SOURCE_FILE, setData, xmlTransform);
};
Can you give me some advice?

It has to do with your syntax. I believe you have 2 errors. In your myscript.js you are declaring 2 modules. In your first module you are incorrectly declaring a factory. Use .factory not myApp.factory
angular.module('myApp.service', [])
.factory('DataSource', ['$http', function ($http) {
return {
// do something
}
}]);
In your second module you declare a function called AppController instead of calling the .controller angular method. Do this instead:
angular.module('myApp', ['myApp.service'])
.controller('AppController', ['$scope', 'DataSource', function ($scope, DataSource) {
// controller code
}]);

You can accomplish your program in a sole module by using a construct similar to what follows:
var app = angular.module('myApp', []);
app.controller('AppController', function($scope, DataSource) {
// code
});
app.factory('DataSource', ['$http', function($http) {
// code
}]);
Basically, create a variable for your app module, then call controller and factory, and pass your factory into your controller.

Related

Inject factory in controller use strict and named , IIEF functions

i'm using JHispter and i saw that uses these AngularJS rules: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
Using IIFE,Getters,Use Strict, Named Functions,ControllerAs,etc i would like to create a simple page that parse a JSON and show a movie list (title, director,duration) and the one that lasts much longer.
I've searched and tried all day but nothing works. The factory can't be used in the controller tough i inject it using $inject.
That's my index.html
<html>
<head>
<title>Hello Angular</title>
<link href="stile.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="">
</head>
<body ng-app="myApp">
<h1>Hello Angular</h1>
<div ng-controller="myController as sc">
<h1>angular JSON test</h1>
<!-- <p>Print movie list</p>
<ul >
<li ng-repeat="film in sc.elencoFilm">
{{film.title}}, {{film.director}}, {{film.time}}
</li>
</ul>
<p >Trova il film più lungo: {{sc.maxTimeFilm().title}} </p> -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="JS/app.config.js"></script>
<script src="JS/app.state.js"></script>
<script src="JS/app.service.js"></script>
<script src="JS/app.controller.js"></script>
</body>
</html>
My app.config.js
(function() {
'use strict';
angular
.module("myApp", []) ;
})();
My app.state.js
(function() {
'use strict';
angular
.module('myApp')
.config(stateConfig);
stateConfig.$inject = ['$routeProvider'];
function stateConfig($routeProvider) {
$routeProvider.when('/', {
templateUrl:"index.html",
controller:"serverController"
});
}
})();
My app.controller.js
(function () {
'use strict';
angular
.module("myApp",[])
.controller("myController", myController);
//myController.$inject = ['$scope', '$http'];
myController.$inject = ['$scope', '$http','myFactory'];
function myController($scope, $http, myFactory) {
//function myController($scope, $http){//, myFactory) {
var vm = this;
var elencoFilm={};
myFactory.getMovies().then(function (response) {
vm.elencoFilm = response;
});
vm.maxTimeFilm = getMaxTimeFilm();
function getMaxTimeFilm() { //return the longest film
}
}
})();
My app.service.js
(function () {
'use strict';
angular.module('myApp',[])
.factory('myFactory', myFactory);
myFactory.$inject = ['$scope', '$http','myFactory'];
function myFactory($scope, $http) {
console.log("sono nella factory");
return {
getMovies: function ($http) {
return $http.get('https://api.myjson.com/bins/1bgtg3');
/* .then(function (response) {
return response.data.movies;
});*/
}
}
}
})();
it always return this error:
https://docs.angularjs.org/error/$injector/unpr?p0=myFactoryProvider%20%3C-%20myFactory%20%3C-%20myController
it can't recognize myFactory into myController function!
in app.controller.js this line
function myController($scope, $http, myFactory) {
this break out the error!
Thank you for the help!! :)

Do not add empty dependency array in for module myApp in controller and factory.
Use .module('myApp') in both controller and factory, similar to your config.

By defining your modules based on functionality the myFactory service should be under a encapsulated closure referencing the main app module, hence all your factories can go under this module (ex. factories.module.js) :
(function() {
'use strict'
angular.module('myApp.factories', []);
}();
Once that module is added to your app.config
(function() {
'use strict'
angular.module('myApp', [
'myApp.factories'])
})();
It separates the concerns of your modules based on functionality following the IIFE design principle. Now reference your new module to myFactory in your service file.
(function () {
'use strict'
angular.module('myApp.factories')
.factory('myFactory', myFactory)
...

I've solved it!
i simply removed $scope from factory and removed [] in the controller definition (.module("myApp") insted of .module("myApp",[]) ).
#23rharris your advice is a best practice?
I've used the factory in each function of the controller every time i needed the JSON file :
myController.$inject = ['$scope', 'myFactory'];
function myController($scope, myFactory) {
...
vm.elencoFilm = getMovies();
function getMovies() {
myFactory.getMovies().then(function (response) {
...
...
vm.maxTimeFilm =getMaxTimeFilm();
function getMaxTimeFilm() {
myFactory.getMovies().then(function (response) {
if (response.data.movies != undefined) {
...
Is this the correct pattern for REST?

Use multiple service in same controller angular js

I want to use multiple service in same controller. I can achieve with different service as mentioned below but it performs only one service
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<H1>Random Text is:</H1>
<div>{{myRandom}}</div>
<p>MuyLocation:: {{myLocation}}.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $location) {
$http.get("http://www.randomtext.me/api/").then(function (response) {
$scope.myRandom = response.data.text_out;
$scope.myLocation= $location.absUrl();
});
});
</script>
</body>
</html>
BUT, i want to use both service in same controller as mentioned below
app.controller('myCtrl', function($scope, $http, $location) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
$scope.myUrl = $location.absUrl();
});
});
So How can we perform both services in same controller.
Thanks in advance.

I think you can solved your problem with promise chaining.
$http.get("http://www.randomtext.me/api/").then(function success(response) {
return $q.resolve(response);
}, function error() {
return $http.get("welcome.htm");
}).then(function success(response) {
$scope.myWelcome = response.data;
$scope.myUrl = $location.absUrl();
});
If call to randomapi failed, so fetch welcome.html.

Load JSON file using AngularJS

I just started learning Angular and I've looked on SO for a solution to load a JSON file using angular and I've done what other people have posted a solutions but I cannot get the data from my json file to show for some reason.
my json file (test.json) is simple:
{
"array": [
{"thing": "thing1"},
{"thing": "thing2"},
{"thing": "thing3"}
],
"name": "robert"
}
this is my js file:
var myMod = angular.module("myMod", []);
myMod.controller("myCont", function ($scope, $http) {
$scope.thing = "hi";
$http.get("/test.json")
.success(function (data) {
$scope.stuff = data.array;
$scope.name = data.name;
})
.error(function (data) {
console.log("there was an error");
});
});
and i'm trying to just display the name like this but only {{name}} shows:
<html ng-app="myMod">
<head>
<script src="angular.js"></script>
<script src="testing.js"></script>
</head>
<body ng-controller="myCont">
{{stuff}}
</body>
</html>

I think you had typo, you should inject $http(responsible to make an ajax call) dependency instead of $html(doesn't exist in angular)
You should change code this way.
myMod.controller("myCont", function ($scope, $html) {
to
myMod.controller("myCont", function ($scope, $http) {

As Pankaj Parkar has stated, $http is what you need.
Here is a plunker I created with it working: http://plnkr.co/edit/d0DDU29uitMcwK6qA7kx?p=preview
app.js file with $http instead of $html:
var myMod = angular.module("myMod", []);
myMod.controller("myCont", function ($scope, $http) {
$scope.thing = "hi";
$http.get("test.json")
.success(function (data) {
$scope.stuff = data.array;
$scope.name = data.name;
})
.error(function (data) {
console.log("there was an error");
});
});

If anyone trying this is getting the error:
$http.get(…).success is not a function
Apparently the syntax changed for Angular >1.6. The accepted answer here has new syntax: $http.get(...).success is not a function

AngularJS Error: $injector:unpr Unknown Provider

I'm trying to build my own service by following the example in the documentation for the factory methodology. I think I've done something wrong however because I continue to get the unknown provider error. This is my code for my app including the declaration, configuration and factory definition.
EDIT
I've now added all of the files to help troubleshoot
EDIT
The full details of the error are below the issues appears to be with getSettings, as it's looking for getSettingsProvider and cannot find it
Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr? p0=getSettingsProvider%20%3C-%20getSettings
at Error (native)
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:6:450
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:431
at Object.c [as get] (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:499
at c (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
at d (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:230)
at Object.instantiate (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:394)
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:66:112
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:53:14 angular.js:9778
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
h.$apply angular.js:12512
(anonymous function) angular.js:1382
d angular.js:3869
$b.c angular.js:1380
$b angular.js:1394
Wc angular.js:1307
(anonymous function) angular.js:21459
a angular.js:2509
(anonymous function) angular.js:2780
q angular.js:330
c
These are all of the files I have in my app currently
app.JS
//Initialize angular module include route dependencies
var app = angular.module("selfservice", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:"partials/login.html",
controller:"login"
});
});
app.factory('getSettings', ['$http', '$q', function($http, $q) {
return function (type) {
var q = $q.defer();
$http.get('models/settings.json').success(function (data) {
q.resolve(function() {
var settings = jQuery.parseJSON(data);
return settings[type];
});
});
return q.promise;
};
}]);
And here is how I am using this service in my controller
controller.JS
app.controller("globalControl", ['$scope','getSettings', function ($scope,getSettings) {
var loadSettings = getSettings('global');
loadSettings.then(function(val) {
$scope.settings = val;
});
}]);
app.controller("login", ['$scope', function ($scope) {
return ""
}]);
directives.js
app.directive('watchResize', function(){
return {
restrict: 'M',
link: function(scope, elem, attr) {
scope.spacer = (window.innerWidth < 1025) ? '' : 'large-3';
scope.button = (window.innerWidth < 1025) ? '' : 'large-6';
angular.element(window).on('resize', function(){
scope.$apply(function(){
scope.spacer = (window.innerWidth < 1025) ? '' : 'large-3';
scope.button = (window.innerWidth < 1025) ? '' : 'large-6';
});
});
}
};
});
And if it's pertinent here's the HTML
<html class="no-js" lang="en" ng-app="selfservice" ng-controller="globalControl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{settings.title}}</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div id="template">
<header id="header">
<img src="{{settings.logo}}" alt="{{settings.logoDescription}}"/>
</header>
<div id="view">
<ng-view></ng-view>
</div>
</div>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
//initialize foundation
$(document).foundation();
</script>
</body>
</html>
Can someone point me in the right direction? I have done my best to follow the documentation, and looking through SO most of the related issues are much more in depth, and more difficult for me to understand. This is my first time creating a service.

also one of the popular reasons maybe you miss to include the service file in your page
<script src="myservice.js"></script>

Your angular module needs to be initialized properly. The global object app needs to be defined and initialized correctly to inject the service.
Please see below sample code for reference:
app.js
var app = angular.module('SampleApp',['ngRoute']); //You can inject the dependencies within the square bracket
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl:"partials/login.html",
controller:"login"
});
$locationProvider
.html5Mode(true);
}]);
app.factory('getSettings', ['$http', '$q', function($http, $q) {
return {
//Code edited to create a function as when you require service it returns object by default so you can't return function directly. That's what understand...
getSetting: function (type) {
var q = $q.defer();
$http.get('models/settings.json').success(function (data) {
q.resolve(function() {
var settings = jQuery.parseJSON(data);
return settings[type];
});
});
return q.promise;
}
}
}]);
app.controller("globalControl", ['$scope','getSettings', function ($scope,getSettings) {
//Modified the function call for updated service
var loadSettings = getSettings.getSetting('global');
loadSettings.then(function(val) {
$scope.settings = val;
});
}]);
Sample HTML code should be like this:
<!DOCTYPE html>
<html>
<head lang="en">
<title>Sample Application</title>
</head>
<body ng-app="SampleApp" ng-controller="globalControl">
<div>
Your UI elements go here
</div>
<script src="app.js"></script>
</body>
</html>
Please note that the controller is not binding to an HTML tag but to the body tag. Also, please try to include your custom scripts at end of the HTML page as this is a standard practice to follow for performance reasons.
I hope this will solve your basic injection issue.

app.factory('getSettings', ['$http','$q' /*here!!!*/,function($http, $q) {
you need to declare ALL your dependencies OR none and you forgot to declare $q .
edit:
controller.js : login, dont return ""

This error is also appears when one accidntally injects $scope into theirs factory:
angular.module('m', [])
.factory('util', function ($scope) { // <-- this '$scope' gives 'Unknown provider' when one attempts to inject 'util'
// ...
});

Spent a few hours trying to solve the same. This is how I did it:
app.js:
var myApp = angular.module( 'myApp', ['ngRoute', 'ngResource', 'CustomServices'] );
CustomServices is a new module I created and placed in a separate file called services.js
_Layout.cshtml:
<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/services/services.js"></script>
services.js:
var app = angular.module('CustomServices', []);
app.factory( 'GetPeopleList', ['$http', '$log','$q', function ( $http, $log, $q )
{
//Your code here
}
app.js
myApp.controller( 'mainController', ['$scope', '$http', '$route', '$routeParams', '$location', 'GetPeopleList', function ( $scope, $http, $route, $routeParams, $location, GetPeopleList )
You have to bind your service to your new module in the services.js file AND of course you have to use that new module in the creation of your main app module (app.js) AND also declare the use of the service in the controller you want to use it in.

I was getting this problem and it turned out I had included my controller both in ui.router and in the html template as in
.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/views/index.html',
controller: 'DashboardController'
});
}
]);
and
<section data-ng-controller="DashboardController">

Please "include" both Controller and the module(s) where the controller and the functions called in the Controller are.
module(theModule);

# user2310334
I just tried this, a VERY basic example:
HTML file
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-route.min.js" type="text/javascript"></script>
<script src="./app.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="MailDetailCtrl">
</div>
</body>
</html>
The javascript file:
var myApp= angular.module('app', ['ngRoute']);
myApp.factory('mailService' , function () {
return {
getData : function(){
var employees = [{name: 'John Doe', id: '1'},
{name: 'Mary Homes', id: '2'},
{name: 'Chris Karl', id: '3'}
];
return employees;
}
};
});
myApp.controller('MailDetailCtrl',['$scope', 'mailService', function($scope, mailService) {
alert(mailService.getData()[0].name);
}]);
And it works. Try it.

Be sure that you load controller outsideapp.config. The following code may cause this error:
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
var AuthCtrl = require('components/auth/AuthCtrl'); //NOTICE HERE
$stateProvider.state('login',{
url: "/users/login",
templateUrl: require("components/auth/login.tpl.html"),
controller: AuthCtrl // ERROR
})
}))
To fix this error, we must move AuthCtrl to outsideapp.config:
var AuthCtrl = require('components/auth/AuthCtrl'); //NOTICE HERE
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('login',{
url: "/users/login",
templateUrl: require("components/auth/login.tpl.html"),
controller: AuthCtrl // WORK
});
}))

In my case, I added a new service (file) to my app. That new service is injected in an existing controller. I did not miss new service dependency injection into that existing controller and did not declare my app module no more than one place. The same exception is thrown when I re-run my web app and my browser cache is not reset with a new service file codes. I simply refreshed my browser to get that new service file for browser cache, and the problem was gone.

Since this is the first Stackoverflow question that appears on Google when searching for Error: $injector:unpr Unknown Provider I'll add this here.
Make sure that in your index.html any modules/dependencies are not being loaded after they are needed.
For example in my code customFactory.factory.js begins like this:
angular
.module("app.module1")
.factory("customFactory", customFactory);
However the index.html looked like this:
<script src="/src/client/app/customFactory.factory.js"></script>
<script src="/src/client/app/module1.module.js"></script>
Where it should've really looked like this:
<script src="/src/client/app/module1.module.js"></script>
<script src="/src/client/app/customFactory.factory.js"></script>
Since customFactory.factory.js is declared as part of module1, it needs to be loaded before customFactory

I got this error writing a Jasmine unit test. I had the line:
angular.injector(['myModule'])
It needed to be:
angular.injector(['ng', 'myModule'])

When you are using ui-router, you should not use ng-controller anywhere. Your controllers are automatically instantiated for a ui-view when their appropriate states are activated.

update angular model from a service

angular.module('app.services', []).service("test", function($http, $rootScope){
this.test=function(){
$rootScope.name="test1";
};
};
angular.module('app.controllers', []).controller('TestController', function ($scope, test) {
test.send();
})
I dont get an error but the changes don't get applied to the UI. I tried $scope.apply() and got an error.

We need to tell Angular which modules your module depends on, In our case the main module is app.controllers.
To call service from different model we need tell to controller where is our service:
['app.services']
JS
var appServices = angular.module('app.services', []);
var appCtrl = angular.module('app.controllers', ['app.services']);
appServices
.service("test", function ($http, $rootScope) {
this.send = function () {
$rootScope.name = "test1";
};
});
appCtrl.controller('TestController', function ($scope, test) {
test.send();
});
Demo Fiddle

I think you should change ".service" by ".factory".
As I can see in the creating services docs there are 3 ways of creating custom services. One of then is using factory way, as the following:
var myModule = angular.module('myModule', []);
myModule.factory('serviceId', function() {
var shinyNewServiceInstance;
//factory function body that constructs shinyNewServiceInstance
return shinyNewServiceInstance;
});
Hope to help.

Develop Reference

JavaScript is the programming language of the Web.

HTML page doesn't see AngularJS module - javascript

Related

Inject factory in controller use strict and named , IIEF functions

Use multiple service in same controller angular js

Load JSON file using AngularJS

AngularJS Error: $injector:unpr Unknown Provider

update angular model from a service

Categories

Resources