This is my first ever trial with Angular JS and am stuck at a very basic step. I have an AngularJS front end and Grails backend. Below are the code snippets I have followed by my question.
URL Mapping entry:
as
"/graph"(controller: 'Graph')
This is my Grails controller/action which renders the GSP:
as
class GraphController {
def index() {
render(view: "../graph", model: [employeeId: "197040"])
}
}
This is the AngularJS file, which is saved as graph.gsp:
When I give the URL: hostname:port/graph I am able to see the body displayed as "Hi ! Welcome". But, I couldn't figure out a ( simple ) way to read that employeeId and display it as "Hi ! Welcome 197040" ( i.e being able to read that variable employeeId sent from backend)
<div><h3>Hi ! Welcome {{employeeId}}</h3></div> didn't work as expected.
I am sorry if this is too basic a question, but I just couldn't see the answer anywhere.
Try this:
<div ng-init="employeeId=${employeeId}"><h3>Hi ! Welcome {{employeeId}}</h3></div>
This will assign the value of the employeeId within the context of the GSP to a variable available within the context of Angular. To understand what I mean, take a look at the generated HTML source in your browser.
By doing this, the employeeId variable will be assigned within the scope of your Angular controller also.
There is a good tutorial on using Angular with Grails here http://claymccoy.blogspot.com.au/2012/09/grails-with-angularjs-and-coffeescript.html?m=1
Your Angular app runs on the user's browser and has no access to your backend environment. Therefore simply setting employeeId as a backend environment variable does not allow Angular to access it.
I can recommend two solutions to this problem:
1) In the index view (/graph), render employeeId as a JavaScript global in a script tag. In Angular, register the global employeeId as an Angular value. Then you can inject the employeeId value into your Angular controller and render it in the Angular view.
2) Retrieve the employeeId asynchronously via Ajax before your Angular app bootstraps, and register it as an Angular value. Then you can inject it to your controller. I recently wrote a blog post about how this can be done: http://biodegreeprogrammer.blogspot.ca/2014/07/pre-loading-data-asynchronously-in.html
The other thing here is, this is gsp afterall.. and your grails variables will work as per normal like how you defined the layout..
<div><h3>Hi ! Welcome ${employeeId}</h3></div>
Which will be grails pushing that info back....
The alternative is something like this: as shown per service on this demo site..
https://github.com/vahidhedayati/testingarrested/blob/master/grails-app/assets/javascripts/testingarrested/arrestedServices.js
Maybe you wish to try out arrestedplugin for yourself as a demo and then take the for example above service and change it for your own usage..
Related
I am now facing an issue related to getScript in rails. Actually I am able to pass a variable data to a particular action of my rails controller using the following line in my view.
getScript('/user/out_action.js?pt=' + resulted_time); // resulted_time is the variable name I want to send.
Where 'user' is the controller name and out_action is an action in the controller.
It is completely fine.
Now my problem is that I am unable to send multiple different variable data to the controller action from my view. I am using ruby on rails. I want to pass this data using one single call.
For example I want to pass to another variable like resulted_time using the same call.
Please tell me how to do it.
Very simple you need to enhance your query string like below example. If you are using coffee script below
$.getScript('/user/out_action.js?pt=#{resulted_time}&ps=#{resulted_time}');
That will insert multiple parameters. For plain javascript, you can use below code.
$.getScript('/user/out_action.js?pt='+resulted_time+'&ps='+resulted_time);
Let me know if you need more elaboration.
I'm making a dynamic web page with angular, the content from the main page should change, but to avoid writing too much code i decided to make it generic, but to know what type of content is being requested i need to send this parameter from a link/button with a ng-click, this would'nt be a problem but when i have to change the controllers i can't read the parameter.
ng-click="name='Name change'"
Here i'm trying to change a $rootScope variable named name, i tried
ng-click="$rootScope.name='Name change'"
even with a service function, but looks like doesn't work (i don't know too much about angularjs so i tried )
ng-click="$service.cambiarTipo='Name change'"
i made a plunker http://plnkr.co/edit/1BN76SbUAHuOSHs02gpL?p=preview
If you check the console log, you will see that the variable it's undefined, obviously if i change $rootScope.name from a controller i can see it from the other controller, but that's not useful since i need that feed from the user not the controller.
How i can change a rootScope variable from html?
Here'a one using a shared service between the two controller without using $rootscope at all. http://plnkr.co/edit/maKNHgVH20GxTJeCEveh
Note that ng-click is calling the service function. I'm assuming the function is for changing the name.
ng-click="service.cambiarTipo('Name change')"
You really shouldn't be using $rootScope all that much, let alone modifying it from the template. With that said, you can assign $rootScope to a $scope variable and access from the template like normal scoped variable. plunker
Controller:
$scope.rs = $rootScope
Template:
rs.name = 'Name Change'
I would like to reiterate that this is not something you should be doing as it goes against the angular way.
I want to dynamically update the title of my web application and append the user name after it. I know this can be done using jquery but wanted to know if there is any ember way of doing it.
My title in app/index.html looks like this
<title>XYZ.com</title>
but I want to make it look like
<title>XYZ.com - User name</title>
And the username comes from the ember model User.name
There is an Ember CLI addon for this.
Use 'ember-cli-document-title' for a sane way to manage your document title.
The Readme has excellent usage notes.
Link to Addon: https://github.com/kimroen/ember-cli-document-title
Declare one variable in application controller.
webName: null
and which place u have to change the web application name u modify the controller variable of application controller.
this.controllerFor('application').set('webName', yourwebappname);
document.title = "test";
hope it will help u
I am working on a project, which is like a framework which renders data defined in layouts (screens) in format of jsons. For example, i will write ,
{
Name : "First Name",
Row : "1" ,
Type: "Text Box"
}
It will render a Text Box with label "First Name".
I have central service which is the root scope of entire framwork.
My requirement is -
User/Developer will write his own controller and html on the same server outside of the Framework code.
To this controller i will pass my $scope and he will define his new methods and he will also provide a html which i need to render.
This html will use the functions on the scope which can be either from my f/w or his controller.
I have explored -
Angular ajax - http://tutorials.jenkov.com/angularjs/ajax.html
Angoose - https://github.com/tjworks/angoose
I am not sure if my design is correct. Do i need to do it in a completely different way ? OR there is way to achieve what i have designed.
Thanks in advance.
If any one stumbles on this question , this how we solved it
Our application build structure was maven related. So we placed these custom services and html on the same server and wrote a automation program to include these files based on the inputs in properties files.
Once this inclusion was out of the way , angular injector did the rest of adding the service dynamically and html was 'ng-include'-ed.
For those who would like to explore completely angular based solution please check out -
https://github.com/ifyio/angularjs-lazy-loading-with-requirejs
I am just starting with AngularJS, and I want to integrate it into existing ASP.NET MVC application.
I created simple angular HelloWorld app, that I return in a simple view rendered by a controller action:
<div ng-app="HelloNg">
<h1> Hello {{1+1}} you</h1>
</div>
This worked great - I could see angular expression evaluated properly.
However in our app, the data is often shown in ajax-loaded popups. So bascially the JavaScript makes request to MVC controller, the view gets renderred and is sent back. Then JavaScript stuffs it into a prepared div and shows that div as a popup.
In that case, the angular expression is not processed and {{1 + 1}} is rendered verbatim to the screen. The main page that hosts the popup is standard ASP.NET page - it does not use angular at all, it does however import angular scripts.
From what I understand I should use angular $compile service to let angular know about it - however I am not sure how to set the $scope variable.
Could anybody point me in the right direction? In most of the samples I could see $compile service being used within angular controller or directive, but in my case I am trying to do it from outside of the angular world.
The main page is massive, and I do not want to convert it to angular at this point - so having the popup use angular only would work great for me.
After finding some related questions, especially this one, I was able to figure it out:
// Here data is HTML returned from ajax
angular.injector(['ng']).invoke(['$compile', '$rootScope',
function (compile, rootScope) {
var scope = rootScope.$new();
var result = compile(data)(scope);
scope.$apply();
data = result;
// Here data is same HTML but now it is recognized by angular
... render it to page here ...
}
]);
It probably can be done much better but this seems to work for me all - all angular markup is processed when popup shows - and all bindings seem to work as well.