AngularJS: How to create routes with ui-router for my application

Question

I have a problem with my a tag - I have a page that present data according to the GET vars.

For example - /foo.php?opt=1 will show table of cities that each one will go to - /foo.php?city=4 that have table of schools that go to /foo.php?school=4 that show table of students etc..

The problem is that the first time it works - when I choose city it will show me the list of schools and change the url, but when I choose school, it changes the URL but I still see the city table, and only if I press F5 it will show me table students.

This is the code:

odinvite.php:

<?php
if (isset($_GET['city']))
{
    include "odbycity.php";
}
else if (isset($_GET['school']))
{
    include "odbyschool.php";
}
else
{
    include "odshowcities.php";
}
?>

odshowcities.php:

<div ng-controller="allcities">

    <button class="btn btn-info" ng-repeat="x in names">
        <a href="/odinvite.php?city={{x.areaid}}">
        {{x.areaname}}</a>
    </button>

</div>

odbyschool.php:

<div ng-controller="odbycity">
    <button class="btn btn-info" ng-repeat="x in names">
        <a href="/odinvite.php?school={{x.schoolid}}">
        {{x.school_name}}</a>
    </button>
</div>

MyAngular.js:

var myApp = angular.module('myApp',[]);

myApp.config(function( $locationProvider) {

    $locationProvider.html5Mode(true);
});

myApp.controller ('allcities', function ($scope, $http)
{
    $http.get("fetch_json_sql.php?option=1")
        .then(function (response)
        {
            $scope.names = response.data.result;
        });
    console.log($scope.names);
});

myApp.controller ('odbycity', function ($scope, $http, $location)
{
    $scope.cityid=$location.search().city;
    console.log($scope.cityid);
    $http.get("fetch_json_sql.php?option=2&cityid="+$scope.cityid)
        .then(function (response)
        {
            $scope.names = response.data.result;
        });

});

myApp.controller ('odbyschool', function ($scope, $http ,$location)
{
    $scope.schoolid = $location.search().school;
    console.log($scope.schoolid);
    $http.get("fetch_json_sql.php?option=4&schoolid="+$scope.schoolid)
        .then(function (response)
        {
            $scope.names = response.data.result;
        });

});

What can be the problem?

I tried to make 100% change of the URL - <a href="www.google.com">link</a> and it didn't work. just changed the URL without redirect.

Thanks!

Well m8, AngularJS is for SPA. Its not that easy to combine your routes with an backend directly. You should use ngRoute or uiRouter without having your templates rendered by a backend. I still see no route configuration for /odinvite.php?school or odinvite.php?city. Your question is "why are my routes not working". — lin
– lin, Commented Apr 2, 2017 at 8:42
This is all the code I have...I'm just started to learn AngularJS. What do I need to know about this routes? — J. Doe
– J. Doe, Commented Apr 2, 2017 at 8:44
Is that my solution...? - docs.angularjs.org/api/ng/directive/ngHref — J. Doe
– J. Doe, Commented Apr 2, 2017 at 8:46

lin · Accepted Answer · 2017-04-02 09:05:45Z

1

You should stop rendering your templates with a backend. AngularJS is for SPA. If you need data provided by a backend try to implement an API e.g. a RESTful API. you need to configure your routes for example like in this runnable demo plnkr. It uses ui-router. Please note, this is just a demo. You should be able to put your logic into that prototype. I prepared all routes you need by using some dummy data. Just include your existing API in the controllers and you should be fine.

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("", "/main");

    $stateProvider
        .state("main", {
            url: "/main",
            templateUrl: "main.html"
        })
        .state("main.listSchools", {
            url: "/listSchools/:schoolId",
            templateUrl: "schools.html"
        }) 
        .state("main.listAreas", {
            url: "/listAreas/:areaId",
            templateUrl: "areas.html"
        });
});


myApp.controller('mainMenuController', function ($scope) {
    $scope.schools = [{
      schoolid: 1,
      name: 'Test School 1'
    },{
      schoolid: 5,
      name: 'Test School 5'
    },{
      schoolid: 11,
      name: 'Test School 11'
    }];
    $scope.areas = [{
      areaid: 3,
      name: 'Test area 3'
    },{
      areaid: 7,
      name: 'Test area 7'
    },{
      areaid: 19,
      name: 'Test area 7'
    }];
});



myApp.controller('listSchoolController', function ($scope, $state) {
  $scope.schoolId = $state.params.schoolId;
});


myApp.controller('listAreaController', function ($scope, $state) {
  $scope.areaId = $state.params.areaId;
});

answered Apr 2, 2017 at 9:05

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

J. Doe Over a year ago

There is no option to do that without the Route? And BTW - I started to read about "app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl" " - Is that the same?

lin Over a year ago

You could fake the routing but this is not what AngularJS was made for. ngRoute is a different route provider. I recommend to use uiRouter because its much more flexible and give you a lot of more options to design your routes.

J. Doe Over a year ago

Ok.. I will need to do some homework to understand what you wrote - altough it looks kind of logical. do you have some recommended site that explain this?

J. Doe Over a year ago

Hope for some YouTube but thats fine too :) Thanks a lot!!

J. Doe Over a year ago

BTW - When I using Route - there is a chance I'll have to config the server? Because I using a free host server not a dedicated one..

|

Collectives™ on Stack Overflow

AngularJS: How to create routes with ui-router for my application

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related