Menu
I have this Rails app that serves an index.html.erb by a UsersController. In the angular controller that handles that page, I have a $resource service for the User
.factory('User', ['$resource', ($resource) ->
$resource 'api/users/:user_id/:action', {authenticity_token:app.csrf},
query:
method: 'GET'
isArray: yes
new:
method: 'GET'
params:
user_id: 'new'
update:
method: 'PUT'
])
And the controller fetches
window.app = angular.module("app", ['userServices'])
.config(["$routeProvider", ($routeProvider) ->
$routeProvider
.when "/users",
templateUrl: "assets/templates/users/index.html"
controller: UserCtrl
.otherwise redirectTo: "/users"
])
# users Controllers
UserCtrl = ($scope, User) ->
User.query (r) ->
$scope.users = r
# code..
I think this is a pretty common scenario, but clearly it takes more than one trip to the server for just this page. I was wondering if there's a way for Angular to use some bootstrap data as it they were returned data from an action called in a $resource service.
I have already taken care of the bootstrap data part by assigning it to a global variable called Gon with the Gon ruby gem. I know I could simply do $scope.users = gon.users. But then these users models won't get the niceties like $scope.users[0].$save()
Thank you!
801
bootstrap() Function in AngularJS is a functional component in the Core ng module which is used to start up an Angular application manually, it provides more control over the initialization of the application. Syntax: angular. bootstrap(element, [modules], [config]);
Overview. A factory which creates a resource object that lets you interact with RESTful server-side data sources. The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service. Requires the ngResource module to be installed.
Use the HttpClient.get() method to fetch data from a server. The asynchronous method sends an HTTP request, and returns an Observable that emits the requested data when the response is received. The return type varies based on the observe and responseType values that you pass to the call.
AngularJS's $resource service is easier to use than $http for interacting with data sources exposed as RESTful resources.
As it turns out, it's really simple!
For instances, let's say you have all your non-angular models in a variable _tasks and the angular $resource model Task, all you need to do is pass the _tasks one by one into the constructor function Task like this:
$scope.tasks = (new Task(task) for task in _tasks)
then each of the $scope.tasks will have all those $update(), $delete() methods
$scope.tasks[0].$update({due_at: new Date})
You want to avoid the round trip from User.query, right? If so, how about something like this
<html>
<script type='text/javascript>
initialUsers = <%= User.someRubyMethod.to_json %>
<script>
Then inside of your controller
$scope.users = intitialUsers;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
