I have a backend which is generating a json file containing information about the most important pages. I would like to load this json file, and build corresponding states based on the data in the file. I can't inject $stateProvider into .run or .controller, and I can't inject $http into .config, so I am feeling a bit lost.
So the question is. How I can load a json file, go through the data and build states based on this data?
Quick edit: If I am lacking in providing the necessary information, please tell, and I'll try and improve the question.
I've attempted to solve a similar problem and created UI-Router Extras "Future States". Future states tries to solve additional problems, such as lazy loading using RequireJS, placeholders for entire unloaded modules, and routing by bookmarked URL to unloaded placeholders.
Here is a plunk demonstrating how to use Future States for your use case: http://plnkr.co/edit/Ny7MQcmy35dKeEjbw57d?p=preview
I tried using the stackoverflow snippet runner, but had problems, so here is a non-runnable paste of the code.
JS:
// Code goes here
var app = angular.module("jsonstates", ["ct.ui.router.extras"]);
app.config([ '$stateProvider', '$futureStateProvider',
function($sp, $fsp ) {
var futureStateResolve = function($http) {
return $http.get("states.json").then(function(response) {
angular.forEach(response.data, function(state) {
$sp.state(state);
})
})
}
$fsp.addResolve(futureStateResolve);
console.log($fsp);
}]);
app.controller("someCtrl", function() { })
Html:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
<script src="https://rawgit.com/christopherthielen/ui-router-extras/0.0.10/release/ct-ui-router-extras.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="jsonstates">
<h1>Hello Plunker!</h1>
Top state Nested state
<div ui-view></div>
</body>
</html>
Json:
[
{
"name": "top",
"url": "/top",
"controller": "someCtrl",
"template": "<h1>top state</h1><div ui-view></div>"
},
{
"name": "nested",
"parent": "top",
"url": "/nested",
"controller": "someCtrl",
"template": "<h1>nested state</h1><div ui-view></div>"
}
]
Related
I want to make an ajax request to a file (a simple json file that contains an array with string objects) on my local host from a factory i created. I want to pass this information to my controller which will also display the info in the view. Find my code below, what am I doing wrong?
//HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ng-cribs</title>
<link rel="stylesheet"type="text/css"href="assets/css/bootstrap.min.cs>
</head>
<body ng-app="ngCribs" ng-controller="ngCribsController">
<div class="well" ng-repeat="crib in cribs">
<h3>{{ crib.address }}</h3>
<p><strong>Type: </strong>{{ crib.type }}</p>
<p><strong>Description: </strong>{{ crib.description }}</p>
<p><strong>Price: </strong>{{ crib.price | currency }}</p>
</div>
<script type="text/javascript" src="assets/js/angular.min.js">
<script type="text/javascript" src="assets/js/angular-route.min.js">
<script type="text/javascript" src="assets/js/uibootstrap2.5.0.min.js">
<script type="text/javascript" src="assets/js/uibootstraptpls2.5.0.min.js">
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="scripts/ngCribsController.js">
<script type="text/javascript" src="scripts/CribsFactory.js">
</body>
</html>
//app.js
angular.module('ngCribs',['ui.bootstrap']);
//cribsFactory.js
angular
.module('ngCribs')
.factory('cribsFactory', function($http) {
function getCribs() {
return $http.get('data/data.json');
}
return {
getCribs: getCribs
}
});
//ngCribsController.js
angular
.module('ngCribs')
.controller('ngCribsController', function($scope, cribsFactory){
$scope.cribs;
cribsFactory.getCribs().sucess(function(data) {
$scope.cribs = data;
}).error(function(error) {
console.log(error);
});
});
//data.json
[
{
"type": "Condo",
"price": 220000,
"address": "213 Grove Street",
"description": "Excellent place, really nice views!"
},
{
"type": "House",
"price": 410500,
"address": "7823 Winding Way",
"description": "Beautiful home with lots of space for a large space!"
},
{
"type": "Duplex",
"price": 395000,
"address": "834 River Lane",
"description": "Great neighbourhood and lots of nice green space."
}
];
See
My project file structure
The basic idea of the app is to get the information from the json file which is located on my local server and display the information in the view. But it just displays a blank page in the browser and displays these errors in the inspector.
Any help is very much appreciated.
Use then/catch instead of success/error
You are returning the promise that you are getting from
$http.get(..), neither you are chaining with response data nor you
are using interceptors (assuming) to transform each results, so by
default you will get the response objects when immediate promise
resolves, so you need to use data property inside it.
Code of your controller should be like:
angular
.module('ngCribs')
.controller('ngCribsController', function($scope, cribsFactory) {
$scope.cribs;
cribsFactory.getCribs().then(function(response) {
$scope.cribs = response.data;
}).catch(function(error) {
console.log(error);
});
});
I have situation where I would like to configure component in html code. I have the following structure.
game.html which is served as in url like example.com/game/7999 which should show page for game 7999.
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>Providence</title>
<script src="/js/angular.js"></script>
<script src="/data-access/data-access.module.js"></script>
<script src="/data-access/data-access.service.js"></script>
<script src="/score-info/score-info.module.js"></script>
<script src="/score-info/score-info.component.js"></script>
<script src="/js/game.js"></script>
</head>
<body>
<div ng-controller="myController">
<p> {{ game_id }} </p>
<score-info game_id="{{ game_id }}"></score-info>
</div>
</body>
Corresponding game.js, which seem to work as game_id shows up correctly.
angular.module('myApp', [
'dataAccess',
'scoreInfo' ],
function($locationProvider){
$locationProvider.html5Mode(true);
});
angular.
module('myApp').
controller('myController', function($scope, $location) {
var split_res = $location.path().split('/');
var game_id = split_res[split_res.length-1];
$scope.game_id = game_id
});
My problem lies in component where I'm unable to inject the game_id. Here's score-info.component.js where the game_id does not become visible.
angular.
module('scoreInfo').
component('scoreInfo', {
templateUrl : '/score-info/score-info.template.html',
controller : function ScoreInfoController(dataAccess) {
self = this;
console.log(self.game_id) // self.game_id == undefined
dataAccess.game(self.game_id).then(function(game) {
self.game = game;
});
},
bindings : {
game_id : '<'
}
});
I noticed that some earlier answers recommended using a separate service of wiring up controller and component. That does not work for me as I need to be able to include varying number of scoreInfo -blocks in a single page.
I'm going to answer this myself. The answer was provided by JB Nizet in comments.
First problem was naming related. The code needs to stick with angular.js' naming convention and use gameId: '<' and use <score-info game-id="game_id">
Also < binding must have the reference in the element without curly braces: <score-info game-id="game_id">
Finally, the components controller needs to take in to the account breaking changes between angular 1.5 -branch and 1.6 -branch. See angular CHANGELOG. Specifically ScoreInfoController becomes
function ScoreInfoController(dataAccess) {
self = this;
self.$onInit = function() {
dataAccess.game(self.game_id).then(function(game) {
self.game = game;
})
}
I have an API (http://localhost:5000/v2/_catalog) returning a json structure as follows:
{
"repositories":
[
"start/imageA",
"start/imageA"
]
}
Now I want to parse the result with ng-admin. My admin.js (CORS is solved on my webserver) looks as follows:
var myApp = angular.module('r2ui', ['ng-admin']);
myApp.config(['RestangularProvider', function(RestangularProvider) {
RestangularProvider.addFullRequestInterceptor(function(element, operation, what, url, headers, params, httpConfig) {
delete params._page;
delete params._perPage;
delete params._sortDir;
delete params._sortField;
return { params: params };
});
}]);
myApp.config(['NgAdminConfigurationProvider', function (nga) {
var admin = nga.application('Registry v2 UI')
.baseApiUrl('http://localhost:8081/v2/'); // main API endpoint
var catalog = nga.entity('_catalog');
catalog.listView().fields([
nga.field('repositories', 'embedded_list')
.targetEntity(nga.entity('repositories'))
.targetFields([
nga.field('.').isDetailLink(true),
nga.field('.').label('Repository')
])
.listActions(['edit'])
]);
admin.addEntity(catalog);
nga.configure(admin);
}]);
How can this be achieved?
Update below
Sorry I omitted the file index.html cause I thought it is to obvious to mention:
<head>
<meta charset="utf-8">
<title>Registry v2 UI</title>
<link rel="stylesheet" href="node_modules/ng-admin/build/ng-admin.min.css">
</head>
<body ng-app="r2ui">
<div ui-view></div>
<script src="node_modules/ng-admin/build/ng-admin.min.js" type="text/javascript"></script>
<script src="admin.js" type="text/javascript"></script>
</body>
</html>
The question is still the same. The array is not parsed correctly and I do not find in the documentation how this could be achieved with the given json.
I've got the same problem, and I finally solved it by set the field type to "choices".
In your case, try to change:
nga.field('repositories', 'embedded_list')
to:
nga.field('repositories', 'choices')
Backbone.Router.extend is giving me the error: "extend" cannot be used on
undefined
Nodejs and express is also used in this project.
but i have not mentioned anythin related to backbone in app.js
Below is my index.html and main.js.
I have a feeling, the jquery,underscore and backbone files may not be loading properly,due to which this error is happening
Kind of beginner in backbone.Any help is greatly appreciated
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="javascripts/jquery.min.js"></script>
<script src="javascripts/json2.js"></script>
<script src="javascripts/underscore-min.js"></script>
<script src="javascripts/backbone-min.js"></script>
<script src="javascripts/main.js"></script>
</head>
<body>
<h1>< title </h1>
<p>Welcome to world of html</p>
</body>
</html>
main.js
$(document).ready(function(){
var Theater = {
Models: {},
Collections: {},
Views: {},
Templates:{},
Routers:{}
}
Theater.Models.Movie = Backbone.Model.extend({});
Theater.Collections.Movies = Backbone.Collection.extend({
model: Theater.Models.Movie,
url: "/json",
initialize: function(){
console.log("Movies initialize")
}
});
Theater.Routers = Backbone.Router.extend({
initialize:function(){ console.log("defaultRoute");},
routes: {
"": "defaultRoute"
},
defaultRoute: function () {
console.log("defaultRoute");
}
});
console.log("gonna call approuter");
var appRouter = new Theater.Routers();
Backbone.history.start();
});
A large number of tiny tweaks and micro bugfixes, best viewed by looking at the commit diff. HTML5 pushState support, enabled by opting-in with: Backbone.history.start({pushState: true}). Controller was renamed to Router, for clarity. Collection#refresh was renamed to Collection#reset to emphasize its ability to both reset the collection with new models, as well as empty out the collection when used with no parameters.
Backbone change log of 0.5.0
http://backbonejs.org/
Backbone's Router was called Controller and renamed to Router when it got version 0.5
Simply replace your Backbone and Underscore files into newer version or use Controller instead. then your code should work.
I strongly recommend to update your Backbone file due to bugs which Backbone used to have.
I've an app that retrieve server data using ajax. I've tested in localhost, the loader work fine, but when I install my extension and click on the browser action popup, the loader won't show. The little popup delayed for 2 second and shows the result.
popup.html
<div class="cssLoader" ng-show="loader">Fetching...</div>
js
app.controller('MainControl', function($scope, $http){
$scope.loader = true;
$http({
url: "http://www.corsproxy.com/mydomain.net/items.php",
method: "GET",
}).success(function(data) {
$scope.data = data;
$scope.loader = false;
});
});
Without seeing more of your code it is difficult to know for sure. Nonetheless, my suspicion (based upon the fact that your code works outside of the Chrome extension environment but not inside that environment) is that since you're operating in a Chrome Extension environment, you'll need to include the ng-csp directive (see Chrome documentation or Angular documentation).
I developed an Angular app inside a chrome extension and I needed to use ng-csp in order for Angular to load and fully function properly.
Essentially, Chrome extensions (and even more apps) place a number of restrictive security permissions on the browser environment and ng-csp tells Angular to operate in a way that is more consistent with a strict CSP.
I have included an example below that shows loading the entire Angular application properly:
<!DOCTYPE html>
<html ng-app="myApp" ng-csp>
<head>
<meta charset="utf-8">
<title>My Extension</title>
<link href="css/index.css" rel="stylesheet">
<!-- Include in the next line your Angular library code -->
<script type="text/javascript" src="js/angular-lib.js"></script>
<!-- Include in the next line your custom Angular code such as the $http to load the loader -->
<script type="text/javascript" src="js/myapp.js"></script>
</head>
<body>
<!-- Place your HTML code for the 'Fetching' anywhere here in the body -->
</body>
</html>
According to the docs, CSP "is necessary when developing things like Google Chrome Extensions" (more info can be found on the linked page).
Furthermore, besides defining ng-csp on your root element, there is on more crucial point (which affects ngShow/ngHide):
CSP forbids JavaScript to inline stylesheet rules. In non CSP mode Angular automatically includes some CSS rules (e.g. ngCloak). To make those directives work in CSP mode, include the angular-csp.css manually.
I found this to be necessary only if the angular.js script is defined inside the app's context.
In any case, here is the source code of minimal demo extension that seems to work fine for me:
Structure:
extension-root-dir/
|_____manifest.json
|_____popup.html
|_____popup.js
|_____angular.js
|_____angular-csp.css
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"browser_action": {
"default_title": "Test Extension",
//"default_icon": {
// "19": "img/icon19.png",
// "38": "img/icon38.png"
//},
"default_popup": "popup.html"
}
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>Test Extension</title>
<link rel="stylesheet" href="angular-csp.css" />
</head>
<body ng-csp ng-app="myApp" ng-controller="mainCtrl">
<div ng-show="loader">Fetching...</div>
<div ng-hide="loader">{{status}}</div>
<script src="angular.js"></script>
<script src="popup.js"></script>
</body>
</html>
popup.js:
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($http, $scope) {
$scope.loader = true;
$http({
url: "http://www.corsproxy.com/mydomain.net/items.php",
method: "GET"
}).finally(function () {
$scope.loader = false;
}).then(function (response) {
$scope.data = response.data;
$scope.status = 'Success !';
}, function (response) {
$scope.status = 'ERROR !';
});
});
(BTW, I am using AngularJS v1.2.16.)