Learning-"front-end"-ANGULARJS basic framework and methods of sending requests to the server

Yesterday wrote a cross-domain thing, I thought about it, think of this way is exactly the same as before the hybrid app how to interact with the server solution. The heart is still quite happy. Today took time to make the front-end client part of the framework, the idea is to refer to the node community mobile design, all controllers and all services put together, but the request data is not used $resource also does not use the native $http, Instead, the restangular is used, which is used to integrate the configuration file into a single folder. The whole frame looks neat and tidy.

Let's give a structure diagram:

Because it is a product-driven architecture, so the initial use of bower,grunt and other automated deployment, and then feel that there is no need to be so troublesome, in order to ensure that the light-weight simply to join this thanks to self-reliance, vendor under the several files can also use Bootstrap CDN service, When it comes to real-world deployments, you can use

<script src= "Http://cdn.bootcss.com/lodash.js/2.4.1/lodash.min.js" ></script>

<script src= "Http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js" ></script>

<script src= "Http://cdn.bootcss.com/restangular/1.4.0/restangular.min.js" ></script>

Here the structure is also very clear, Index.js is actually the first to do static interface when the dynamic effect of the implementation. We're just looking at things about angular, where app.js is the entry function, we need to configure each module inside, and set up cross-domain related configurations. Put the code here:

var fruitcontroller=angular.module (' Fruitpoint.controllers ', [' fruitpoint.services ', ' restangular ']). config ([' $ Httpprovider ', function ($httpProvider) {$httpProvider. Defaults.usexdomain = true; Delete $ HttpProvider.defaults.headers. common[' X-requested-with ']; }]); ; var fruitservice=angular.module (' Fruitpoint.services ', []); Angular.module (' fruitpoint.filters ', [' fruitpoint.services ']); Angular.module (' fruitpoint.directives ', []);

We don't have to ignore the filters and directives modules, because only the controller and service are used here,

These two controller dependent Service,service rely on the restangular mentioned above to send a request to the server and assign a value to the scope.

Let's look at the controller:

Fruitcontroller. Controller ("Indexct", Function ($scope, indexservice) {$scope. Name= "S"; Indexservice.getindexdata (). Then (function (data, status, headers) {Console.log (data.body);}); });

Can be seen in the Fruticontroller, that is labeled Fruitpoint.controllers module, the configuration of the controller, I named here in accordance with the name of each page, for example, here is the homepage. This controller relies on the corresponding home service and then returns a data after calling the Getindexdata () method.

We can use the data returned to the external view with the $scope.name similar to the above.

Next is Indexservice:

Fruitservice. Factory (' Indexservice ', [' Restangular ', function (restangular) {var fruitpoint = Restangular.allurl (' One ', BaseURL); return {getindexdata:function () {return fruitpoint.post (serverinterfaces. I90002); } }; }])

Service is based on Fruitservice module, here I put restangular into the service, about this restangular related documents, you can visit http://www.ng-newsletter.com/posts/restangular.html

Can see very detailed configuration, need to explain is to index.html introduced above the three CDN or vendor under the local file,

In addition again App.js class configures it, note the case of the problem, the lowercase restangular for the module name, the first letter is the representative service, if you want to configure in config you need to restangularprovider.

And then we're going to inject it into the service now.

Restangular.allurl (' One ', baseurl);

This is the path to set the access, here the BaseURL is a global variable, I put it in the Fruitconfig.js, the code is as follows.

/** * * @authors Your Name ([email protected]) * @date 2015-03-03 16:01:21 * @version $Id $ */var BaseURL = ' http: Localhost:3000/fruitpoint '; var serverinterfaces = {I90002: {base: {reqtime: ' 201409041455123 ', Prono: ' 90002 '}, Content: {mr_id: ' 1234 '},}}

In addition to BaseURL there is an access to the background of the interface data, After Restangular.allurl, return an object, call the Post method in Getindedata, because my server design is post, the server to parse the data in the PostData to get the data interface, to find the response in the Background service module, the Service module calls the persistent module, the persistent mode The block uses the MySQL link to access the MySQL database and then returns to the front end.

The data is eventually printed to the console by our Controlle.

This way our front and back end all adopt the Unified interface, then do the permission control or the app response data is more convenient, also completely separate open front and back, front-end development does not need to rely on the server. Their division of work, the backend uses node this novel and fashionable performance-friendly things. The whole frame seems to be relatively concise and perfect, I will publish next to the front and back source code, because also want to complete the app after the public, so may later, but anyway, personally think to study the framework of a system, learning mature project Framework is more interesting than writing boring code.

Learning-front-end-ANGULARJS The basic framework and how to send requests to the server