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!
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
}]
}
});
}]);
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?
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?