The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.
In your controller, $http will be one of the dependencies so before you include it make sure you have a controller and app set up
-
Define your app and include it in your body tag
-
In your app.js:
TestApp = angular.module("TestApp", [] -
And in your application.html.erb:
<body ng-app="TestApp">
-
-
In your controller, specify include the $http dependency
TestApp.controller("TestCtrl", ["$scope", "$http", ($scope, $http) ->
- Long form
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// these are all possible parameters for the callback
}).
error(function(data, status, headers, config) {
// these are all possible parameters for the callback
});
- Shortcut methods (similar to the jQuery $.getJSON method)
$http.get('/someUrl').success(function(data){
// do something with the data here
});
You can also use...
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch
The $http service will automatically add certain HTTP headers to all requests. These defaults can be fully configured by accessing the $httpProvider.defaults.headers configuration object, which currently contains this default configuration:
$httpProvider.defaults.headers.common (headers that are common for all requests):
Accept: application/json, text/plain, * / *
$httpProvider.defaults.headers.post: (header defaults for POST requests)
Content-Type: application/json
$httpProvider.defaults.headers.put (header defaults for PUT requests)
Content-Type: application/json
What might we need to add to our headers in our Rails app? How about the CSRF Token? We would do that using the config option (this is essential for our Rails app and we will not be able to make any calls to our API without this configuration)
TestApp.config(["$httpProvider", function($httpProvider){
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
}])
As we start to move our routes to the front-end we will need to include the Angular Router with the $routeProvider (for routing) and $locationProvider (for URL rewriting) dependencies (the .when goes on for however many routes you have)
NAME_OF_APP.config ["$routeProvider", "$locationProvider", ($routeProvider, $locationProvider)->
$routeProvider
.when "ROUTE",
templateUrl: "NAME_OF_TEMPLATE",
controller: "NAME_OF_CONTROLLER"
.when "ROUTE",
templateUrl: "NAME_OF_TEMPLATE",
controller: "NAME_OF_CONTROLLER"
.otherwise
redirectTo: "ROUTE"
$locationProvider.html5Mode(true)
]
Since we will be using Angular templates and not rendering pages from the views folder, we need a good way to include angular templates.
- In your Gemfile include
gem 'angular-rails-templates'and then run bundle install - In your application.js include
//= require angular-rails-templatesand//= require_tree ../templates - Place your templates in
app/assets/templatesand make sure that they have an extention of .html (it can also be .html.erb or .html.haml) - In your angular module, include the
'templates'dependency. Example:BookApp = angular.module("BookApp", ["ngRoute", "templates"]) - In your $routeProvider, include your template as the template URL. Example:
.when "/",
templateUrl: "index.html",
controller: "BooksCtrl"
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent