Hi I'm trying to separate the code of a custom directive to manage checkboxes to a different file, but is not working and also it seems that is not loading when I debug with devtools I'm not able to see this new file.
not.js
(function () {
'use strict';
var sn = angular.module('notApp');
sn.controller('notController', ['$scope', '$window', '$timeout', 'dataContext', notController]);
function notController($scope, $window, $timeout, dataContext) {
}
sn.directive('checkList', function () {
return {
};
});
})();
notApp.js
(function () {
'use strict';
angular.module('templates-notHtml', []);
angular.module('notApp', [
'templates-notHtml'
]);
})();
notDataContext.js
(function () {
'use strict';
var sn = angular.module('notApp');
var dataContext = sn.service('dataContext', ['$http', '$window', '$rootScope', dataContextFunction]);
function dataContextFunction($http, $window, $rootScope) {
this.getPeriods = function () {
return $http({
method: 'GET',
url: '..........'
}).then(function (success) {
return success;
});
};
}
})();
not.html
<div ng-app="notApp">
<div id="sn" data-ng-controller="notController" class="mainDiv">
</div>
</div>
<script src="not.js"></script>
In this way the directive is working fine but when I separate the directive to another file, for example to customDirectives.js:
customDirectives.js
var sn = angular.module('notApp');
sn.directive('checkList', function () {
return {}
};
});
and then adding the script reference of customDirectives.js in not.html like:
not.html
<div ng-app="notApp">
<div id="sn" data-ng-controller="notController" class="mainDiv">
</div>
</div>
<script src="not.js"></script>
<script src="customDirectives.js"></script>
Stops working by this way, and also I'm not able to see customDirectives.js loaded in Chrome.
Any idea on what I'm doing wrong?
Related
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?
I'm trying to get an Angular Bootstrap UI Modal (0.14) working. I can get the modal to pop up (great) but the data object I'm passing is null (it isn't null when i set it). I've looked at all sorts of plukners, which I see how they work, mine just doesn;t seem to work.
Below, I've rigged it to pass some made up data, in
(function () {
'use strict';
angular.module('MPAapp')
.controller('workCentreCtrl',
['$scope', '$rootScope', 'toastrFactory', 'workCentreResource', '$uibModal', '$log',
workCentreCtrl])
function workCentreCtrl($scope, $rootScope, toastrFactory, workCentreResource, $uibModal, $log) {
var scope = this;
var slot = [{'slot1':5}, {'slotname':'dynamo'},{'OriginalSlot':5}]
var max = 5
// Click event from the view
$scope.EditWorkOrder = function () {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '/app/WorkOrder/Views/EditWorkOrder.html',
controller: 'EditWorkOrderCtrl',
size: 'lg',
resolve: {
data: function () {
return{
Slot: slot,
Max: max
}
}
}
});
modalInstance.result.then(function () {
$log.info('do some UI update here');
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
}());
/* END PARENT CONTROLLER */
/* --------------------------------*/
/* MODAL INSANCE CONTROLLER BEGIN*/
(function () {
'use strict';
angular.module('MPAapp')
.controller('EditWorkOrderCtrl', ['$scope', '$timeout', 'toastrFactory',
EditWorkOrderCtrl]);
EditWorkOrderCtrl.$inject = ['$uibModalInstance', 'data']
function EditWorkOrderCtrl($scope, $timeout, toastrFactory, $uibModalInstance, data) {
var scope = this;
$scope.ok = function () {
$uibModalInstance.close(scope.Slot);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
// THIS IS WHEN DATA IS UNDEFINED.
scope.Slot = data.Slot;
scope.SlotNumber = data.Slot.OriginalSlot;
}
}());
And the HTML in the modal instance
<div ng-controller="EditWorkOrderCtrl as vm">
<div class="row">
<div class="col-md-12">
<h2>Edit Work Order {{vm.Slot.WorkOrderNumber}}</h2>
</div>
</div>
<div class="row">
<div class="col-md-12"><span class="main-text bold">Product:</span> {{vm.Slot.ProductCode}} - {{vm.Slot.ProductDescription}}</div>
</div>
<div class="row">
<div class="col-md-6">
<span class="main-text bold">Size:</span> {{vm.Slot.QuantityRequired}}
<span class="main-text bold">Time (mins):</span> {{vm.Slot.StandardRunTime}}
<span class="main-text bold">Current Date:</span>{{vm.Slot.OriginalOrderDate | date:'dd MMM yyyy'}}
</div>
<div class="col-md-6"></div>
</div>
</div>
Any help very much appreciated. I'm still quite new to Angular, it's proving a tough nut in some areas, but I love it!
Of course data is not going to be available like this (but it's not null, it's undefined). Your dependency injection is messed up. Note, that what you are describing in $inject array, must correspond to formal parameters passed to controller function.
In your case with this configuration:
EditWorkOrderCtrl.$inject = ['$uibModalInstance', 'data']
function EditWorkOrderCtrl($scope, $timeout, toastrFactory, $uibModalInstance, data) {}
you tell Angular to inject $uibModalInstance as $scope, and data as $timeout. Clearly not what you want.
Correct injection should look like
EditWorkOrderCtrl.$inject = ['$scope', '$timeout', 'toastrFactory', '$uibModalInstance', 'data'];
function EditWorkOrderCtrl($scope, $timeout, toastrFactory, $uibModalInstance, data) {}
Alternatively you can use array notation as controller definition:
.controller('EditWorkOrderCtrl', ['$scope', '$timeout', 'toastrFactory', 'workCentreResource', 'blockedDatesResource', 'data', EditWorkOrderCtrl]);
but in this case make sure you don't use EditWorkOrderCtrl.$inject = ['$uibModalInstance']. Remove it because it has higher priority and as I explained above it's messed up.
Also take a look at this answer, where I provided detail explanation about different injection methods.
I'm trying to move angular code into separate files before the project grows too big.
I tried moving the app, controllers and services into separate files but the errors stopped referencing points in the code (or they were too generic).
I have decided to put the file contents in on big <script> tag so I can work through the errors and get it working. Unfortunately I have come across this (Failed to instantiate module protonApp due to...) and don't know how to track the problem down (I'm new to angular)
The
(function () {
'use strict';
...
}());
I have round the code is because the (little) research I have done says you should have your code between these when they are in separate files.
(function () {
'use strict';
var app = angular.module('protonApp',['ui.router','protonAppControllers','protonAppServices']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
...
}]);
app.value('debug',true);
app.run(function($rootScope,$state,$http,debug,LeftMenuService) {
...
});
}());
(function () {
'use strict';
angular.module('protonAppControllers', ['$scope','$http','LeftMenuService']);
}());
(function () {
'use strict';
angular.module('protonAppServices', ['$rootScope','$http']);
}());
(function () {
'use strict';
angular.module('protonAppControllers').controller('loginController',['$scope','$http','$state',function($scope,$http,$state){
...
}]);
}());
(function () {
angular.module('protonAppControllers').controller('surveyListController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){
...
}]);
}());
(function () {
'use strict';
angular.module('protonAppControllers').controller('surveyHelpController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){
...
}]);
}());
(function () {
'use strict';
angular.module('protonAppServices').service('LeftMenuService', function($http,$rootScope){
...
});
}());
EDIT
Further digging reveals I can not access $rootScope or $scope inside any of my controller files
In your module injection you don't have to add $scope and $http :
angular.module('protonAppServices', []);
Inject these in the controller but not in the module declaration
You dont need to inject anything while declaring a module, you could use them in you controller as mentioned #ThibauDL
I usually prefer declaring the modules just above the angular app declaration.
I have modified your a code in plnkr which should give you an idea as to how the code must be organized.
(function() {
'use strict';
angular.module('protonAppControllers', []);
angular.module('protonAppServices', []);
var app = angular.module('protonApp', ['ui.router', 'protonAppControllers', 'protonAppServices']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
//...
}
]);
app.value('debug', true);
app.run(function($rootScope, $state, $http, debug, LeftMenuService) {
//...
});
}());
(function() {
'use strict';
angular.module('protonAppServices').service('LeftMenuService', function($http, $rootScope) {
//...
});
}());
(function() {
'use strict';
angular.module('protonAppControllers').controller('loginController', ['$scope', '$http', '$state',
function($scope, $http, $state) {
$scope.login = "Hi Please login!";
// ...
}
]);
}());
(function() {
angular.module('protonAppControllers').controller('surveyListController', ['$scope', '$http', 'LeftMenuService',
function($scope, $http, LeftMenuService) {
//...
}
]);
}());
(function() {
'use strict';
angular.module('protonAppControllers').controller('surveyHelpController', ['$scope', '$http', 'LeftMenuService',
function($scope, $http, LeftMenuService) {
$scope.test = "Hxxxxi";
//...
}
]);
}());
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="protonApp">
<div ng-controller="loginController">
<input type="text" ng-model='login' />
</div>
</body>
Also you could now place them in separate files as you wanted.
Hope that helps.
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.
I have an app based on Angular which I initialize like this:
myapp.init = (function () {
'use strict';
var angularApp = angular.module('myapp', [])
.directive('homeIterationDirective', function () {
return function (scope, element, attrs) {
var isTopCard = scope.$last ? true : false;
cards.initSingleSwipe(element.get(0), function (event) {
// I want to call indexPageController.onSwiped(event) here!
}, isTopCard);
};
})
.directive('homeDirective', function () {
return function (scope, element, attrs) {
cards.initPanel(element, function (event) {
// I want to call indexPageController.onButtonPressed(event) here!
});
};
});
angularApp.factory('AjaxService', myapp.services.AjaxService);
angularApp.controller('IndexPageController', ['$scope', '$http', '$sce', 'AjaxService', myapp.pages.IndexPageController]);
}());
My controller looks like this:
myapp.pages.IndexPageController = function ($scope, $http, $sce, MyService) {
'use strict';
var somevalue = {};
this.onSwiped = function (event) {
doSomethingWith(event, somevalue);
};
this.onButtonPressed = function (event) {
doSomethingWith(event, somevalue);
};
};
In the 2 directives homeIterationDirective and homeDirective I have 2 callbacks cards.initSingleSwipe and cards.initPanel. Within these callbacks I want to call public methods of my controller but I don't have the instance available that Angular created from IndexPageController. How can I achieve this?
Use (inject) a service (and not a Controller) if you want "to call a public method" from another place, possibly from another Controller.
angularApp.controller('MyController', function ($scope, IndexPageService) {
IndexPageService.blah();
}));
Controller is intended to receive and modify a $scope (adding methods, variables..etc). The $scope can than be used inside the template (html) that use the controller itself.
If you want to call some controller code within the Angular context but in another place, then you should probably move that calling code to a service and then call the service method directly.
But if you want to call that method outside Angular context then, you can achieve that like this:
<div id="foo" ng-controller="IndexPageController">
<!-- code -->
</div>
Now, you can write something like this:
angular.element(document.getElementById("foo")).scope().blah();
I also think you should use a service for this. But if you still need to call one controller from another you can use $controller service
(function() {
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when("/first", {
templateUrl: 'app/view.html',
controller: 'firstCtrl'
}).when("/second", {
templateUrl: 'app/view.html',
controller: 'secondCtrl'
})
.otherwise({
redirectTo: "/first"
});
});
app.controller('firstCtrl', function ($scope) {
$scope.name = "first Controller";
$scope.nameToUpper = function () {
return $scope.name.toUpperCase();
}
});
app.controller('secondCtrl', function ($scope, $controller) {
var newScope = $scope.$new();
$controller('firstCtrl', { $scope: newScope });
$scope.name = newScope.nameToUpper() + 'from second ctrl';
});
}())
and view is
<div>
{{name}}
</div>