angular中config (转载)

 转载自:http://blog.csdn.net/u014737138/article/details/50011051

angularJS 模块可以在被加载和执行之前对其自身进行配置   


作用就是:在应用的加载阶段应用不同的逻辑


我们知道 前面注册一个模块方法是:

var app = angular.module("myApp", []);  

这种方法带有两个参数,一个是模板名,一个是依赖注入列表,数组为空,表示当前注册的模板不需要依赖关系

这种方法注册的模板,angularJS机制会新建一个模板,


还有另外一种方式来获取一个模板

var app = angular.module("myApp");  

这种方法只带有一个参数,就是模板的名称,很容易懂,就是如果我的应用程序中有了这个模板,那么就返回这个模板一样配置的模板,

但是注意的是,他们是同一个模板,如果在我们的应用程序中不存在这个模板,那么就会抛出异常的


angular.module()创建、获取、注册angular中的模块

The angular.module() is a global place for creating, registering and retrieving Angular modules.When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved。


再说配置 angularJS会在 提供者   注册和配置的过程中对模板进行配置,

在整个angularJS的工作流中,也只有这个阶段可以是唯一可以对应用进行修改的地方


它的定义一般是这样的,使用方法,config


var app = angular.module("myApp", []);  

app.config(function(){

//

})


再来深刻理解  config的工作流程:

我们现在新建了一个模板:这个模板中有一个服务,一个自定义指令

var app = angular.module("myApp", []);  

app.fatory('myFactory',function(){

//利用工厂生产  创建一个 服务

var service = {};

return service;

});

app.directive('myDirectiive',function(){

//创建 一个 自定义指令

return {

template:'<div><button>click me</button></div>'

}

});


angularJS编译的流程是这样的:

var app = angular.module('myApp',[]);
app.config(function($provide,$compileProvider){
$provide.factory('myFactory',function(){
var service = {};
return service;
});
$compileProvider.directive('myDiretive',function(){
return {
template:'<div><button>click me</button></div>'
}
});
});


PS:angularJS会根据你定义的函数顺序来执行他们,


我们知道了angularJS以什么样的方式执行我们定义的服务,指令,变量,这就给我们带来一个问题,

什么样的东西,才会是在config()的时候被执行的呢,换句话说是这样的东西能够被注入到config里面呢


答案是:提供者 和常量


这里提供一个常量注入配置的例子:

app.config(function(gameProvider){

gameProvider.setType("War")

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular,可以使用`FormBuilder`和`FormGroup`来动态生成表单验证。您可以在`@NgModule`装饰器的`providers`数组使用`{ provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true }`向表单添加自定义验证器。下面是一个示例: 首先,创建一个自定义验证器指令`CustomValidatorDirective`: ```typescript import { Directive } from '@angular/core'; import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms'; @Directive({ selector: '[appCustomValidator]', providers: [{ provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true }] }) export class CustomValidatorDirective implements Validator { validate(control: AbstractControl): ValidationErrors | null { // 自定义验证逻辑 // 返回一个对象,其包含验证失败的错误信息 return { 'customError': true }; } } ``` 然后,在你的组件使用`FormBuilder`来动态生成表单并添加验证器: ```typescript import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-form', template: ` <form [formGroup]="myForm"> <input type="text" formControlName="myField" appCustomValidator> <div *ngIf="myForm.get('myField').hasError('customError')">自定义验证失败</div> </form> ` }) export class MyFormComponent { myForm: FormGroup; constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ myField: ['', Validators.required] }); } } ``` 在上面的示例,我们使用`FormBuilder`创建了一个`myForm`表单,并在`myField`输入字段上应用了自定义验证器`appCustomValidator`。如果验证失败,我们可以根据错误状态显示相应的消息。 请注意,这只是一个简单的示例,您可以根据您的需求自定义验证逻辑和错误消息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值