I can't get UI-Router to work, which is really annoying because I'm building a site off of another site I built where it was working fine. Currently, ui-view is not displaying anything, and ui-sref links are not clickable or redirecting. I'm not getting any errors either. My code is below. Any help would be much appreciated!
JS: app.js
var app = angular
.module("RssTransfers", ["ui.router"])
.config(MainRouter);
function MainRouter($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('transfers', {
url: '/',
templateUrl: 'transfers.html',
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('upload', {
url: '/upload',
templateUrl: 'upload.html'
})
};
HTML: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>RSS Transfers</title>
<link rel="stylesheet" type="text/css" href="./css/materialize.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="./js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="./js/ng-file-upload.min.js"></script>
<script src="./js/app.js"></script>
<script src="./js/transferController.js"></script>
<script src="./js/uploadController.js"></script>
<script src="./js/materialize.js"></script>
</head>
<body ng-app="RssTransfers">
<div ng-include="'navbar.html'"></div>
<div class="wrapper" ui-view></div>
</body>
</html>
dummy text to display: transfers.html
<div ng-controller="TransferController as transfer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, est, cum. Dicta, eius obcaecati quia culpa ipsam quibusdam tempore adipisci molestias optio, nam corporis, veritatis voluptatem incidunt cumque a sequi?</p>
</div>
As requested, here's the code for the controller:
TransferController.js
angular.module('RssTransfers')
.controller('TransferController', TransfersController);
TransfersController.$inject = ['$http'];
function TransfersController($http){
var self = this;
self.all = [];
self.addTransfer = addTransfer;
self.newTransfer = {};
self.getTransfer = getTransfer;
getTransfers();
function getTransfers(){
$http
.get('http://localhost:3000/transfers/')
.then(function(response){
self.all = response.data.transfers;
});
}
function addCriminal() {
$http
.post('http://localhost:3000/transfer', self.newTransfer)
.then(function(response){
getTransfers();
});
self.newTransfer = {};
}
}
Solved, although I'm not sure why. I deleted my frontend files and started from scratch, and it works fine. I suspect there may be an issue with ui-router and ng-file-upload conflicting, but I'll tackle that issue when I get there.
I've taken your code and created a plunkr here. Note - that it doesn't contain the controller just yet.
angular.module('RssTransfers',['ui.router']);
(function() {
'use strict';
angular
.module('RssTransfers')
.config(routing);
routing.$inject = ['$stateProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider'];
function routing( $stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider ){
$urlMatcherFactoryProvider.strictMode(false);
// For any unmatched url, redirect to /root
$urlRouterProvider.otherwise("/transfers");
$stateProvider
.state('transfers', {
url: '/transfers',
templateUrl: 'transfers.html',
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('upload', {
url: '/upload',
templateUrl: 'upload.html'
});
}
})();
though I'm still unsure why yours doesn't work...
Related
I have an issue when i get the data with vue js, it returns a HTML not json. I conse the route params it show an id of the post. This is my code in vue:
axios.get("api/posts/" + this.$route.params.id).then(response => {
console.log(this.$route.params.id);
console.log(response.data);
});
And this is the response data :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="http://127.0.0.1:8000/css/app.css">
<script src="http://127.0.0.1:8000/js/app.js" defer></script>
</head>
<body>
<div id="app">
<index></index>
</div>
</body>
</html>
But in the postman, i access the url "api/posts/1" it show json data
{"id": 1,"title": "Schambergerstad Fancy Rooms",
"description": "Qui minima tempora ea modi maiores. Quaerat non aut porro vel occaecati. Deleniti quaerat quod veniam. Dolor ducimus facilis molestiae omnis fuga occaecati.",
"created_at": "2020-06-04T11:28:25.000000Z","updated_at": "2020-06-04T11:28:25.000000Z"
}
But i see in network tab, the request url is "http://127.0.0.1:8000/posts/api/posts/1". Why become to that url? I call it in axios is "api/posts/1"
How to fix it?
try adding headers Content-Type json
axios.get("/api/posts/" + this.$route.params.id, {
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
console.log(this.$route.params.id);
console.log(response.data);
});
Okay sorry it's just typo axios.get("api/posts/" + this.$route.params.id) it's should add "/" before "api/posts/"
axios.get("/api/posts/" + this.$route.params.id)
I'm trying to build a webpage to show JSON data based on the link we select and i had done it and its working fine. My issue is I need to show first JSON data object before selecting any link (initially).
Plunker Link - http://embed.plnkr.co/SPbvgPhfdeCqZG0yzzeZ/
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Testing</title>
<link href="css/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-app="richPortfolio">
<div class="container" ng-controller="adsCtrl">
<nav>
<ul class="accordion" onclick="myFunction(event)">
<li ng-repeat="ad in ads">
<a class="ad" href="" id="ad{{ ad.id }}" ng-click="select(ad)">{{ ad.title }}</a>
</li>
</ul>
</nav>
<div class="showCase_container">
<div id="ad{{ selectedItem.id }}Case" class="adActive">
<div class="description">
<h3 class="ad_name">{{ selectedItem.title }}</h3>
<p>{{selectedItem.content}}</p>
<hr>
<h3>Description</h3>
<p>{{ selectedItem.desc }}</p>
<hr>
<h3>Dimension</h3>
<p>{{ selectedItem.dim }}</p>
</div>
</div>
</div>
</div>
<script src="rich.js"></script>
</body>
</html>
My JSON:
[
{
"id": "1",
"title": "cube",
"content": "cube 1 cube",
"desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
"dim":"300x250"
},
{
"id": "2",
"title": "Gallery",
"content": "Gallery 2 Gallery",
"desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
"dim":"300x250, 300x600, 728x90, 970x250"
}
]
My JS:
// Modules
var rich = angular.module('richPortfolio', ['ngRoute']);
rich.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'adsCtrl',
templateUrl: 'pages/home.html'
})
.otherwise({ redirectTo: '/' });
});
// controllers
rich.controller('adsCtrl', ['$scope', 'ads', function($scope, ads , element){
ads.then(function(data){
$scope.ads = data;
});
// devices
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
// nav redirection
$scope.select = function(item) {
$scope.selectedItem = item;
};
}]);
//services
rich.factory('ads', ['$http', function($http){
// after v1.6 need to use .then function to get it worked
return $http.get('ads.json')
.then(function(response){
//alert('success');
return data = response.data;
},function(error){
//alert('error');
});
}]);
function myFunction(e) {
var elems = document.querySelector(".accordion .active");
if(elems !==null){
elems.classList.remove("active");
}
e.target.className = "active";
}
Plunker Link - http://embed.plnkr.co/SPbvgPhfdeCqZG0yzzeZ/
Now after selecting the respective link it shows the corresponding data. Need to show first JSON data object before selecting any link.
Any help would be appreciated.
When you click and a element you call a function named select(ad) which set some info to the $scope.selectedItem property and you're displaying that variable info. So, in order to get the some data before click something you should set a default value the $scope.selectedItem property. Check this code:
rich.controller('adsCtrl', ['$scope', 'ads', function($scope, ads , element){
ads.then(function(data){
$scope.ads = data;
$scope.selectedItem = data[0]; //Set default element
});
I'm building an app with the Ionic Framework. I'm using a tab navigation.
angular.module('myapp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.news', {
url: "/news",
views: {
'news-tab': {
templateUrl: "templates/news.html"
}
}
})....
First I wrote all code in 1 html file, then for better oversight I wanted to use html include:
<body>
<!-- Layout Setup -->
<ion-nav-bar class="bar-app"></ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<div ng-include="'sub/tabs.html'"></div>
</script>
<script id="templates/home.html" type="text/ng-template">
<div ng-include="'sub/home.html'"></div>
</script>
<script id="templates/news.html" type="text/ng-template">
<div ng-include="'sub/news.html'"></div>
</script>
....
home.html:
<ion-view view-title="" hide-nav-bar="true">
<ion-content class="padding app-home" scroll="false">
<div class="app-image">
<img class="full-image" src="img/app-logo.svg">
</div>
<div class="row app-home-buttons">
<div class="col">
<a href="#/tab/news">
<button class="button button-balanced button-block icon-top"><i class='icon ion-ios-paper-outline'></i><span>News</span>
</button>
</a>
</div>
</ion-content>
</ion-view>
news.html:
<ion-view view-title="News" ng-controller="NewsRefreshCtrl">
<ion-content class="">
<ion-refresher on-refresh="doRefresh()">
</ion-refresher>
<div class="list">
<a class="item item-thumbnail-left item-text-wrap" href="#">
<img src="img/tile-icon.png">
<h2>Lorem consetetur sadipscing</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At v</p>
</a>
</a>
</div>
</ion-content>
</ion-view>
Now I have the problem that the bar with the site title isn't working anymore. It doesn't show the title and the included html content is laying on top under the bar.
Maybe thats because due to the include it's in a div tag now?
How can I solve this?
I solved the issue by having <div ng-include...> inside <ion-view> within <ion-tab>. Here is the structure you may have to try
<ion-pane>
<ion-tabs>
<ion-tab title="Tab 1"...>
<ion-view>
<div ng-include src="'templates/tab1.html'"></div>
</ion-view>
</ion-tab>
<ion-tab title="Tab 2"... >
<ion-view>
<div ng-include src="'templates/tab2.html'"></div>
</ion-view>
</ion-tab>
</ion-tabs>
</ion-pane>
I encapsulated the templates (tab1.html..) within <ion-content>
templates/tab1.html
<ion-content>
<!--Your Template Content Goes here-->
</ion-content>
This structure works like a charm for me.
http://forum.ionicframework.com/t/tabs-and-ng-include/7863/4?u=kousikraj
This is old, but the best solution was not posted. I found the solution while I still had this open so I figured I'd contribute in case anyone else finds this. You can simply use the ng-include directive as it's own tag
<ion-slide-box>
<ion-slide>
<ng-include src="'templates/slide1.html'"></ng-include>
</ion-slide>
<ion-slide>
<ng-include src="'templates/slide2.html'"></ng-include>
</ion-slide>
<ion-slide>
<ng-include src="'templates/slide3.html'"></ng-include>
</ion-slide>
<ion-slide>
<ng-include src="'templates/slide4.html'"></ng-include>
</ion-slide>
</ion-slide-box>
No need for ion-view in each slide.
Works like this:
-template .html files in /templates folder, remove the script tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-chevron-left">
Back
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
App.js:
// Ionic Starter App, v0.9.20
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
StatusBar.styleDefault();
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
I can only navigate from page 1 to page 2 but couldn't get back from page 2 to page 1.
demo http://codepen.io/anon/pen/qEOJBp
I wonder why? The code look flawless for me :
<ion-nav-view name="home"></ion-nav-view>
<ion-nav-view name="threadContent"></ion-nav-view>
<script type="text/ng-template" id="home.html">
<ion-view name="home">
<ion-content>
<h2>Home Page</h2>
<p>Here is the main route for the app.</p>
GO
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="threadContent.html">
<ion-view name="threadContent" title="Thread Content">
<ion-content>
Back
<h2>Using the app</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
</ion-content>
</ion-view>
</script>
$rootScope.$on('$stateChangeSuccess', function (event, to, toParams, from, fromParams) {
$rootScope.$previousState = from;
$rootScope.$previousStateParams = fromParams;
});
On my project I have used ui.router, but main idea is:
Catch change state event and save data to root scope. And you will always have an ability back to previous sate.
So, today I added angular-ui-router to my webapp. However, it's showing some really weird behaviour. It used to display the current page in the ui-view. So a page in a page.
Now, it's working correct, but it doesn't show subpages and I can't seem to figure out why.
Main page
<!doctype html>
<html lang="en" ng-app="ExampleApp">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>
<div>
<div ui-view></div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- Main app file -->
<script src="/js/main.js"></script>
</body>
</html>
main.js
var ExampleApp = angular.module('ExampleApp', ['ui.router']);
ExampleApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/home");
//
// Now set up the states
$stateProvider
.state('home', {
url: "/home",
templateUrl: "views/home.html",
controller: "MainController"
})
.state('settings', {
url: "/settings",
templateUrl: "views/settings.html",
controller: "SettingsController"
})
.state('settings.account', {
url: "/account",
templateUrl: "views/settings.account.html",
controller: "AccountSettingsController"
});
});
ExampleApp.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Try this
url:"settings/account",