文档章节

angular之杂类

bosscheng
 bosscheng
发布于 2015/09/15 15:36
字数 1096
阅读 101
收藏 1

两种启动方式

1. 使用 ng-app 指令
2.使用angular.bootstrap() 方法来启动。

对于父子controller的访问关系

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
    </div>    
</div>

对于ChildController 的$scope 是可以访问ParentController的$scope的。

对于module提供的method

// 服务
provider(name,providerType)
factory(name,providerFunction)
service(name,constructor)

// 定义变量
value(name,object)
// 常量
constant(name,object)
// 动画
animation(name,animationFactory)
// 过滤器
filter(name,filterFactory)
// 控制器
controller(name,constructor)
// 指令
directive(name,directiveFactory)
// 配置信息
config(configFn)
// 运行的时候调用的初始化方法。
run(initialization)

对于$scope 和 $rootScope 和 $injector 的区别

$injector 是一个IOC容器,包含很多服务 类似spring 的bean

$scope 是javascript 中的作用域,搜索的时候,会优先查找自己的scope,如果没有查找到,会沿着作用域向上搜索,直到根作用域$rootScope

$rootScope是angular加载模块的时候自动创建的,每一个模块只有一个rootscope,rootscope创建好了之后以服务的形式加入到$injector中,rootscope是由angular核心模块ng创建的。

ng-controller 指令会给所在的DOM元素创建一个新的$scope 并为rootscope的子作用域


每个模块只有一个rootscope,但是可以有多个scope

使用angular.element().scope() 返回作用域上,距离该元素最近的scope

value和constant的区别

如果服务的$get方法是返回一个常量,那么就没有必要去定义一个包含复杂功能的完整服务

可以通过value函数去注册服务

而constant是可以被注入的。

通常情况下,使用value来注册服务或者函数,使用constant来配置数据。

父亲和儿子controller之间传递数据

可以在子controller中通过 $emit 来传递数据 

父亲controller通过$on 来监听数据

对于父亲controller可以通过$broadcast广播事件

子controller中通过$on来监听数据

对于参数中的event

event.targetScope
event.currentScope
event.name
event.stopPropagation() 
event.preventDefault
event.defaultPrevented

service和provider和factory的区别

在angualr中 对于服务service 有
factory
service
provider

另外  angualr 也提供 很多其他内置服务service

$animate

$compile

$document

$timeout

$http

另外我们还可以创建自己的service

看下angualr源码中的实现

provider -> factory -> service


function provider(name,provider){
}

function factory(name,factoryFn){
    return provider(name:{$get:factoryFfn})
}

function service(name,constructor){
    return factory(name,['$injector',function($injector){
        return $injector.instantiate(constructor);
    }])
}

service 和factory 可以在controller中共享数据。

对于这三者的区别

  1. factory创建的是对象,为他添加属性,然后把这个对象返回出来。

  2. service是使用new 关键字实例化的,因此你应该为this添加属性,

  3. provider是唯一一个可以传递到config函数的service,传递的是,使用xxxProvider 才对。

对于service,是可以被依赖注入到controller中去的。

重点: service作为单例对象对象,在需要创建的时候被创建,只有在应用生命周期结束的时候,才会被清除掉

而controller会在不需要使用的时候被销毁掉。

可以见 hello world 版本的service

对于controller

在切换视图的时候,controller会被重新生成初始化的,所有小心被初始化掉。

关于module

如果在html中使用了空的ng-app 则不需要调用module的run方法

否则 如果  ng-app="test"

angular.module('test').run(function($rootscope){

// 可以注入 rootscope 参数进来。

});

关于angualr方法编写的一些理解

// 依赖注入的东西。
function xxxFilter($local){
    // 私有属性
    var  xxx = 'private';
    
    // 私有方法。
    function test (){
    }
    // 这边才是真正的参数。
    // 暴露给上层的方法。
    return function(param){
    }
}


对于constant和value的使用区别

相同点:都是定义一个变量。

不同点:

constant一旦初始化了之后,是无法修改的,且可以注入到config方法中去。

value 是不能被注入到config方法中去的,同样也是可以修改的。

对于$compile 服务

function appController($scope,$compile,$document){
    $scope.attrs = ['test','baby','sub'];
    var htmlTpl = '<h1 ng-repeat="attr in attrs">{{attr}}</h1>';
    
    var $html = $compile(htmlTpl)($scope);
    
    var body = $document.find('body').eq(0);
    
    body.append($html);
}

 实现动态编译angular 代码,并在浏览器中渲染出来。

关于controller的依赖注入

var myModel = angular.modul('app',[]);

// 第一种依赖注入
var testController = function(renameScope){
    renameScope.title = '我是 title';
}
myModel.controller('testCtrl',testController );

testController.$inject = ['$scope'];

// 第二种依赖注入
myModel.controller('test2Ctrl',['$scope',function($scope){
    
}]);

对于angular的内置module 

'ng' 是angular的内置模块。

对于服务的理解

在ng中,服务的作用是处理模型的持久化。

© 著作权归作者所有

bosscheng
粉丝 80
博文 303
码字总数 95443
作品 0
南京
前端工程师
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
使用 ng-packagr 打包 Angular

写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的...

卡色
2018/09/29
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
196
0
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen
2018/05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

15、SpringMVC进行json交互

SpringMVC进行json交互 json数据格式在接口调用中、html页面中较常用,json格式比较简单,解析还比较方便。 请求json、输出json。要求请求的是json串,前端页面中需要将请求的内容转成json,...

快乐的瓶子
29分钟前
6
0
delphi版插apc杀进程驱动源码

从c代码转的,备份一下,里面有硬编码unit MyDriver;{$HINTS OFF}{$WARNINGS OFF}interfaceusesnt_status, ntoskrnl, native, winioctl, fcall, macros;typeTKILL = ...

simpower
32分钟前
4
0
带你上手一款下载超 10 万次的 IDEA 插件

作者 | 倪超(银时) 阿里云开发者工具产品专家 本文整理自 11 月 7 日社群分享,每月 2 场高质量分享,点击加入社群。 导读:Cloud Toolkit 是本地 IDE 插件,帮助开发者更高效地开发、测试...

阿里云官方博客
33分钟前
4
0
GMAT语法7个常考重要考点分析

GMAT语法考点多,并非所有考点都值得重点关注。实际上GMAT语法存在一些高频考点,考生需要优先掌握它们才能更好地保证得分。同时GMAT备考中大家还需要培养连续做题的耐力。下面小编就来做具体...

bole6
37分钟前
4
0
最佳实践 | RDS & POLARDB归档到X-Pack Spark计算

X-Pack Spark服务通过外部计算资源的方式,为Redis、Cassandra、MongoDB、HBase、RDS存储服务提供复杂分析、流式处理及入库、机器学习的能力,从而更好的解决用户数据处理相关场景问题。 RD...

一肥仔
39分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部