Here is my route config file
$stateProvider.state('process', {
url: '/process',
params: {
title: 'Process Name'
},
views: {
'processDemo': {
component: 'process'
}
},
resolve: {
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('demo');
return $translate.refresh();
}]
}
});
Here is my demo.json file
{
"name": "Process"
}
I want to use demo.json name in my config file. Anybody can help for this?
Related
I want to create one Module with multiple controller in different file so i use requirejs but when i implement there error are occured in angular js
These error are occured when i implement requirjs
1.
2.
-----------------------
This is my main.js File
require.config({
paths: {
'angular' : '/js/Angular.js',
'ngRoute': '/js/Angular-Route.js',
'angularAMD': 'http://cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min',
'Workflow': 'Workflow'
},
waitSeconds: 0,
shim: {
'angular': {
exports: 'angular'
},
'angularAMD': {
deps: ['angular']
},
'ngRoute': {
deps: ['angular']
},
'Workflow': {
deps: ['angular']
}
},
deps: ['Workflow']
});
This is App.js File
define(['angular', 'angularAMD', 'ngRoute'], function (angular, angularAMD) {
var Workflow = angular.module("Workflow", ["ngRoute"]);
Workflow.config(function ($routeProvider) {
$routeProvider
.when("/home", {
controller: 'WorkflowController',
template: '<dt-task></dt-task>'
})
.when("/second", {
templateUrl: "/Directive/second.html",
})
});
return angularAMD.bootstrap(Workflow);
});
This is Controller
define(['Workflow'], function (Workflow) {
Workflow.controller("WorkflowController", function ($scope) {
$scope.task = {
task: null,
url: null,
Method: null,
Auth: null,
params: [
{ key: '', value: '' },
]
};
$scope.addTextBox = () => {
$scope.task.params.push({ key: '', value: '' });
}
$scope.addtask = () => {
$scope.Atask = {
"Task": $scope.task.task,
"Url": $scope.task.url,
"Method": $scope.task.Method,
"Auth": $scope.task.Auth,
"params": [],
}
Can someone help me with this routing? It always gives the following error:
Uncaught Error: [$injector:modulerr]
The code in question:
var app = angular.module('mainApp', ['ui.router', 'oc.lazyLoad','ngRoute', 'commonApp', 'adminApp', 'ui.bootstrap', 'gm', 'ngMessages', 'daterangepicker','customDirectives', 'mw-datepicker-range','uiGmapgoogle-maps','ngAutocomplete','ngImageCompress']);
app.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider','uiGmapGoogleMapApiProvider' , function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider,uiGmapGoogleMapApiProvider) {
$urlRouterProvider.otherwise("/home");
//Config For ocLazyLoading
$ocLazyLoadProvider.config({
'debug': true, // For debugging 'true/false'
'events': true, // For Event 'true/false'
'modules': [{ // Set modules initially
name : 'home', // State1 module
files: ['home/home.controller.js',
'home/home.service.js',
'home/homeMapper.service.js',
]
},{
name : 'about', // State2 module
files: ['about/about.controller.js']
}]
});
//Config/states of UI Router
$stateProvider
.state('home', {
url: "/home",
views : {
"" : {
templateUrl:"/home/home.html"
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('home'); // Resolve promise and load before view
}]
}
})
.state('about', {
url: "/about",
views : {
"" : {
templateUrl:"/about/about.html"
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('about'); // Resolve promise and load before view
}]
}
});
}]);
I have a problem with my code... i'm trying to do a table by json from a API.
But the table does not work, if you put static values on html, it works. But by json no.
.state('nimbus.produtos', {
url: "/Produto",
templateUrl: "/ProdutoContext/Produto/Index",
controller: function ($scope, $http) {
$http.get('//localhost:61115/api/produtoapi')
.success(function (data) {
$scope.Produtos = data;
console.log("carregou API");
})
.error(function (data) {
console.log("Erro ao acessar URL de produtos");
});
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
console.log("OCLazy carregou"),
{
serie: true,
files: ['/Scripts/plugins/dataTables/datatables.min.js', '/Content/css/plugins/dataTables/datatables.min.css']
},
{
serie: true,
name: 'datatables',
files: ['/Scripts/plugins/dataTables/angular-datatables.min.js']
},
{
serie: true,
name: 'datatables.buttons',
files: ['/Scripts/plugins/dataTables/angular-datatables.buttons.min.js']
},
]);
}
}
})
I think the datatable has to load after JSON File, but it loads before JSON file.
how can i solve this?
Thanks a lot!
i', using angular ui routing with ocLazyLoad to load the appendices files according to the choosen stat as the following code shows
my problem is:
when i load a new state and click refresh sometime the factories is not initialized -i think it's because the files is not fully loaded before init the controller-
i also tried to merge all files in the same ocLazyLoad function and use serie : true but dosenot work
is it the right use of ocLazyLoad
i've the following modules
angular.module('app', [ "oc.lazyLoad"]);
angular.module("app.inventory", []);
angular.module("app.sales", []);
and here is the routing
.state("invoicesAddEdit", {
url: "/invoice/:invoiceId",
templateUrl: "app/components/sales/invoice/views/invoiceAddEdit.view.html",
controller: "InvoiceAddEditController",
resolve: {
invoiceId: ['$stateParams', function ($stateParams) {
return $stateParams.invoiceId;
}],
settings: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.settings",
files: [
"app/components/settings/settings.module.js",
"app/components/settings/currency/services/currency.factory.js",
"app/components/settings/deliveryMan/services/deliveryMan.factory.js",
]
})
}],
inventory: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.inventory",
files: [
"app/components/inventory/inventory.module.js",
"app/components/inventory/customer/services/customer.factory.js",
"app/components/inventory/store/services/store.factory.js",
"app/components/inventory/product/services/product.factory.js",
]
})
}],
purchasing: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.purchasing",
files: [
"app/components/purchasing/purchasing.module.js",
"app/components/purchasing/purchaseOrder/services/purchaseOrder.factory.js",
]
})
}],
sales: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.sales",
files: [
"app/components/sales/sales.module.js",
"app/components/sales/representative/services/representative.factory.js",
"app/components/sales/invoice/services/invoice.factory.js",
"app/components/sales/invoice/controllers/invoiceAddEdit.controller.js",
]
})
}],
}
})
Try to inject the oCLazy Load as deps and insert the required files before specific tag in the html like the following :
resolve: {
invoiceId: ['$stateParams', function ($stateParams) {
return $stateParams.invoiceId;
}],
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.settings",
insertBefore: '#ng_load_plugins_before',
files: [
"app/components/settings/settings.module.js",
"app/components/settings/currency/services/currency.factory.js",
"app/components/settings/deliveryMan/services/deliveryMan.factory.js",
]
})
}],
Add the following link to the header of the html page or the View:
<link id="ng_load_plugins_before"/>
I've been working on some boilerplate stuff and ran into something peculiar.
I have a module and it works fine:
define([
'angular',
'angular-couch-potato',
'angular-sanitize',
'angular-ui-router',
], function (ng, couchPotato) {
"use strict";
var module = ng.module('app.home', [
'ngSanitize',
'ui.router'
]);
module.config(function ($stateProvider, $couchPotatoProvider) {
$stateProvider
.state('app.home', {
url: '/',
views: {
"content#app": {
controller: 'HomeCtrl',
templateUrl: 'app/components/home/views/home.html',
resolve: {
deps: $couchPotatoProvider.resolveDependencies([
'components/home/controllers/HomeController'
])
}
}
},
data:{
title: 'Home'
}
});
});
couchPotato.configureApp(module);
module.run(function($couchPotato){
module.lazy = $couchPotato;
});
return module;
});
Now if I remove angular-sanitize from define like so:
define([
'angular',
'angular-couch-potato',
'angular-ui-router',
], function (ng, couchPotato) {
"use strict";
var module = ng.module('app.home', [
'ui.router'
]);
module.config(function ($stateProvider, $couchPotatoProvider) {
$stateProvider
.state('app.home', {
url: '/',
views: {
"content#app": {
controller: 'HomeCtrl',
templateUrl: 'app/components/home/views/home.html',
resolve: {
deps: $couchPotatoProvider.resolveDependencies([
'components/home/controllers/HomeController'
])
}
}
},
data:{
title: 'Home'
}
});
});
couchPotato.configureApp(module);
module.run(function($couchPotato){
module.lazy = $couchPotato;
});
return module;
});
It no longer works. Chrome throws this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A18%3A170)
My controller is empty with it's only dependency $scope and the view file just has hello world around p tags.
Can someone please explain to me what I am missing or why this is happening?