https://github.com/dwmkerr/angular-modal-service
When I want to show the modal, the console show this error
GET http://localhost:3000/copy/duplicate_view.html 404 (Not Found)
on the controller:
(function() {
'use strict';
function editCtrl($scope, appSettings,pricingService, ModalService) {
$scope.show = function() {
ModalService.showModal({
templateUrl: '../copy/duplicate_view.html',
controller: "DialogDemoCtrl"
})
};
}
angular.module('myApp')
.controller('editCtrl', editCtrl)
;
})();
On the HTML:
<a class="btn-green-alt btn" href ng-click="show()">{{'dialog.EXPORT' | translate}}</a>
at Dependency
angular
.module('myApp', [
'daterangepicker',
'angular-loading-bar',
'ui.tinymce',
'angularModalService'
])
And this is what i see on the service's code...
var getTemplate = function getTemplate(template, templateUrl) {
var deferred = $q.defer();
if (template) {
deferred.resolve(template);
} else if (templateUrl) {
$templateRequest(templateUrl, true).then(function (template) {
deferred.resolve(template);
}, function (error) {
deferred.reject(error);
});
} else {
deferred.reject("No template or templateUrl has been specified.");
}
return deferred.promise;
};
Set absolute path to your template whitout using ..
EDIT
Based on your comment about the project structure
app
specifications
copy
duplicate_view.html
Then set templateUrl as follow
templateUrl: 'app/specifications/copy/duplicate_view.html',
Related
I basically need to call a server that's will return me a JSON structure before load the controller.
I was using many methods to archive that, but it's not working. It's don't show me any error and the page got blank. Any clue about what's going on ?
This is my controller..
angular
.module('app',[
'ngAnimate',
'ui.router',
'ui.bootstrap',
'ngCookies'
])
.run(function($rootScope) {
$rootScope.backendServer = "http://localhost:5000/";
})
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider,$stateProvider) {
$stateProvider
.state('cms',{
url: '/my',
templateUrl: './app/templates/my.html',
controller : 'my',
resolve: {
dbState: function ($q) {
var defer = $q.defer();
Database.check().then(function (s) {
defer.resolve(s);
});
return defer.promise;
}
}
})
}])
.controller(function ($scope){
})
...and this is my service:
angular
.module('app')
.factory('Database',['$http', '$rootScope','$q', function($http, $rootScope, $q) {
return {
check: function () {
var call = $rootScope.backendServer + 'cms/database/check';
return $http.get(call);
}
}
}]);
don't create a defer object when you already returning a promise. so remove the defer and just return the factory function
also, inject the Database service to resolve
resolve: {
dbState: function(Database) {
return Database.check()
}
}
In the controller catch it like this
.controller("ctrl", function($scope, dbState) {
console.log(dbState.data)
})
Demo
I'm using http interceptor to handle errors. Is it possible to use md-dialog to pop up a window showing error messages once some certain errors are captured. A circular dependency error occurs when injecting $mdDialog into the service. Where should I bind errorMsg if $mdDialog can be used in this service?
interceptor:
.factory('httpInterceptor', ['$q', '$mdDialog', function($q, $mdDialog){
return {
'response': function(res) {
var status = res.data.status;
var errorMsg = res.data.payload.message;
if(status === 'fail') {
$mdDialog.show({
// controller: ???,
// scope: ???,
templateUrl: 'error.html',
})
return $q.reject(res);
}
return res;
}
}
}])
Yes you can display the $scope variable using a controller and resolve,
$mdDialog.show({
controller: function($scope, $mdDialog){
// do something with dialog scope
},
template: '<md-dialog aria-label="My Dialog">'+
'<md-dialog-content class="sticky-container">{{test}}' +
'</md-dialog-content>' +
'<md-button ng-click=close()>Close</md-button>' +
'</md-dialog>',
controller: 'modalCtrl',
resolve: {
test: function () {
return 'test variable';
}
}
});
Controller:
app.controller('modalCtrl', function($scope, $mdDialog, test) {
$scope.test = test;
});
DEMO
I am trying to use the code from here to show routes only when a promise is TRUE
I am following this for my directory structure
app
- Orders
-orders.html
-OrderController.js
-OrderService.js
Main-Config [app.js]
var myApp = angular.module('myApp', ['ngRoute','ngAnimate','ui.bootstrap','myApp.OrderController']);
myApp.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/orders', {
templateUrl: 'orders/orders.html',
controller: 'OrderController',
resolve:{
customerExpenses: function(OrderService){
return OrderService.getOrders($route.current.params.customerName);
}
}
})
})
OrderService.js
angular.module('myApp').factory('OrderService', ['$http', function($http) {
var sdo = {
getNames: function() {
var promise = $http({
method: 'GET',
url: ''
});
promise.success(function(data, status, headers, conf) {
return data;
});
return promise;
}
}
return sdo;
}]);
I have tried the Accepted answer from here, and one of the suggestion from another SO article
angular.module('myApp')
.service('FooService', function(){
//...etc
})
.config(function(FooServiceProvider){
//...etc
});
As I have my service in a different file, I am trying to determine if I can use it in app.js file without using provider or is that the only way to use service in app.config?
UPDATE 1:
If i want to use the service in a controller
angular.module('myApp.OrderController',[]).controller('OrderController', function ($scope) {
$scope.displayed=[];
$scope.displayed.push(OrderService.getNames());
});
I get OrderService not available
Have tried this:
angular.module('myApp.OrderController',[]).controller('OrderController', ['$scope','OrderService',function ($scope) {
$scope.displayed=[];
$scope.displayed.push(OrderService.getNames());
}]);
followed example :
angular.
module('myServiceModule', []).
controller('MyController', ['$scope','notify', function ($scope, notify) {
$scope.callNotify = function(msg) {
notify(msg);
};
}]).
factory('notify', ['$window', function(win) {
var msgs = [];
return function(msg) {
msgs.push(msg);
if (msgs.length == 3) {
win.alert(msgs.join("\n"));
msgs = [];
}
};
}]);
but can not use my service. my controller and service are in different files
I added this question here as I feel they are somewaht related.
You have not injected your service OrderService, change your code in very first line
var myApp = angular.module('myApp', ['ngRoute','ngAnimate', ....'OrderService'])
myApp.config(function($routeProvider, $locationProvider, OrderService){
....
})
Rest of the code looks good
I'm using Angular UI-router and trying to download/load controller when the routing changes. I used resolve and category, the data.data returns the js file content as string. I'm not sure to make the controller available to angular. Please help
My module.js contains below routing code
state("privacy", {
url: "/privacy",
controllerProvider: function ($stateParams) {
return "PrivacyController";
},
resolve: {
category: ['$http', '$stateParams', function ($http, $stateParams) {
return $http.get("js/privacy.js").then(function (data) {
return data.data;
});
} ]
},
templateUrl: localPath + "templates/privacy.html"
})
The below controller exist in "js/privacy.js"
socialinviter.controller("PrivacyController", function ($scope) {
$scope.me = "Hellow world";
});
I also tried with require js but I'm getting error "http://errors.angularjs.org/1.2.16/ng/areq?p0=PrivacyController&p1=not%20aNaNunction%2C%20got%20undefined"
resolve: {
deps: function ($q, $rootScope) {
var deferred = $q.defer(),
dependencies = ["js/privacy"];
require(dependencies, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
deferred.resolve()
})
return deferred.promise;
}
}
I have resolved the issue and I thought the solution would be helpful for others
Step 1: On your config, include the parameter $controllerProvider
mytestapp.config(function ($stateProvider, $controllerProvider)
Step 2: telling angular to register the downloaded controller as controller, add the below inside the config
mytestapp.config(function ($stateProvider, $controllerProvider) {
mytestapp._controller = mytestapp.controller
mytestapp.controller = function (name, constructor){
$controllerProvider.register(name, constructor);
return (this);
}
......
Step 3: Add the resolve method as below
state("privacy", {
url: "/privacy",
controller: "PrivacyController",
resolve: {
deps : function ($q, $rootScope) {
var deferred = $q.defer();
require(["js/privacy"], function (tt) {
$rootScope.$apply(function () {
deferred.resolve();
});
deferred.resolve()
});
return deferred.promise;
}
},
templateUrl: "templates/privacy.html"
})
Is it possible to load a controller, it's js file, and a template dynamically based on a route group? Psuedo code which doesn't work:
$routeProvider.when('/:plugin', function(plugin) {
templateUrl: 'plugins/' + plugin + '/index.html',
controller: plugin + 'Ctrl',
resolve: { /* Load the JS file, from 'plugins/' + plugin + '/controller.js' */ }
});
I've seen a lot of questions like this one but none that loads the js file/controller based on a route group.
I managed to solve it inspired by #calebboyd, http://ify.io/lazy-loading-in-angularjs/ and http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx
Using http://dustindiaz.com/scriptjs
app.js
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
});
Then i register the "load controller by group" route.
$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
return 'plugin/' + rd.plugin + '/index.html';
},
resolve: {
load: function($q, $route, $rootScope) {
var deferred = $q.defer();
var dependencies = [
'plugin/' + $route.current.params.plugin + '/controller.js'
];
$script(dependencies, function () {
$rootScope.$apply(function() {
deferred.resolve();
});
});
return deferred.promise;
}
}
});
controller.js
app.register.controller('MyPluginCtrl', function ($scope) {
...
});
index.html
<div ng-controller="MyPluginCtrl">
...
</div>
You can use RequireJS to do this. Something like:
$routeProvider.when('/:plugin',{
templateUrl: 'plugins/' + plugin + '/index.html',
controller: plugin + 'Ctrl',
resolve: {myCtrl: function($q){
var deferred = $q.defer();
require('myCtrlFile',function(){
deferred.resolve();
});
return deferred.promise;
}}
});
You will also need to register the controller dynamically. By exposing your providers in the app config.
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
app.register =
{
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
});
You controller file might then look like:
define(['app'],function(app){
app.register.controller('myCtrl',MyCtrlFunction);
});
This is just the general idea. I use a similar implementation to the one described here
I also use ui-router. I'm not certain if behavior is the same with ngRoute.
Here is some solution you can do for this code
$routeProvider.when('/:plugin', function(plugin) {
templateUrl: 'plugins/' + plugin + '/index.html',
controller: fun,
loadFrom:"assets/controller/myJsController"// this is our custom parameter we are passing to controller to identify the remote controller file.
});
We will create a parent function for all controller and will call all controller within this function as per defined in route configuration (in loadFrom key of route configuration).
function fun($scope, $http, $location, $timeout, $route) {
$timeout(function () {
var path = $route.current.loadForm;
$http.get("${pageContext.servletContext.contextPath}/resource/controller/" + path + ".js")
.then(function (rsp) {
eval(rsp.data);
});
});
};
in assets/controller/myJsController.js file the code will be as
(function($scope){
//the whole code for controller will be here.
$scope.message="working."
})($scope)
Only thing you have to remember that in parent function you have to use all dependencies.
Simplest way with active this with less amount of code
require.js config file.
require.config({
urlArgs: 'v=1.0',
baseUrl: '/'
});
app.config(['$controllerProvider', '$compileProvider', '$filterProvider', '$provide','$routeProvider',function($controllerProvider, $compileProvider, $filterProvider, $provide,$routeProvider) {
app.register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
// Resolver to load controller, service, directive
var resolveController = function(dependencies) {
return {
load: ['$q', '$rootScope', function ($q, $rootScope) {
var defer = $q.defer();
require(dependencies, function () {
defer.resolve();
$rootScope.$apply();
});
return defer.promise;
}]
}
};
$routeProvider
.when("/home", {
templateUrl : "templates/home.html",
controller: 'HomeCtrl',
resolve: resolveController(['controller/HomeCtrl'])
})
.when("/ContactUs", {
templateUrl : "templates/ContactUs.html",
controller: 'ContactUsCtrl',
resolve: resolveController(['controller/ContactUsCtrl'])
})
.when("/About", {
templateUrl : "templates/About.html",
controller: 'AboutCtrl',
resolve: resolveController(['controller/AboutCtrl'])
});
$routeProvider.otherwise('/home');
}]);
Your controllers should look like this.
define(['app'],function(app){
app.register.controller('HomeCtrl',['$scope',function($scope){
// Controller code goes here
}]);
});