Angularjs里面跨作用域

Angularjs里面跨作用域的实战！

好久没有来写博客了，最近一直在用Google的AngularJS,后面我自己简称AngularJS就叫AJ吧！

学习AngularJS一路也是深坑颇多啊--!就不多说了，不过还是建议大家有时间去学下下，果真很强大！再次我就不说入门的东西了，博客上有前辈们也是介绍了不少！我这里就给大家带来点新鲜的并且是实用的，几乎你只要用AJ开发前段的话，你都会碰到！

话不多说，直接来进入主题！先来看看AJ里面provider、factory、service的区别

$scope、$http、$window等都是AJ提供的内置服务，如果我们要定义自己的服务，我们就可以通过关键字provider、factory、service来创建服务。这三个有什么区别吗？我推荐个博客大家去看看，个人觉得写的非常的好！(地址：http://hellobug.github.io/blog/angularjs-providers/)。

简单的说下它三个的区别吧！

provider使用的时候必须要实现$get方法，每次执行provider的时候，就是$get执行后的结果
    factory定义的时候，第二个参数就可以看成provider里的$get
    service定义的时候，第二个参数会被new一下

然后在说下这三个的有点吧！(别人的总结~~)

1. 为应用提供通用的服务，形式可以是常量或对象
    2. 便于模块化
    3. 便于单元测试

然后我开始都说了，我要给大家来演示的是一个开发的时候会经常碰到的问题，而且好多人到这里就会犯晕(◎﹏◎)！下面我就直接代码了，废话将会很少，就从这边介绍的最简单的开始！

Provider来完成一个属于你的服务组件

来看一个界面

来看界面代码：

对应的JS:

提升下例子：

Factory可以通过提供服务的形式为我们在使用AngularJS时候提供常量或者是对象

先来看界面：

再来看界面代码：

在来看看JS：

哎！这个不太实用对吧！确实我也觉得用处这个不是很多！那就再来提升下例子，这次提升就会很实用了,注意看本篇的主题跨作用域获取数据！

Factory+$rootScope跨作用域传递数据

先来看界面：

这种场景在应用中是不是很多了，很多人说我直接用$rootScope就能直接做到，是的的确是能做到，但是为了优雅或者处于$rootScope的弊端，我采用Factory+$rootScope来完成这个操作！来界面代码:

再来看看JS：

过于详细的用法或者不解的地方，可以一起来探讨，由于还有一个例子也是一个拓展但是非常简单就不在演示了，后面直接贴上代码！希望本篇文章对AJ入门或者采用不久的朋友们有所帮助，我的实例都会从经常用的研发角度出发，大家共同努力，一起脱AJ的坑！o(^▽^)o，最后分享出实例的DOM和JS:

 1 <html lang="en" ng-app="myapp">
 2 <head>
 3     <meta charset="UTF-8">
 4     <link rel="stylesheet" href="./bower_components/angular-material/angular-material.css"/>
 5     <link rel="stylesheet" href="assets/style.css"/>
 6
 7     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
 8     <meta name="viewport" content="initial-scale=1" />
 9 </head>
10 <body layout="column" ng-controller="AppCtrl">
11     <h3>Angular JS</h3>
12     <h4 style="color: #660000">Provider可以自定义组件来满足你在用AngularJS时候需要的组件</h4>
13     <label>{{name}}</label>
14     <h4 style="color: #008800">Factory可以通过提供服务的形式为我们在使用AngularJS时候提供常量或者是对象</h4>
15     <div ng-controller="fact1Ctrl">
16         <input type="text" style="width:350px;" ng-model="fact1name">
17     </div>
18     <div ng-controller="fact2Ctrl">
19         <input type="text" style="width:350px;" ng-model="fact2name">
20     </div>
21     <h4 style="color: #880000">因为AngularJS的最大亮点就是双向绑定,作为程序员的话经常会有这样的一种场景！比如说现在的页面分为左右布局两个部分(在AngularJS里面可能就是两个或者多个Controller,对应的DOM可能也就是多个ng-controller的作用域)，左边是设置参数，右边是数据展示，<br/>
22         我们希望在左边设置参数后点击按钮然后右边的数据自动的完成绑定，在AngularJS这个时候怎么办呢！这个时候就可以使用Factory+$rootScope在帮助我们完成！下面试验一个很简单的例子！</h4>
23     <div ng-controller="ControllerZero">
24         <input ng-model="message" >
25         <br>
26         <input ng-model="password">
27         <button ng-click="handleClick(message,password);">给我传到ControllerOne里面去</button>
28     </div>
29     <div ng-controller="ControllerOne">
30         <input ng-model="message" style="width: 350px;" >
31         <br>
32         <input ng-model="password" style="width: 350px;" >
33     </div>
34     <h4 style="color: #0000f1">还有一种在开发的时候可能会经常的用法，就是在Factory里面定义自己个性化的函数，来供自己在想用的地方直接来用，下面再试验一个！</h4>
35     <div ng-controller="userCtrl">
36         <ul ng-repeat="user in users">
37             <li>{{user}}</li>
38         </ul>
39         <div ng-controller="FristCtrl">
40             First user: {{firstUser}}
41         </div>
42         <div ng-controller="LastCtrl">
43             Last user: {{lastUser}}
44         </div>
45     </div>
46     <!-- Angular Material Dependencies -->
47     <script src="./bower_components/angular/angular.js"></script>
48     <script src="./bower_components/angular-animate/angular-animate.js"></script>
49     <script src="./bower_components/angular-aria/angular-aria.js"></script>
50     <script src="./bower_components/angular-route/angular-route.js"></script>
51     <script type="text/javascript" src="./bower_components/angular-material/angular-material.js"></script>
52     <script src="./src/myapp.js"></script>
53 </body>
54 </html>

JS：

/**
 * Created by 辉太 on 2015/8/28.
 */
var app = angular.module(‘myapp‘,[]);

//自定义provider
app.provider(‘nickname‘,function($filterProvider){
     this.n_name="Hello";
     this.$get=function()
     {
         return this.n_name+"Huitai";
     };
});
//调用自定义的provider
app.controller(‘AppCtrl‘,function($scope,nickname){
    $scope.name=nickname;
});
//定义Factory
app.factory(‘facname‘,function(){
    return{
        title:"This Huitai is from the factory"
    };
});
//调用自己定义的Factory
app.controller(‘fact1Ctrl‘,function($scope,facname){
    $scope.fact1name = facname.title;
});
app.controller(‘fact2Ctrl‘,function($scope,facname){
    $scope.fact2name = facname.title;
});
//跨作用域获取数据
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(msg,pwd);
    };
    $scope.$on(‘handleBroadcast‘,function(){
        $scope.message = myService.message;
        $scope.password = myService.password;
    });
}

