AngularJs学习笔记6——四大特性之依赖注入

压缩工具:YUI-compressor

为了优化网页功能,对一些脚本文件进行压缩,比如:删除所有的注释和空格等,简化形参。但是AngularJs模块中可以声明多种组件,如控制器、指令、过滤器、服务等。创建这些模块组件对象时,构造函数是由AngularJS调用的,故不能像普通函数那样,声明任意的形参。使得压缩后的文件无法使用,这时候采用标记式和行内式的数组形式(注意顺序的对应关系),使得压缩后依然可以使用。

依赖:实现功能的时候,如果需要某些模块,模块就是需要的依赖

AngularJS会自动根据依赖对象的形参名,创建需要的对象,最为实参传递进来——依赖注入!

ng模块常用的注入对象:

①.$http ②.$scope ③.$rootScope ④.$interval ⑤$timeout ⑥.$location ⑦.自定义服务

依赖注入的3种类型

1.推断式

这种注入方式不需要关注参数的先后顺序,ng会推断服务是否存在。不能处理压缩或者混淆后的代码,只能处理原始代码.

2.标记式

直接调用$inject属性来完成依赖的注入

 var ctrFunc=function ($scope,$show,$write) {
             $scope.funcBtn1=function(){
             $show.show();
         }
         $scope.funcBtn2=function(){
             $write.write();
         }
}
//对控制器的回调函数,设置依赖注入时的标记
ctrFunc.$inject=[‘$scope‘,‘$show‘,‘$write‘];
app.controller(‘fanCtrl‘, ctrFunc);

3.行内式

允许开发人员将一个字符型数组作为对象的参数,在这个数组中,除了最后一个元素必须是函数体之外,都是服务名

app.controller(‘myCtrl’,[‘$scope’,’$http’,…function($scope,$http){}]);

强调:注意数组中依赖模块的对应关系

示例什么的个人项目再说吧,基础知识大致就这些了。

$injector注入器——依赖注入背后的故事

它可以快速定位到应用需要注入的各种服务,整个ng应用的注入对象都由$injector定位和创建。

$injector.has()à判断一个服务是否存在

$injector.get()à得到服务的实例

时间: 2024-09-30 09:36:00

AngularJs学习笔记6——四大特性之依赖注入的相关文章

AngularJs学习笔记2——四大特性之MVC

angularJs的四大特性 ①.采用MVC的设计模式 ②.双向数据绑定 ③.依赖注入 ④.模块化设计 现在细说一下MVC的设计模式: MVC: Model(模型)--项目中的数据 View(视图)--数据的呈现 Controller(控制器)--获取模型数据,选择视图加以呈现. 整个MVC的流程也就是上图的样子,用户行为触发控制器,然后改变模型数据,经过模型的处理,更新相关的视图.形成MVC的环流.下面具体说一下AngularJS中如何实现MVC的步骤的. 使用ng的MVC的基本步骤: ①声明

AngularJs学习笔记7——四大特性之模块化设计

模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module('fan02',['ng','fan']); 就调用fan02模块中所定义的东西 2.ng内置的模块的用法 (1) ngRoute模块(路由模块) AngularJS是一个开源的js框架.用在数据操作比较频繁的场景下,用于SPA应用 单页面应用的工作原理: 1.页面url:http://127.0.0

AngularJs学习笔记4——四大特性之双向数据绑定

双向数据绑定 方向1:模型数据(model)绑定到视图(view) 实现方法:①.{{model变量名}}  ②.常用指令(ng-repeat) 方向2:将视图(view)中用户输入的数据绑定到模型数据(model) 实现方法:ng-model指令,用在表单组件中(input select) $watch()监听模型变量值的改变->执行指定的方法 $watch('变量名',function(){-}); 一个很简单的栗子: 实时获取输入框中输入的内容,打印在控制台 1 <!DOCTYPE ht

Spring.Net学习笔记十(打造简易的依赖注入框架)

之前我们学习里一个简易的IoC框架.今天我们接着上次的程序,实现带参数构造函数对象的实例和属性的注入 .原文地址:http://www.cnblogs.com/GoodHelper/archive/2009/11/02/SpringNet_MyDi.html 我感觉这个很有必要对应IOC框架的理解,知道注入的工作原理,对应实际的应用是很有帮助的. 我们知道可以通过反射获取类的构造函数及参数(GetConstructors方法):可以获取属性和属性的类型(GetProperties方法).通过Ac

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser

-_-#AngularJS学习笔记

AngularJS学习笔记 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .done{display:none} .ignore{color:#999} </style> <ul> <li class="

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req