前言:
首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学),所以今天准备出一篇Angular学习资料汇总和日常开发中使用比较频繁的语法总结。让更多的后端程序员更好的了解学习Angualr,拓展自己的技术栈。
Angular简介:
Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。
学习资料推荐:
Angular-GitHub仓库地址:
https://github.com/angular/angular
Angualr官方文档教程(推荐):
对于我们而言无论是学习什么技术,首先一点不要忽视了官网的重要性,而且Angular官网还有中文版的相对而言更容易上手。
https://angular.cn/docs
AngularJS 文档教程 | 菜鸟教程:
https://www.runoob.com/angularjs/angularjs-tutorial.html
AngularJS 文档教程 | W3Cschool:
https://www.w3cschool.cn/angularjs/
Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目:
https://www.cnblogs.com/Can-daydayup/p/14166192.html
Angular 学习资源清单:
https://github.com/wendellhu95/blog/issues/10
https://zhuanlan.zhihu.com/p/36385830
Angular教程_Angular8 Angular9入门实战视频教程(推荐):
对于一些初学者而言,假如不知道该怎么做的话最好推荐先看看视频,熟悉一下Angualr的开发的基本流程。
https://www.bilibili.com/video/BV1bt411e71b?from=search&seid=14846265447217622438
AngularJS视频教程_免费AngularJS教程在线学习-php中文网课程:
https://www.php.cn/course/list/20.html
Angular实战教程视频:
https://www.bilibili.com/video/BV1i741157Fj?from=search&seid=14846265447217622438
Angular常用语法:
1、事件绑定 ():
<button (click) = "share()"> share </button>
2、click 点击事件:
<button (click) = "share()"> share </button>
3、ng-hide/ng-show设置应用部分是否可见:
<p ng-hide="true"> //隐藏 <p ng-hide="false">//显示
4、ngModelChange选择改变事件:
=============Html============= <div class="set-select"> <label for="rankbutton">选择平台</label> <select id="rankbutton" [(ngModel)]="platform" (ngModelChange)="set_platform()"> <select id="rankbutton" [(ngModel)]="platform"> <option *ngFor="let item of platforms" [value]='item.key'>{{item.value}}</option> </select> </div> ============Ts================ platform = 'wx'; platforms: any = [ { key: 'wx', value: '微信' }, { key: 'tt', value: '百度' }, { key: 'wb', value: '微博' }, { key: 'bjh', value: '抖音' }, { key: 'zcool', value: '淘宝' }, ]; set_platform() { this.platform console.log('this.platform:',this.platform) }
5、input事件在用户输入时触发:
<input placeholder="input here" (input)="onInput($event)" />
6、属性绑定 [ ] 语法:
<a [title]="product.name+'描述'">
7、[(ngModel)]
:双向绑定:
NgModel 指令允许你显示数据属性并在用户进行更改时更新该属性。这是一个例子:
src/app/app.component.html (NgModel example) content_copy <input [(ngModel)]="currentItem.name" id="example-ngModel" name='currentName'> //注意某些情况下需要加name表示唯一标识,不加的话可能会报错
导入 FormsModule 以使用 ngModel
要想在双向数据绑定中使用 ngModel 指令,必须先导入 FormsModule 并将其添加到 NgModule 的 imports 列表中。要了解关于 FormsModule 和 ngModel 的更多信息,参阅表单一章。
记住,要导入 FormsModule 才能让 [(ngModel)] 可用,如下所示:
src/app/app.module.ts (FormsModule import) content_copy import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular /* . . . */ @NgModule({ /* . . . */ imports: [ BrowserModule, FormsModule // <--- import into the NgModule ], /* . . . */ }) export class AppModule { }
https://angular.cn/guide/built-in-directives#ngModel
8、插值语法 {{...}}:
花括号之间的文本通常是组件属性的名字。Angular 会把这个名字替换为响应组件属性的字符串值。
<p>{{title}}</p> <div><img src="{{itemImageUrl}}"></div>
9、Angular使用[InnerHtml]中正常显示富文本内容:
<div class="text" [innerHTML]="richText"></div>
https://blog.csdn.net/a1056244734/article/details/106802008
10、Angular ngFor循环的使用:
属性index、count、first、last、even、odd
- index属性提供当前对象的索引
- count提供当前数据集的长度,类似于datasource.length
- first返回当前列表项是否为第一个
- last返回当前列表项是否为最后一个
- even返回当前列表项index是否为偶数,通常用在增加样式用来区分行与行之间
- odd返回当前列表项index是否为奇数
<ul> <li *ngFor="let item of datasource; let o=odd,let e=even" [ngClass]="{odd-action: o,even-action: e}"> <card-item [item]="item"></card-item> </li> </ul>
https://www.jianshu.com/p/a35dc3e283cd
11、AngularJS ng-repeat
循环使用:
<h1 ng-repeat="x in records">{{x}}</h1> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.records = [ "菜鸟教程1", "菜鸟教程2", "菜鸟教程3", "菜鸟教程4", ] }); </script>
12、Angular ng-if判断使用:
//在angular中没有else只能都通过ng-if来判断 <p ng-if="OwnStatus==0">准备中</p> <p ng-if="OwnStatus==1">进行中</p> <p ng-if="OwnStatus==2">已经完成</p>
13、this.router.navigateByUrl跳转:
<button (click)="Transfer()">页面调转</button> 在typescript中引用Route: import { Router } from '@angular/router'; 在构造函数里注入: constructor(private router: Router) { } 调转事件: Transfer() { //调转到指定的页面 this.router.navigateByUrl("workspace/ClassInfo"); }
14、routerlink跳转:
routerLink本身支持两种写法: <a routerLink="UserDetail"></a> <a [routerLink]="['UserDetail']"></a>
15、[angular]遍历Array的方法:for, forEach, every,some:
for…of:
let someArray = [1, "string", false]; for (let entry of someArray) { console.log(entry); // 1, "string", false }
for循环:
let someArray = [1, "string", false]; for (var i = 0; i < someArray.length; i ++) { console.log(someArray[i]); // 1, "string", false }
for…in:
let list = [4, 5, 6]; for (let i in list) { console.log(i); // "0", "1", "2", } for (let i of list) { console.log(i); // "4", "5", "6" }
forEach:
forEach其实是JavaScript的循环语法,TypeScript作为JavaScript的语法超集,当然默认也是支持的。 let list = [4, 5, 6]; list.forEach((val, idx, array) => { // val: 当前值 // idx:当前index // array: Array });
every和some:
every和some也都是JavaScript的循环语法,TypeScript作为JavaScript的语法超集,当然默认也是支持的。因为forEach在iteration中是无法返回的,所以可以使用every和some来取代forEach。
let list = [4, 5, 6]; list.every((val, idx, array) => { // val: 当前值 // idx:当前index // array: Array return true; // Continues // Return false will quit the iteration });
参考文章:https://www.jianshu.com/p/2f0c4d81e934
AngularJS 指令大全:
指令 | 描述 |
---|---|
ng-app | 定义应用程序的根元素。 |
ng-bind | 绑定 HTML 元素到应用程序数据 |
ng-bind-html | 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 |
ng-bind-template | 规定要使用模板替换的文本内容 |
ng-blur | 规定 blur 事件的行为 |
ng-change | 规定在内容改变时要执行的表达式 |
ng-checked | 规定元素是否被选中 |
ng-class | 指定 HTML 元素使用的 CSS 类 |
ng-class-even | 类似 ng-class,但只在偶数行起作用 |
ng-class-odd | 类似 ng-class,但只在奇数行起作用 |
ng-click | 定义元素被点击时的行为 |
ng-cloak | 在应用正要加载时防止其闪烁 |
ng-controller | 定义应用的控制器对象 |
ng-copy | 规定拷贝事件的行为 |
ng-csp | 修改内容的安全策略 |
ng-cut | 规定剪切事件的行为 |
ng-dblclick | 规定双击事件的行为 |
ng-disabled | 规定一个元素是否被禁用 |
ng-focus | 规定聚焦事件的行为 |
ng-form | 指定 HTML 表单继承控制器表单 |
ng-hide | 隐藏或显示 HTML 元素 |
ng-href | 为 the <a> 元素指定链接 |
ng-if | 如果条件为 false 移除 HTML 元素 |
ng-include | 在应用中包含 HTML 文件 |
ng-init | 定义应用的初始化值 |
ng-jq | 定义应用必须使用到的库,如:jQuery |
ng-keydown | 规定按下按键事件的行为 |
ng-keypress | 规定按下按键事件的行为 |
ng-keyup | 规定松开按键事件的行为 |
ng-list | 将文本转换为列表 (数组) |
ng-model | 绑定 HTML 控制器的值到应用数据 |
ng-model-options | 规定如何更新模型 |
ng-mousedown | 规定按下鼠标按键时的行为 |
ng-mouseenter | 规定鼠标指针穿过元素时的行为 |
ng-mouseleave | 规定鼠标指针离开元素时的行为 |
ng-mousemove | 规定鼠标指针在指定的元素中移动时的行为 |
ng-mouseover | 规定鼠标指针位于元素上方时的行为 |
ng-mouseup | 规定当在元素上松开鼠标按钮时的行为 |
ng-non-bindable | 规定元素或子元素不能绑定数据 |
ng-open | 指定元素的 open 属性 |
ng-options | 在 <select> 列表中指定 <options> |
ng-paste | 规定粘贴事件的行为 |
ng-pluralize | 根据本地化规则显示信息 |
ng-readonly | 指定元素的 readonly 属性 |
ng-repeat | 定义集合中每项数据的模板 |
ng-selected | 指定元素的 selected 属性 |
ng-show | 显示或隐藏 HTML 元素 |
ng-src | 指定 <img> 元素的 src 属性 |
ng-srcset | 指定 <img> 元素的 srcset 属性 |
ng-style | 指定元素的 style 属性 |
ng-submit | 规定 onsubmit 事件发生时执行的表达式 |
ng-switch | 规定显示或隐藏子元素的条件 |
ng-transclude | 规定填充的目标位置 |
ng-value | 规定 input 元素的值 |
https://www.runoob.com/angularjs/angularjs-reference.html