I am creating angularjs based Dashboeard, I am using ui.router to create states from json file,
My topNavbar and states are being created by pages.json file.
My app works fine but when refresh the page with this"localhost:#/map" url it redirects to "localhost:#/dashboard" state.
how I can set the state which user enters in URL?
var $urlRouterProviderRef = null;
var $stateProviderRef = null;
myApp.run(function ($q, $rootScope, $state, $http, navbars)
{
navbars.load()
$http.get("js/config/pages.json")
.success(function (data) {
angular.forEach(data, function (value, key) {
var state = {
"url": value.url,
"templateUrl": value.templateUrl,
"controller": value.controller
};
$stateProviderRef.state(value.sref, state);
});
});
}
myApp.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$urlRouterProviderRef = $urlRouterProvider;
$stateProviderRef = $stateProvider;
})
pages.json
[
{
"displayname": "Dashboard",
"active": true,
"name": "dashboard",
"sref": "dashboard",
"url": "/dashboard",
"controller": "layoutOneCtrl",
"templateUrl": "views/dashboard.html",
"icon": "fa-dashboard",
"children": [{
"name": "dashboard"
}]
}, {
"displayname": "Map",
"open": false,
"active": false,
"name": "map",
"sref": "map",
"url": "/map",
"templateUrl": "views/layout1.html",
"controller": "layoutOneCtrl",
"icon": "fa-map-marker",
"children": [{
"name": "map"
}]
}
.
.
.
]
when you refresh page , your run function called and read value from pages.json , you need to update pages.json file or you need to save the url value in localstorage or sessionstorage so whenever you refresh the page you can access url value from localstorage or sessionstorage.
Related
Why is this not pulling back anything? I keep getting the error message and I cannot figure out why. I tried to use JSONParse on the response data and reassigning it to the $scope but that didn't help. I have no errors in my F12 Console. I know JQuery is a much better solution but I prefer the Javascript, i'll take both though. Thanks ahead of time.
var controlSeletor = angular.module('moduleName', []);
controlSeletor .controller('variableController', function($scope, $http) {
$http.get("data.json")
.then(
function(response) {
// Success
$scope.variable = response.data;
},
function(response){
// Error
alert("Error!");
}
);
});
The json is a separate file and looks like this:
[{
"url": "place.html",
"name": "Bob",
"pic": "bob.jpg"
},
{
"url": "place.html",
"name": "Mike",
"pic": "mike.jpg"
},
{
"url": "place.html",
"name": "Tony",
"pic": "tony.jpg"
}];
Your JSON is not valid, change it as follows,
[ {
"url": "place.html",
"name": "Bob",
"pic": "bob.jpg" }, {
"url": "place.html",
"name": "Mike",
"pic": "mike.jpg" }, {
"url": "place.html",
"name": "Tony",
"pic": "tony.jpg" } ]
var app = angular.module('filterApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('data.json').
then(function(response) {
$scope.variable = response.data;
});
});
DEMO
Few observations :
Controller declaration is not correct. It should be controlSeletor.controller instead of controlSeletor .controller.
Your JSON is not a valid JSON.
Valid JSON should be like this :
I have a problem with rootview. I want create 2 views (login form and home with navigation list).
this is my home view:
I want when I clicked menu in left (root item 1, 2, etc), show content form (just content and still showing menu). I success when root view set to home view but in login view have menu component (navigation list). I want set root view to Home when i load home view, and set root view to other (exclude Home view) when i load login view.
Component.js :
sap.ui.define([
"sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";
return UIComponent.extend("sap.ui.demo.Component", {
metadata: {
manifest: "json"
},
createContent : function() {
// create root view
var oView = sap.ui.view({
id : "mainContents",
viewName : "sap.ui.demo.template.App",
type : "XML", // <-- change this to JSON
viewData : {
component : this
}
});
// done
return oView;
},
init: function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments); // calling parent UIComponents
// create the views based on the url/hash
this.getRouter().initialize(); // initializing router
// this.i18nModel(); // set i18n model
},
i18nModel : function(){
var i18nModel = new ResourceModel({
bundleName: "sap.ui.demo.template.i18n.i18n"
});
this.setModel(i18nModel, "i18n");
}
});
});
manifest.json:
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sap.ui.demo.template",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_bluecrystal",
"sap_belize"
]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView":
{
"viewName": "sap.ui.demo.template.Home",
"type": "XML",
"id": "app"
}
,
"dependencies" : {
"minUI5Version": "1.30",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.tnt": {},
"sap.ui.layout": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.template.i18n.i18n"
}
}
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"controlId": "mainContents",
"viewType": "XML",
"controlAggregation": "pages",
"viewPath": "sap.ui.demo.template",
"async": true
},
"routes": [
{
"pattern": "",
"name": "first",
"target": "first"
},
{
"pattern": "home",
"name": "home",
"target": "second"
},
{
"pattern": "page1",
"name": "page1",
"target": "page1"
},
{
"pattern": "login",
"name": "login",
"target": "login"
},
{
"pattern": "mainContents",
"name": "mainContents",
"target": "mainContents"
}
],
"targets": {
"first": {
"viewName": "Index"
},
"second": {
"viewName": "Home"
},
"page1": {
"viewName": "Page1"
},
"login": {
"viewName": "Index"
},
"mainContents": {
"viewName": "Home"
}
}
}
}
}
I if set root view to Home :
I want to this:
when I set rootview to App, login true but home view false.
App view:
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="false">
<App id="mainContents" class="blueBackground">
</App>
</mvc:View>
How to fix this problem about rootview?
Thanks. Bobby.
Set rootview to one view, Handle the rest of the view traversals in controller, with router.navTo() function where you can specify pattern as well.
Just do a cleanup while navigating to another view, destroy the menu created. and create it again on traversal to the concerned view
I have category array. there are more products.
I need show categories in category page.
when click on a category, I have to redirect the product page and show the necessary products.
When click on a product, I have to redirect the product_details page and show the necessary product details.
category loaded to the category page, when click on that it will redirect the product page. But, I cant see products.
And what are the errors of these controllers, and how to create "product_details.html", and "product.html" page also.
I have to show like this :
category page : term_id, name
product page : post_title, ID
product details page : post_title, post_date, post_author, ID
categorylist-product.json
{
"category": [{
"term_id": "10",
"name": "Arden Grange",
"slug": "arden-grange",
"products": [{
"ID": "47",
"post_title": "Arden Grange, Premium",
"post_date": "2015-10-20 16:13:04",
"post_author": "5"
}, {
"ID": "50",
"post_title": "Arden Grange Puppy\/Junior Large Breed",
"post_date": "2015-10-21 04:56:23",
"post_author": "5"
}, {
"ID": "53",
"post_title": "Arden Grange Weaning\/Puppy",
"post_date": "2015-10-22 12:52:35",
"post_author": "5"
}]
}, {
"term_id": "8",
"name": "Menu 1",
"slug": "menu-1",
"products": [{
"ID": "38",
"post_title": "Home",
"post_date": "2015-10-20 10:43:44",
"post_author": "1"
}, {
"ID": "30",
"post_title": "",
"post_date": "2015-10-20 10:13:56",
"post_author": "1"
}, {
"ID": "31",
"post_title": "",
"post_date": "2015-10-20 10:13:57",
"post_author": "1"
}]
}]
}
CategoryController.js
app.controller('CategoryController', ['$scope','category', function($scope, category) {
category.success(function(data) {
$scope.userslists = data;
});
}]);
ProductController.js
app.controller('ProductController', ['$scope', '$routeParams', 'category', function($scope, $routeParams, category,products) {
category.success(function(data) {
$scope.users = data.category[$routeParams.id];
});
}]);
app.js
var app = angular.module('LookApp', ['ionic','ngCordova','ngRoute']);
app.config(function($stateProvider, $urlRouterProvider,$routeProvider) {
$routeProvider
.when('/', {
controller: 'CategoryController',
templateUrl: 'views/category.html'
})
.when('/:id', {
controller: 'ProductController',
templateUrl: 'views/users.html'
})
.when('/login/:friendId', {
controller: 'LoginController',
templateUrl: 'views/login.html'
})
.otherwise({
redirectTo: '/'
});
category.js (Service file)
app.factory('category', ['$http', function($http) {
return $http.get('http://localhost/youtubewebservice/shop-categorylist-product.php')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
see you have put your data in $scope.userlists so when you call your data in html then you need to do like this
category page
<div ng-repeat="user in userslists">
Term ID : {{user.category.term_id}}
Name : {{user.category.name}}
</div>
product page
<div ng-repeat="user in userslists">
Post Title : {{user.category.products.post_title}}
ID : {{user.category.products.ID}}
</div>
Details page
<div ng-repeat="user in userslists">
Post Title : {{user.category.products.post_title}}
Post Date : {{user.category.products.post_date}}
Post Author: {{user.category.products.post_author}}
ID : {{user.category.products.ID}}
</div>
Actually i have json scope in controller
bosAppModule.controller("module-menu-controller", function($scope, $compile, $http, layoutRenderingDataFactory) {
$scope.transactionalData={};
$scope.transactionalData.Data={"entityinfo":{"entity":"","tenantId":"292FEC76-5F1C-486F-85A5-09D88096F098","timeStamp":"2015-12-15T10:16:06.322Z"},"collections":{}};
});
$scope.transactionalData will be filled based on the user input. I mean it's two way binding. The complete JSON like finally.
{
"entityinfo": {
"entity": "Customer29Jan16",
"tenantid": "292FEC76-5F1C-486F-85A5-09D88096F098",
"timestamp": "2015-12-15T10:16:06.322Z"
},
"collections": {
"customer29jan16": {
"rowset": [
{
"cuid": "6293f82f-d202-45c0-9a7b-46cd955361a3",
"name": "test",
"quantity": "60",
"rate": "60",
"amount": "3600"
}
],
"meta": {
"parentreference": "***",
"pkname": "***",
"fkname": "***"
},
"rowfilter": []
},
"customer29jan16obj": {
"rowset": [
{
"cuobjid": "83bfc652-9f83-47d3-b173-b1a824ff3bed",
"fulladdress": "Electronic City",
"objaddr": "Bangalore",
"objname": "Testing",
"customer29jan16objcuid": "6293f82f-d202-45c0-9a7b-46cd955361a3"
}
],
"meta": {
"parentreference": "***",
"pkname": "***",
"fkname": "***"
},
"rowfilter": []
}
}
}
Once the this JSON values persited in the DB. We have to clear the scope. we are accessing this scope outside like this.
It's not clear. but scope getting change.
// get the scope of module and menu controller
var moduleMenuControllerScope = angular.element("[ng-controller=module-menu-controller]").scope();
// clear the crudObject
moduleMenuControllerScope.transactionalData.Data.collections = {};
moduleMenuControllerScope.$digest();
One thing i want to added here. If i will change particular form field then it's changing the view.
Anyone please advice me how to clear the scope and need to relect in view.
Thanks in advance..
instead of using $digest you try $apply. It will solve your problem.
I get this error: [$injector:modulerr] http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=myTmoApp.pdl&p1=Err…rkspace%2Fnetbeans-workspace%2FJsonParsing%2Fweb%2Fangular.min.js%3A18%3A3)
I have properly injected all services and scopes but still I get this error when I run the app.
Here is the code:
var app = angular.module("myTmoApppdl", []);
app.controller("myCtrl", function ($scope, jsonParsingService) {
var digitalData = digitalData || {};
digitalData =
{
"page": {
"pageInfo": {
"pageID": "12345",
"pageName": "smartphones:samsung-galaxy-s-5",
"pageURL": "www.t-mobile.com/products/smartphonesSamsungGalaxyS5",
"previousPageURL": "www.t-mobile.com/products/smartphones",
"prevPageName": "phones",
"version": "1.15",
"language": "en-US",
"geoRegion": "US",
"domain": "t-mobile.com",
"responsiveState": "desktop",
"timeStamp": "2015-03-23T20:52:23.563Z",
"currencyCode": "USD"
},
"category": {
"primaryCategory": "shop",
"subCategory": ["smartphones"],
"pageType": "product details",
"variant": "",
"channel": "",
"subChannel": "",
"flowName": "",
"storeID": "",
"referringApp": "tapestry"
},
"search": {
"searchTerm": "",
"searchResultCount": 0
}
}
};
digitalData = JSON.stringify(digitalData);
console.log("json to be parsed is: " + digitalData);
$scope.myTxt = "You have not parsed json yet";
$scope.myFunc = function () {
jsonParsingService.parseMyJson(digitalData);
$scope.myTxt = "Json parsing complete!";
console.log("Json parsing complete");
};
});
Service:
app.service('jsonParsingService', function () {
this.parseMyJson = function (json) {
var obj = JSON.parse(json);
console.log(obj);
};
});
It is just a sample app I am trying to run but unable to figure out what went wrong
Script files:
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.min.js"></script>
<script src="parseJson.js" type="text/javascript"></script>
You have to pass in the service in the following format to the Controller. See the array notation.
.controller('myCtrl', ['$scope', 'jsonParsingService',function($scope,jsonParsingService){
//controller code here
}]);
See the docs about Dependency Injection here
It seems that your angular.js wasn't available. Please see a running example in this bin