下载文档原格式
AngularJS 使用指南 20210815 江丽娜----e5f4e5b6-6ea3-11ec-9176-7cb59b590d7dangularjs使用指南-20210815-江丽娜Angularjs用户指南作者：江丽娜modal的控制器继承父屏幕的$scope。
modal引入用fromtemplate方式时，返回的是object，所以与使用fromtemplateurl 时返回的promise不同，获取modal的使用应用下列方法。
有棱角的模块（“应用程序”）。
控制器（'bindcardaddctrl'，函数（$scope，$ionicmodal）{$scope.modal=$ionicmodal.fromtemplate（''，{animation:'slide-in-up'}）；$scope.openmodal=function(){$scope.modal.show();};});有棱角的模块（“应用程序”）。
指令（'banklist'，function（）{return{restrict:'e'，scope:true，然后，在组件的controller中就能使用父画面的$scope了。
Jsonp可以用这种方式在JS中调用。
回调是jsonp的回调接口，必须给出contractno:contractnotxt,fundcode:fundcodetxt,}}). 成功（函数（数据、状态、标题、配置）{console.log（\+data.msg）；}）。
error(function(data,status,headers,config){});这可以在服务器端设置stringcallback=request.getparameter(\);stringbuilderjsonp=newstringbuilder(cal lback);out.print(jsonp.tostring());如果没有服务器，可以创建本地TXT文件以模拟访问。
AngularJS入门教程AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC 框架，由谷歌最初开发的开源项目，干净的架构吸引了大量粉丝，适合建立CRUD类型的业务应用程序，并不适合开发游戏等应用，使用声明性编程的用户界面和命令式编程的逻辑，支持现代桌面和移动浏览器InternetE某plorer版本8.0及以上。
AngularJS是一款客户端MVC的javacript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS架构)，如果你有Strut或SpringMVC等后端MVC框架编程经验，学习Angular会很快，基本是按照同一个MVC思路实现的。
MVC模式见：Model模型:业务数据.通过$cope显露给视图ViewView视图:用户界面层数据绑定模型调用控制器的功能。
使用声明指令directive以便重用代码Controller控制器将视图和模型胶合一起提供功能方法使用服务，可重复使用的逻辑除了上面MVC模型以外，还提供以下组件(有些类似安卓)：服务组件服务是可重用的业务逻辑组件可测试性能作为单身对象创建使用AngularJS依赖注入的注射依赖组件创建服的务作为一个模块的一部分一个模块可以依赖于另一个模块$q：异步请求使用，promie/deferred模块$routeProvider：配置路由$log：日志服务E-Element元素名称:A-Attribute属性:内建标准的指令有：ng-app(A)用来启动AngularJSng-controller(A,C)绑定控制器ng-model(A,C)绑定模型ng-change(E,A)ng-click(A,C)ng-repeat(A,C) Helloword第一个程序开始一个Angular项目，可以直接拷贝这个源码项目到你的目录即可(GitHub)，然后在其基础上修改拓展。
例如一个inde某.html的代码如下图：其中有两个指令。
Angular4基础知识培训之快速入门目录∙第一节- Angular 简介∙第二节- Angular 环境搭建∙第三节- 插值表达式∙第四节- 自定义组件∙第五节- 常用指令简介∙第六节- 事件绑定∙第七节- 表单模块简介∙第八节- Http 模块简介∙第九节- 注入服务∙第十节- 路由模块简介第一节Angular 简介Angular 是什么Angular是由谷歌开发与维护一个开发跨平台应用程序的框架，同时适用于手机与桌面。
Angular 有什么特点∙基于Angular 我们可以构建适用于所有平台的应用。
比如：Web 应用、移动Web 应用、移动应用和桌面应用等。
∙通过Web Worker和服务端渲染(SSR)，达到在如今Web平台上所能达到的最高渲染速度。
∙Angular 让你能够有效掌控可伸缩性。
基于RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。
Angular 提供了哪些功能∙动态HTML∙强大的表单系统(模板驱动和模型驱动)∙强大的视图引擎∙事件处理∙快速的页面渲染∙灵活的路由∙HTTP 服务∙视图封装∙AOT、Tree ShakingAngular 与AngularJS 有什么区别∙不再有Controller和Scope∙更好的组件化及代码复用∙更好的移动端支持∙引入了RxJS与Observable∙引入了Zone.js，提供更加智能的变化检测第二节- Angular 环境搭建基础要求∙Node.js∙GitAngular 开发环境配置方式∙基于Angular Quickstarto https:///angular/quickstart∙基于Angular CLIo npm install -g @angular/cli配置开发环境我们选用第一种配置方式搭建Angular 开发环境：基于Angular Quickstart∙使用Git克隆quickstart 项目git clone https:///angular/quickstart ng4-quickstart ∙使用IDE打开已新建的项目code ./ng4-quickstart∙安装项目所需依赖npm i∙验证环境是否搭建成功npm start基于Angular CLI∙安装Angular CLI (可选)npm install -g @angular/cli∙检测Angular CLI 是否安装成功ng --version∙创建新的项目ng new PROJECT-NAME∙启动本地服务器cd PROJECT-NAME ng serve第三节- 插值表达式在Angular 中，我们可以使用{{}}插值语法实现数据绑定。
跟我学AngularJs：AngularJs内置指令大全林炳文Evankaka原创作品。
转载请注明出处/evankaka本教程使用AngularJs版本：1.5.3AngularJs GitHub: https:///angular/angular.js/AngularJs下载地址：摘要：本文主要介绍了AngularJs中自带的指令1、ng-model这个大家都非常熟悉了，就是将表单控件和当前作用域的属性进行绑定。
需要注意绑定的scope的范围（父scope与子scope）。
2、ng-init用得比较少，该指令被调用时会初始化内部作用域。
一般不建议使用此参数。
3、ng-app这个是必需的。
使用该指令自动启动一个AngularJS应用。
ngapp指令指定的应用程序的根元素，通常放置在网页的根元素如body或html 标签。
只有一个AngularJS应用可以自动引导每个HTML文档。
第一ngapp找到该文件将定义自动引导的根元素的应用。
运行多个应用程序在一个HTML文件，您必须手动引导他们使用angular.bootstrap。
AngularJS应用不能互相嵌套。
你可以指定一个AngularJS模块被用于应用程序的根模块。
该模块将被加载到应用程序时，引导到$injector对象中。
它应该包含所需的应用程序代码，或依赖于将包含代码的其他模块的依赖关系。
更多信息见angular.module。
4、ng-controller这个也是经常用到的，用来定义一个控制器。
注意格式5、ng-form用来定义一个from，通常是用来验证参数。
通常可以和以下标签一起使用ng-valid (有效的).ng-invalid （无效的）.ng-pristine （原始，简介）.ng-dirty （脏的）.ng-submitted （提交的）6、ng-disabled像这种只要出现则生效的属性，我们可以在AngularJS中通过表达式返回值true/false令其生效。
AngularJS学习（三）——控制器ControllerController介绍在angular中，controller由JavaScript的构造函数定义，主要用于增强angular的scope。
当controller通过ng-controller directive与DOM关联，angular将用指定的controller构造函数实例化一个新的controller对象，同时一个新的child scope将被创建，然后以参数$scope 注入到controller中。
如果controller使用了controller as a语法，那么控制器实例将会分配给这个属性a。
在第一章有讲到这种情况，可以返回去看下，这里就不再写示例了。
使用controller的情况：∙$scope中对象的初始化∙给$scope中对象增加一些行为不使用controller的情况：∙操作DOM，controller应该仅仅包含业务逻辑，把显示的逻辑放到controller中会影响它的可测试性，angular有很多数据绑定和封装了DOM操作的directives，完全没必要去操作DOM。
∙格式化输入，用angular form controls代替∙过滤输出，用angular filters代替∙在controller直接共享代码或状态，用angular services代替∙管理其他组件的生命周期（如创建一个service实例）scope对象初始化通常情况下，你创建一个angular应用时，你需要先设置scope的初始状态。
你需要为scope 设置一些属性，包含在view中预先声明的model，所有$scope的属性在controller注册的DOM里都是可用的。
下面的例子演示如何创建一个controller，并且初始化scope对象。
var myApp = angular.module('myApp', []);myApp.controller('GreetingController', ['$scope', function ($scope) {$scope.greeting = 'Hola!';}]);我们创建了一个angular module : myApp，然后调用module的controller方法，给module增加了一个controller构造函数。
MVC (3)JS MVC (3)Angular JS MVC：MVVM（Model-View-ViewModel） (4)$scope作用域 (5)$scope (5)作用域的生命周期 (5)$rootScope (6)控制器作用域继承 (7)Angular JS run() 方法 (8)Angular JS依赖注入中代码压缩问题 (9)Angular JS 的$watch()方法 (10)$digest循环 (10)$watch列表：$watchers (10)脏值检查 (11)$watch()方法 (12)Angular JS 的$apply()方法 (14)$apply() (14)何时使用$apply (15)Angular JS工具方法 (16)angular.bind(self,fn,args) (16)angular.copy(source,[destination]) (17)angular.equals(o1,o2) (18)angular.extend(dst,src) (18)angular.forEach(obj,iterator,[context]) (19)angular.fromJson(string) (19)angular.bootstrap(element,[modules]) (20)Angular.element() (21)其他 (21)类型判定 (21)Angular JS MVC：MVCMVC（模型-视图-控制器）是一套设计模式，可以分层设计应用。
将数据（模型）与用户视图（视图）解耦，通过中间控制器（Controllers）处理业务逻辑、用户输入以及相应的逻辑跳转。
●模型：是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中存取数据。
●视图：是应用程序中处理数据显示的部分，通常思路是依据模型数据创建的。
●控制：是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
Angular表单嵌套、动态表单说明: 组件使⽤了ng-zorro ()第⼀类：嵌套表单1. 静态表单嵌套ponent.html<form [formGroup]="formGroup"><div><label>名称: </label><input type="text" formControlName="title" ([ngModel])="formData.title" /><nz-form-explain *ngIf="formGroup.get('title').dirty && formGroup.get('title').errors">请填写名称!</nz-form-explain></div><!--嵌套表单（user）--><div formGroupName="user"><div><label>⽤户名: </label><input type="text" formControlName="erName" [(ngModel)]="erName" /><nz-form-explain *ngIf="formGroup.get('erName').dirty && formGroup.get('erName').errors">请填写姓名!</nz-form-explain> </div><div><label>密码: </label><input type="text" formControlName="erPwd" [(ngModel)]="erPwd" /><nz-form-explain *ngIf="formGroup.get('erPwd').dirty && formGroup.get('erPwd').errors">请填写密码!</nz-form-explain> </div></div></form>ponent.tsexport class DemoComponent implements OnInit {// 定义变量private formGroup: FormGroup;private fromData: {title = ''; user: {userName = ''; userPwd = ''}};construct(private _fb: FormBuilder) {}ngOnInit() { // ⾃定义验证规则this.formGroup = this._fb.group({title: [null, [null, Validators.required]],user: this._fb.group({ // 嵌套表单验证规则userName:[null, Validators.required],userPwd:[null, Validators.required],});});}// 验证表单validateForm() {for (const i in this.formGroup.controls) {form.controls[ i ].markAsDirty();form.controls[ i ].updateValueAndValidity();}// 验证是否通过if (form.valid) { // 验证通过//////////}}// 获取数据getData() {const data = this.formData;console.log(data);}}2. 动态表单嵌套（数组式添加）1. ponent.html<form [formGroup]="formGroup"><!--嵌套表单（sqxx）--><div formGroupName="sqxx"><!--动态添加表单按钮--><button style="width:60%" (click)="addData($event)">添加申请信息</button><!--添加的课程量列表--><nz-table*ngIf="applyInfoArray.length > 0"#sqxxTableDatanzSize="middle"[nzData]="applyInfoArray"[nzShowPagination]="false"[nzSize]="'small'"class="kclsq-sqxx-table"><thead><tr><th>类型</th><th>数量</th><th>操作</th></tr></thead><tbody><!--动态添加项--><ng-container *ngFor="let item of infoArray; index as i;"><tr><td><input nz-input placeholder="类型" [formControlName]="item.type" style="width: 120px;"></td><td><input nz-input placeholder="⼯作量" [formControlName]="item.num" style="width: 120px;"></td><td><a href="javascript:;" (click)="delInfo(item.type, sqxxItem.num)"><i nz-icon type="delete" theme="outline"></i></a> </td></tr><!--动态添加项验证未通过时显⽰项--><nz-form-explain *ngIf="(formGroup.value['sqxx'][item.type] === '' && isSqxxValid) || (formGroup.value['sqxx'][item.num] === ''&& isSqxxValid)">类型、数量均不能为空!</nz-form-explain> </ng-container></tbody></nz-table></div></form>2. ponent.tsexport class DemoComponent implements OnInit {formGroup: FormGroup;// 动态表单变量isSqxxValid = false;infoArray: any[] = [];construct(private _fb: FormBuilder) {}ngOnInit() {// ⾃定义验证规则this.formGroup = this._fb.group({sqxx: this._fb.group({});});// 默认添加⼀项this.addData();}// 点击添加表单项按钮addData() {// 获取唯⼀值const uid1 = this.getUID();const uid2 = this.getUID();// 申请信息数组添加数据Array.push({type: uid1,num: uid2});console.log(this.applyInfoArray);// 添加FormControlconst control = <FormGroup>this.addFormGroup.controls['sqxx'];////// 1. 创建FormControlconst typeControl = new FormControl([null, Validators.required]);const numControl = new FormControl([null, Validators.required]);///// 2. 设置默认值typeControl.setValue('');numControl.setValue('');//// 3. 添加FormControl⾄sqxx表单控件内control.addControl(uid1,typeControl);control.addControl(uid2,numControl);}// ⽣成唯⼀值getUID() {return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);return v.toString(16);});}}// 删除表单项delInfo(type, num) {if (Array.length > 1) {// 从申请信息记录数组中删除此项for (let i = 0; i < Array.length; i++) {if (Array[i].type===type && Array[i].num===num) {Array.splice(i, 1);}}const sqxxControl = <FormGroup>this.formGroup.controls['sqxx'];sqxxControl.removeControl(type);sqxxControl.removeControl(num);} else {this._msgService.warning('这已是最后⼀项，不可删除');}}// 最终获取数据getData() {// 构造动态表单信息const formDataValue = this.formGroup.value;const sqxxData = [];for (let i = 0; i < Array.length; i++) {const item = {num : formDataValue.sqxx[Array[i].num],type: formDataValue.sqxx[Array[i].type]};sqxxData.push(sqxxItem);}console.log(sqxxData);}// 验证表单validateForm() {this.isSqxxValid = true; // 保证和别的表单⼀同验证；for (const i in this.formGroup.controls) {form.controls[ i ].markAsDirty();form.controls[ i ].updateValueAndValidity();}// 验证是否通过if (form.valid) { // 验证通过//////////}}第⼆类：⾮嵌套表单1. ⾮嵌套表单使⽤可参照中的Form表单1. ⾮嵌套表单动态添加删除可参照中的Form表单下的动态增减表单项FormGroup 和 FormArray的区别FormGroup跟踪⼀组 FormControl 实例的值和有效性状态。
