Solved

Get URL in angular.js

Posted on 2015-02-11
8
56 Views
Last Modified: 2015-02-15
Hello, I thought this would be simple and straight forward but it seems not :)

Example URL - /index.htm?myVab=Test

Now on my page "index.htm" I would like to simply bring the variable "myVab" in to my controller.js file

I've read a lot about location etc but surely there must be a simple way of retrieving this?
0
Comment
Question by:DanteAdmin
  • 5
  • 3
8 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40602682
So, basically this is not the "Angular way" of doing this.

To do it in a fully supported way you  should use the Router: https://docs.angularjs.org/api/ngRoute/service/$route
This means that you need to start using routes instead of querystrings.

Anyway, if you want to keep using querystrings you can use
$location.search()

Open in new window

This returns a JSON object which has the key/value pairs that match your querystring.
0
 

Author Comment

by:DanteAdmin
ID: 40605082
Do I need to declare $location somehow in the controller before I can use it ?

I'm just getting that the variable isn't declared

Will also read up on $ruote

Thanks
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40605178
The $location has to be injected in the controller as any other resource:
angular.module('myapp')
  .controller('MyController', ['$scope', '$location', function($scope, $location){
    // your controller code here
  }]);

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Closing Comment

by:DanteAdmin
ID: 40609468
Many thanks - works a charm
0
 

Author Comment

by:DanteAdmin
ID: 40609501
I can get it to update the URL etc but having problems grabbing existing values and presenting them

If I type in the browser:
index.htm?myVab=test

and on "index.htm" I have

{{$scope.myVab}}


In Controller.js
$location.search(myVab)

myVab = $location.search(myVab);



Is the way I'm trying to do this not possible? If I then change in the URL I'm hoping it will change in the controller file and present ?
0
 

Author Comment

by:DanteAdmin
ID: 40609603
Update:

This is the code that from reading a lot should work, but it doesn't

I'm able to manipulate the string from the same controller file i.e. I can add params to the string fine, but I can't read it and present it


$scope.myVab = $location.search().myVab;

or to ge the whole string this should work ?

$scope.myVab = $location.search();

But still doesn't return a thing
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40610512
Hi mate,
What you really need is to use routes.
They give you a lot of advantages over query string parameters.

One of the obvious is that they don't trigger a full page refresh if you change them, and as you're using AngularJS, you should be embracing the single-page design, otherwise it makes little sense.

I'm writing from my phone but once I get my hands on a computer I can bake you a simple demo.
Meanwhile you can Google for angular routing, you'll find plenty of examples.

I'll be back... :-)
0
 

Author Comment

by:DanteAdmin
ID: 40610565
Thanks Alexandre

I've managed to get it working but then I realised all changes on the page triggers the same function so URL just updates even when I want it to actively leave the page...

So I'm starting to realise I need to spend the time to get my head around routes

This is that post - http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28617032.html#a40610000

Again many thanks for taking the time
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question