function ControllerOne($scope,myService){
    $scope.$on(‘handleBroadcast‘,function(){
        $scope.message = ‘从zero到one的数据：‘+ myService.message;
        $scope.password =‘从zero到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(){
            //这里本该判断取数组的最后一位，我偷个懒，各位写的时候千万别学习
            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();
});

时间： 2024-11-04 05:39:59

Angularjs里面跨作用域的相关文章

Angularjs里面跨作用域的实战！

好久没有来写博客了,最近一直在用Google的AngularJS,后面我自己简称AngularJS就叫AJ吧! 学习AngularJS一路也是深坑颇多啊--!就不多说了,不过还是建议大家有时间去学下下,果真很强大!再次我就不说入门的东西了,博客上有前辈们也是介绍了不少!我这里就给大家带来点新鲜的并且是实用的,几乎你只要用AJ开发前段的话,你都会碰到! 话不多说,直接来进入主题!先来看看AJ里面provider.factory.service的区别 $scope.$http.$window等都是A

AngularJS实现跨域请求

跨域,前端开发中常常遇到的问题.AngularJS实现跨域方式类似于Ajax.使用CORS机制. 以下阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpRequest:$http用于读取远程server的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get

angularJS 指令scope作用域

http://www.angularjs.cn/A09C 以下方式会创建新的子作用域,并且进行原型继承: ng-repeat.ng-include.ng-switch.ng-view.ng-controller, 用scope: true和transclude: true创建directive. 以下方式会创建新的独立作用域,不会进行原型继承:用scope: { ... }创建directive.这样创建的作用域被称为"Isolate"作用域. 注意:默认情况下创建directive使

AngularJS 中的作用域

问题引入 使用 Angular 进行过一段时间的开发后,基本上都会遇到一个这样的坑: 123456789101112 <div ng-controller="TestCtrl"> <p>{{name}}</p> <div ng-if="show"> <input type="text" ng-model="name"> </div></div>

AngularJS入门基础——作用域

作用域$scope是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它是非常重要的. $scope对像是定义应用业务逻辑,控制器方法和视图属性的地方.作用域是视图和控制器之间的胶水. 作用域是应用状态的基础,基于动态绑定.我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在起发生变化时立刻重新渲染视图. 将应用的业务逻辑都放在控制器中,而将相关的数据都放在控制器的作用域中,这是非常完美的架构. $scope对象在AngularJS中充当数据模型,但与

angularjs+webapi2 跨域Basic 认证授权（一）

如今的app,利用各种前端框架结合html5的混合开发模式已然盛极一时.其中ionic+angularjs更是如日中天.这种模式利用angularjs $http 请求数据api 以达到前后端分离深得人心.说到webapi 跨域和认证授权始终是不得不提的.这种现成的例子有很多,但我发现的要么是过于复杂,不利于第一次有效理解整个过程:要么就是侧重点比较单一,不好囊括:要么就是其中有些坑没有踩到,换个环境就一头雾水. 所以,我打算以最简单的实现方式最大限度地寻找其中的一些坑和注意点. 1.来看看我们

AngularJS(2)-Scope作用域和控制器

$scope: 根作用域 所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中. $rootScope 可作用于整个应用中.是各个 controller 中 scope 的桥梁.用 rootscope 定义的值,可以在各个 controller 中使用. 控制器: AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. 控制器也可以有方法: 我们当然也可以把<scr

angularJS：ng-repeat作用域及父作用域调用$parent

一.关于ng-repeat的作用域学习: 1.ng-repeat会在上一级作用域名中创建一个子 作用域. 2.此时如果需要在子作用域中调用父作用域的变量,则可以使用$parent.variableName来调用. 3.ng-repeat中调用和父作用域同名的变量,无$parent前缀则指的是调用的子作用域的变量,就像局部变量一样. 4.ng-repeat中的$index: element in elements  当前element在elements中的下标数.例如第一个element,则$in

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看