I use angularjs 1.2 in my project.
Here is module and controller:
(function () {
"use strict";
angular.module('dashboard', ['ngRoute', 'layersProperty'])
.controller('dashboardController',
function ($scope) {
//never fire!
var self = this;
$scope.data = "bbbbb";
})
})();
here is view:
<div ng-app="dashboard" data-role="page" id="layersProperty" data-add-back-btn="true" style="background-color:red">
<div ng-controller="dashboardController">
{{data}}
</div>
</div>
But the problem is that controller is never fire!Any idea why controller is never fire?
Make sure that when you inject ngRoute and layersProperty then you have both of this JavaScript files included before your controller file where you have dashboardController controller. This is because, Angular will throw you [$injector:modulerr] error if you haven't included those code before your controller file for dashboardController as dashboardController is dependent on ngRoute and layersProperty.
In your above code if you remove ['ngRoute', 'layersProperty'] and replace it with [] then your conrtroller will invoke. So there must be some problem where angular could not find ngRoute and layersProperty service files.
Check if you have reference to angularjs in your main html.
Related
I have an angularJS app with three modules: myApp(parent/core module), services(contains all the factories and services), and controllers(contains all the controllers).
This is my app.js file
angular.module('services', []);
angular.module('controllers', []);
var app = angular.module('myApp', ['services', 'controllers']);
I read here that setting up my modules and defining dependencies in this way will allow each of my modules to access the other without having to inject the dependencies.
Here's my index.html file
<script src="/js/app.js"></script>
<script src="/js/services/testFactory.js"></script>
<script src="/js/controllers/testCtrl.js"></script>
testFactory.js file
angular.module('services').factory('testFactory', ['$rootScope', 'apiCall', function($rootScope, apiCall){
let testFactory = {};
testFactory.testFunc = function(){
console.log('testFactory.testFunc called');
}
return testFactory;
}])
testCtrl.js file
angular.module('controllers').controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory){
console.log("inside testCtrl");
$scope.testing = function(){
console.log("testing function called");
testFactory.testFunc();
}
}])
When I call the testFactory.testFunc inside the myApp module, it functions correctly. But, when I try calling it in the controller module, I'm getting the following error
TypeError: Cannot read property 'testFunc' of undefined
I even tried injecting the service module inside the controller module as a dependency, but I still got the same error.
How do I get the service module to work inside the controller module?
I am trying to load a template file in an AngularStrap popover, however I am having trouble using $templateCache. I seem to be a step further back than the other SO questions, hence this seemingly double one.
Following the API docs I added a <script type="text/ng-template" id="popoverTemplate.html"></script> right before the closing </body> tag. When I use <div ng-include="'popoverTemplate.html'"></div> on my page, I get nothing. If I try using console.log($templateCache.get("popoverTemplate.html")) I get "$templateCache is not defined", which leads me to assume I am missing a crucial step. However, I can't find how to do it in the docs or other SO questions.
EDIT:
Injecting the service was the missing link. However, when I inject the service, the controller's other function no longer works, but if you inject al the function's parameters the working code becomes:
(function() {
"use strict";
angular.module("app").controller("managerController", ["$scope", "imageHierarchyRepository", "$templateCache", function ($scope, imageHierarchyRepository, $templateCache) {
imageHierarchyRepository.query(function(data) {
$scope.hierarchies = data;
});
var template = $templateCache.get("popoverTemplate.html");
console.log(template);
}]);
})();
To use the template script tag . You have to insert it inside the angular application. That is inside the element with the ng-app attribute or the element used to bootstrap the app if you don't use the ng-app tag.
<body ng-app="myapp">
<div ng-template="'myTemplate.html'"></div>
<script type="text/ng-template" id="myTemplate.html">
// whate ever
</script>
</body>
If you want to retrieve the template on a component of the application then you need to inject the service where you want to consume it:
controller('FooCtrl', ['$templateCache', function ($templateCache) {
var template = $templateCache.get('myTemplate.html');
}]);
Or
controller('FooCtlr', FooCtrl);
FooCtrl ($templateCache) {};
FooCtrl.$inject = ['$templateCache'];
EDIT
Do not register two controllers with the same name because then you override the first one with the last one.
(function() {
"use strict";
angular.module("app").controller("managerController",["$scope", "imageHierarchyRepository", "$templateCache", function ($scope, imageHierarchyRepository, $templateCache) {
var template = $templateCache.get("popoverTemplate.html");
console.log(template);
imageHierarchyRepository.query(function(data) {
$scope.hierarchies = data;
});
}]);
})();
Small addition: Although there are few ways to achieve your goals, like wrapping your whole HTML in <script> tags and all that, the best approach for me was to add the $templateCache logic into each Angular directive. This way, I could avoid using any external packages like grunt angular-templates (which is excellent but overkill for my app).
angular.module('MyApp')
.directive('MyDirective', ['$templateCache', function($templateCache) {
return {
restrict: 'E',
template: $templateCache.get('MyTemplate').data,
controller: 'MyController',
controllerAs: 'MyController'
};
}]).run(function($templateCache, $http) {
$http.get('templates/MyTemplate.html').then(function(response) {
$templateCache.put('MyTemplate', response);
})
});
Hope this helps!
I have a main App "MyApp", with its own controller and scope, i want "MyApp" to use a module "SharedModule" with its own controller and scope, but the controller for the module does not seem to be called. Does anyone know why?
<div ng-app="MyApp" ng-controller="MyController">
<div ng-controller="SharedModuleController">
</div>
</div>
<script>
angular
.module('SharedModule',[])
.config(['$httpProvider', function ($httpProvider) {
// call 1st
}])
.controller('SharedModuleController', function($scope){
// not called: skipped
});
angular
.module('MyApp',['SharedModule'])
.config(['$httpProvider', function ($httpProvider) {
// called 2nd
}])
.controller('MyController', function($scope){
// called 3rd
});
</script>
This is just an example code I typed to simulate a concept that represents my current long code. Syntax might not be 100% correct.
Controller functions are not executing Angular.
'use strict';
angular.module('newproejctApp')
.controller('dashboardCtrl', function ($rootScope, $scope, User, Auth,dataService) {
$scope.test="this is not working";
});
<div class="container" ng-controller="dashboardCtrl">
{{test}}
</div>
The above sample for some reason will not work. The project is produced by Yeoman, and all other controllers are functioning normally.
I think you need to pass in the empty array in your module definition:
angular.module('newproejctApp', [])
In My angular JS application i have 2 pages using same functionality and i am trying to use abstract controller and i am getting 'Base Ctrl is not defined' error from Summary Ctrl.
am I missing anything...
Markup
<div ng-controller="MainCtrl">
<div ng-controller="SummaryCtrl">{{name}}</div>
<div ng-controller="SearchCtrl"></div>
</div>
MaintCtrl.js
define(['tabs/module'], function (module) {
'use strict';
module.controller('MainCtrl', ['$scope', function ($scope) {
//some code;
}]);
function BaseCtrl($scope) {
$scope.name="test";
}
});
SummaryCtrl.js
define(['tabs/summary/module'], function (module) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});
It looks to me like you're using this code as your example:
Angular: Extending controller
I'm still not 100% sure what your problem is, but it seems to me like it could be that in this sample you've supplied, both the code pieces are in the same file. When you do separate it into separate files, make sure when you bootstrap or add your *.js file references.. make sure you add base before the others that are 'dependent' on it
EG
<script language="javascript" src="someUrl/BaseCtrl.js"></script>
<script language="javascript" src="someUrl/SummaryCtrl.js"></script>
EDIT:
Your issue could be with RequirejJS
Have a look at
http://solutionoptimist.com/2013/09/30/requirejs-angularjs-dependency-injection/
Your MainModule is registered in 'tabs/module', but nowhere are you supplying SummaryCtrl any of its dependencies.
EG. SummaryCtrl is not implicitly aware of 'tabs/module', as it's in 'tabs/summary/module'
Try adding this to summary:
define(['tabs/summary/module', 'tabs/module'], function (module, BaseCtrl) {
'use strict';
module.controller('SummaryCtrl', ['$scope', function ($scope) {
BaseCtrl($scope);
//child actions`enter code here`
$scope.name = 'Clicked from base controller';
}]);
});