Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）

2021-01-29 10:10:39 浏览数 (1)

前言：

　　首先为什么要写这样的一篇文章呢？主要是因为前段时间写过一些关于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://cloud.tencent.com/developer/article/1764472

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、事件绑定 （）:
代码语言：javascript复制
<button (click) = "share()"> share </button>
2、click 点击事件：
代码语言：javascript复制
<button (click) = "share()"> share </button>
3、ng-hide/ng-show设置应用部分是否可见：
代码语言：javascript复制
<p ng-hide="true"> //隐藏
<p ng-hide="false">//显示
4、ngModelChange选择改变事件：
代码语言：javascript复制
=============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事件在用户输入时触发：
代码语言：javascript复制
<input placeholder="input here" (input)="onInput($event)" />
6、属性绑定 语法：
代码语言：javascript复制
 <a [title]="product.name '描述'">
7、[(ngModel)] ：双向绑定：

NgModel 指令允许你显示数据属性并在用户进行更改时更新该属性。这是一个例子：

代码语言：javascript复制
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) 可用，如下所示：

代码语言：javascript复制
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 会把这个名字替换为响应组件属性的字符串值。

代码语言：javascript复制
<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>
9、Angular使用InnerHtml中正常显示富文本内容：
代码语言：javascript复制
<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是否为奇数
代码语言：javascript复制
<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 循环使用：
代码语言：javascript复制
<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>
Angular ng-if判断使用：
代码语言：javascript复制
//在angular中没有else只能都通过ng-if来判断
<p ng-if="OwnStatus==0">准备中</p>
<p ng-if="OwnStatus==1">进行中</p>
<p ng-if="OwnStatus==2">已经完成</p>
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

https 网络安全 angularjs html

0 人点赞