Angularjs Inside Cross-scope

Haven't come to write a blog for a long time, recently has been using Google's Angularjs, the back of my own abbreviation ANGULARJS called AJ it!

Learning Angularjs Road is also a lot of deep pits AH--! not much to say, but it is recommended that you have time to learn the next, indeed very powerful! Again I do not say the entry of things, blog on the predecessors are also introduced a lot! I am here to bring you something new and practical, almost as long as you use AJ to develop the previous paragraph, you will encounter!

Speak not more, directly to enter the theme! Let's take a look at the difference between provider, factory, and service in AJ.

$scope, $http, $window, and so on, are the built-in services that AJ provides, and if we want to define our own services, we can create them through keyword provider, factory, and service. What's the difference between these three? I recommend a blog everyone to see, personally think write very good! (Address: http://hellobug.github.io/blog/angularjs-providers/).

Simply say it's three different!

Provider must implement the $get method when it is used, it is the result of $get execution every time the provider is executed.
When factory is defined, the second parameter can be seen as a $get in provider
Service definition, the second parameter will be new

And then in the next three a bit of it! (Summary of Others ~ ~)

1. Provide a common service for the application, in the form of constants or objects
2. Ease of modularity
3. Easy Unit Testing

Then I started to say, I will give you to demonstrate is a development time will often encounter problems, and many people here will be guilty of dizzy (﹏)! Below I direct code, the nonsense will be very few, from this side introduced the simplest beginning!

Provider to complete a service component that belongs to you

Look at an interface

Look at the interface code:

The corresponding JS:

Example of Ascension:

Factory can provide a service in the form of a constant or an object for us when using Angularjs

First look at the interface:

Then look at the interface code:

Look at JS:

Hey! It's not very practical, is it? Indeed, I also feel that the usefulness of this is not many! Then to upgrade the next example, this promotion will be very useful, pay attention to the topic of this article cross-scope to get data!

factory+ $rootScope passing data across scopes

First look at the interface:

This scene in the application is not a lot of, many people say I directly with $rootscope can directly do, yes indeed can do, but in order to elegant or in the $rootscope of the shortcomings, I use factory+ $rootScope to complete this operation! To the interface code:

Look at JS again:

Too detailed usage or puzzled place, can be discussed together, because there is an example is also an extension but very simple is not the demo, followed by directly affixed to the code! I hope this article on the introduction of AJ or the use of friends to help, my example will be from the research and development point of view, we work together to take off AJ's pit! O (^▽^) O, and finally share the DOM and JS of the instance:

 1 
Js:
/** * Created by FAI too on 2015/8/28. */var app = Angular.module (' MyApp ', []);//Custom Providerapp.provider (' nickname ', function ($filterProvider) {This.n_name     = "Hello";     this. $get =function () {return this.n_name+ "Huitai"; };});/ /Call Custom Providerapp.controller (' Appctrl ', function ($scope, nickname) {$scope. name=nickname;}); /define Factoryapp.factory (' Facname ', function () {return{title: "This Huitai are from the Factory"};}); /Call your own definition of factoryapp.controller (' Fact1ctrl ', function ($scope, facname) {$scope. Fact1name = Facname.title;}); App.controller (' Fact2ctrl ', function ($scope, facname) {$scope. Fact2name = Facname.title;});    /cross-scope Get data app.factory (' MyService ', function ($rootScope) {var myservice = {};    Myservice.message= ";    Myservice.password= ";        Myservice.prepforbroadcast = function (msg,pwd) {this.message = msg;        This.password = pwd;    This.broadcastitem ();    }; Myservice.broadcastitem = function () {$rootScope. $broadcast (' HANDLEBROADCASt ');    }; return myservice;}); function Controllerzero ($scope, MyService) {$scope. Handleclick = function (msg,pwd) {Myservice.prepforbroadcast (ms    G,PWD);    };        $scope. $on (' Handlebroadcast ', function () {$scope. message = Myservice.message;    $scope. Password = Myservice.password; });} function Controllerone ($scope, MyService) {$scope. $on (' Handlebroadcast ', function () {$scope. Message = ' number from zero to one        According to: ' + myservice.message;    $scope. Password = ' data from zero to one 2: ' + Myservice.password; });} Controllerzero. $inject = [' $scope ', ' MyService ']; Controllerone. $inject = [' $scope ', ' MyService '];app.controller (' Controllerzero ', Controllerzero); App.controller (' Controllerone ', controllerone); App.factory ("UserService", function () {var users = [' Huitai ', ' Nickyu ', ' Tianyu ', '    Shaokai '];        return {all:function () {return users;        }, First:function () {return users[0]; }, Last:function () {//here should be judged to take the last one of the array, I stoleLazy, when you write, do not learn to return users[3]; }    };}); App.controller ("Userctrl", Function ($scope, userservice) {$scope. Users = Userservice.all ();}); App.controller ("Fristctrl", Function ($scope, userservice) {$scope. Firstuser = Userservice.first ();}); App.controller ("Lastctrl", Function ($scope, userservice) {$scope. Lastuser = Userservice.last ();});
Angularjs Inside Cross-scope