Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）
<h2>前言：</h2><p> 首先为什么要写这样的一篇文章呢？主要是因为前段时间写过一些关于Angualr的相关实战文章，有些爱学习的小伙伴对这方面比较感兴趣，但是又不知道该怎么入手（因为认识我的大多数小伙伴都是后端的同学），所以今天准备出一篇Angular学习资料汇总和日常开发中使用比较频繁的语法总结。让更多的后端程序员更好的了解学习Angualr，拓展自己的技术栈。</p>
<h2>Angular简介：</h2>
<p> Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。</p>
<h2>学习资料推荐：</h2>
<h3>Angular-GitHub仓库地址：</h3>
<blockquote>
<p>https://github.com/angular/angular</p>
</blockquote>
<h3>Angualr官方文档教程（推荐）：</h3>
<p> 对于我们而言无论是学习什么技术，首先一点不要忽视了官网的重要性，而且Angular官网还有中文版的相对而言更容易上手。</p>
<blockquote>
<p>https://angular.cn/docs</p>
</blockquote>
<h3>AngularJS 文档教程 | 菜鸟教程：</h3>
<blockquote>
<p>https://www.runoob.com/angularjs/angularjs-tutorial.html </p>
</blockquote>
<h3>AngularJS 文档教程 | W3Cschool：</h3>
<blockquote>
<p>https://www.w3cschool.cn/angularjs/</p>
</blockquote>
<h3 class="postTitle">Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目：</h3>
<blockquote>
<p>https://www.cnblogs.com/Can-daydayup/p/14166192.html</p>
</blockquote>
<h3 class="gh-header-title mb-2 lh-condensed f1 mr-0 flex-auto break-word"><span class="js-issue-title">Angular 学习资源清单：</span></h3>
<blockquote>
<p><span class="js-issue-title">https://github.com/wendellhu95/blog/issues/10</span></p>
<p><span class="js-issue-title">https://zhuanlan.zhihu.com/p/36385830</span></p>
</blockquote>
<h3 class="video-title" title="Angular教程_Angular8 Angular9入门实战视频教程-2020年更新【IT营】"><span class="tit">Angular教程_Angular8 Angular9入门实战视频教程（推荐）：</span></h3>
<p><span class="tit">对于一些初学者而言，假如不知道该怎么做的话最好推荐先看看视频，熟悉一下Angualr的开发的基本流程。</span></p>
<blockquote>
<p><span class="tit">https://www.bilibili.com/video/BV1bt411e71b?from=search&seid=14846265447217622438</span></p>
</blockquote>
<h3>AngularJS视频教程_免费AngularJS教程在线学习-php中文网课程：</h3>
<blockquote>
<p>https://www.php.cn/course/list/20.html</p>
</blockquote>
<h3 class="video-title" title="2020最新Angular实战教程"><span class="tit">Angular实战教程视频：</span></h3>
<blockquote>
<p><span class="tit">https://www.bilibili.com/video/BV1i741157Fj?from=search&seid=14846265447217622438</span></p>
</blockquote>
<h2>Angular常用语法：</h2>
<h4>1、事件绑定 :</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><button (click) = "share()"> share </button>
</pre>
</div>
<h4><strong>2、click</strong> 点击事件：</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><button (click) = "share()"> share </button></pre>
</div>
<h4><strong>3、ng-hide/<strong>ng-show</strong></strong>设置应用部分是否可见：</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><p ng-hide="true"> //隐藏
<p ng-hide="false">//显示</pre>
</div>
<h4>4、ngModelChange选择改变事件：</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">=============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" ='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)
}</pre>
</div>
<h4 class="_1RuRku">5、input事件在用户输入时触发：</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><input placeholder="input here" (input)="onInput($event)" /></pre>
</div>
<h4>6、属性绑定 [ ] 语法：</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"> <a ="product.name+'描述'"></pre>
</div>
<h4><code>7、[(ngModel)]</code> ：双向绑定：</h4>
<p>NgModel 指令允许你显示数据属性并在用户进行更改时更新该属性。这是一个例子：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">src/app/app.component.html (NgModel example)
content_copy
<input [(ngModel)]="currentItem.name" id="example-ngModel" name='currentName'> //注意某些情况下需要加name表示唯一标识，不加的话可能会报错</pre>
</div>
<p>导入 FormsModule 以使用 ngModel<br>要想在双向数据绑定中使用 ngModel 指令，必须先导入 FormsModule 并将其添加到 NgModule 的 imports 列表中。要了解关于 FormsModule 和 ngModel 的更多信息，参阅表单一章。</p>
<p>记住，要导入 FormsModule 才能让 [(ngModel)] 可用，如下所示：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">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 { }</pre>
</div>
<blockquote>
<p>https://angular.cn/guide/built-in-directives#ngModel</p>
</blockquote>
<h4 id="interpolation-">8、插值语法 <code>{{...}}：</code></h4>
<p>花括号之间的文本通常是组件属性的名字。Angular 会把这个名字替换为响应组件属性的字符串值。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div></pre>
</div>
<h4>9、Angular使用中正常显示富文本内容：</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><div class="text" ="richText"></div>
</pre>
</div>
<blockquote>
<p>https://blog.csdn.net/a1056244734/article/details/106802008<br></p>
</blockquote>
<h4>10、Angular ngFor循环的使用:</h4>
<p>属性index、count、first、last、even、odd</p>
<ul>
<li>index属性提供当前对象的索引</li>
<li>count提供当前数据集的长度，类似于datasource.length</li>
<li>first返回当前列表项是否为第一个</li>
<li>last返回当前列表项是否为最后一个</li>
<li>even返回当前列表项index是否为偶数，通常用在增加样式用来区分行与行之间</li>
<li>odd返回当前列表项index是否为奇数</li>
</ul>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><ul>
<li *ngFor="let item of datasource; let o=odd,let e=even" ="{odd-action: o,even-action: e}">
<card-item ="item"></card-item>
</li>
</ul></pre>
</div>
<blockquote>
<p>https://www.jianshu.com/p/a35dc3e283cd</p>
</blockquote>
<h4>11、AngularJS <code>ng-repeat</code> 循环使用：</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><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></pre>
</div>
<h4>12、Angular ng-if判断使用：</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">//在angular中没有else只能都通过ng-if来判断
<p ng-if="OwnStatus==0">准备中</p>
<p ng-if="OwnStatus==1">进行中</p>
<p ng-if="OwnStatus==2">已经完成</p>
</pre>
</div>
<h4>13、<span class="hljs-keyword">this.router.navigateByUrl跳转：</span></h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><button (click)="Transfer()">页面调转</button>
在typescript中引用Route：
import { Router } from '@angular/router';
在构造函数里注入：
constructor(private router: Router) { }
调转事件：
Transfer() {
//调转到指定的页面
this.router.navigateByUrl("workspace/ClassInfo");
}
</pre>
</div>
<h4>14、routerlink跳转：</h4>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">routerLink本身支持两种写法：
<a routerLink="UserDetail"></a>
<a ="['UserDetail']"></a>
</pre>
</div>
<h4>15、遍历Array的方法：for, forEach, every，some：</h4>
<div>
<p><strong>for…of：</strong></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">let someArray = ;
for (let entry of someArray) {
console.log(entry); // 1, "string", false
}
</pre>
</div>
<p><strong>for循环：</strong></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">let someArray = ;
for (var i = 0; i < someArray.length; i ++) {
console.log(someArray); // 1, "string", false
}</pre>
</div>
<p><strong> for…in：</strong></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">let list = ;
for (let i in list) {
console.log(i); // "0", "1", "2",
}
for (let i of list) {
console.log(i); // "4", "5", "6"
}</pre>
</div>
<p><strong>forEach：</strong></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">forEach其实是JavaScript的循环语法，TypeScript作为JavaScript的语法超集，当然默认也是支持的。
let list = ;
list.forEach((val, idx, array) => {
// val: 当前值
// idx：当前index
// array: Array
});
</pre>
</div>
<p><strong>every和some：</strong></p>
<p>every和some也都是JavaScript的循环语法，TypeScript作为JavaScript的语法超集，当然默认也是支持的。因为forEach在iteration中是无法返回的，所以可以使用every和some来取代forEach。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">let list = ;
list.every((val, idx, array) => {
// val: 当前值
// idx：当前index
// array: Array
return true; // Continues
// Return false will quit the iteration
});</pre>
</div>
<blockquote>
<p>参考文章：https://www.jianshu.com/p/2f0c4d81e934</p>
</blockquote>
</div>
<h4>AngularJS 指令大全：</h4>
<table class="reference" style="height: 2016px; width: 796px">
<tbody>
<tr><th>指令</th><th>描述</th></tr>
<tr>
<td>ng-app</td>
<td>定义应用程序的根元素。</td>
</tr>
<tr>
<td>ng-bind</td>
<td>绑定 HTML 元素到应用程序数据</td>
</tr>
<tr>
<td>ng-bind-html</td>
<td>绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符</td>
</tr>
<tr>
<td>ng-bind-template</td>
<td>规定要使用模板替换的文本内容</td>
</tr>
<tr>
<td>ng-blur</td>
<td>规定 blur 事件的行为</td>
</tr>
<tr>
<td>ng-change</td>
<td>规定在内容改变时要执行的表达式</td>
</tr>
<tr>
<td>ng-checked</td>
<td>规定元素是否被选中</td>
</tr>
<tr>
<td>ng-class</td>
<td>指定 HTML 元素使用的 CSS 类</td>
</tr>
<tr>
<td>ng-class-even</td>
<td>类似 ng-class，但只在偶数行起作用</td>
</tr>
<tr>
<td>ng-class-odd</td>
<td>类似 ng-class，但只在奇数行起作用</td>
</tr>
<tr>
<td>ng-click</td>
<td>定义元素被点击时的行为</td>
</tr>
<tr>
<td>ng-cloak</td>
<td>在应用正要加载时防止其闪烁</td>
</tr>
<tr>
<td>ng-controller</td>
<td>定义应用的控制器对象</td>
</tr>
<tr>
<td>ng-copy</td>
<td>规定拷贝事件的行为</td>
</tr>
<tr>
<td>ng-csp</td>
<td>修改内容的安全策略</td>
</tr>
<tr>
<td>ng-cut</td>
<td>规定剪切事件的行为</td>
</tr>
<tr>
<td>ng-dblclick</td>
<td>规定双击事件的行为</td>
</tr>
<tr>
<td>ng-disabled</td>
<td>规定一个元素是否被禁用</td>
</tr>
<tr>
<td>ng-focus</td>
<td>规定聚焦事件的行为</td>
</tr>
<tr>
<td>ng-form</td>
<td>指定 HTML 表单继承控制器表单</td>
</tr>
<tr>
<td>ng-hide</td>
<td>隐藏或显示 HTML 元素</td>
</tr>
<tr>
<td>ng-href</td>
<td>为 the <a> 元素指定链接</td>
</tr>
<tr>
<td>ng-if</td>
<td>如果条件为 false 移除 HTML 元素</td>
</tr>
<tr>
<td>ng-include</td>
<td>在应用中包含 HTML 文件</td>
</tr>
<tr>
<td>ng-init</td>
<td>定义应用的初始化值</td>
</tr>
<tr>
<td>ng-jq</td>
<td>定义应用必须使用到的库，如：jQuery</td>
</tr>
<tr>
<td>ng-keydown</td>
<td>规定按下按键事件的行为</td>
</tr>
<tr>
<td>ng-keypress</td>
<td>规定按下按键事件的行为</td>
</tr>
<tr>
<td>ng-keyup</td>
<td>规定松开按键事件的行为</td>
</tr>
<tr>
<td>ng-list</td>
<td>将文本转换为列表 (数组)</td>
</tr>
<tr>
<td>ng-model</td>
<td>绑定 HTML 控制器的值到应用数据</td>
</tr>
<tr>
<td>ng-model-options</td>
<td>规定如何更新模型</td>
</tr>
<tr>
<td>ng-mousedown</td>
<td>规定按下鼠标按键时的行为</td>
</tr>
<tr>
<td>ng-mouseenter</td>
<td>规定鼠标指针穿过元素时的行为</td>
</tr>
<tr>
<td>ng-mouseleave</td>
<td>规定鼠标指针离开元素时的行为</td>
</tr>
<tr>
<td>ng-mousemove</td>
<td>规定鼠标指针在指定的元素中移动时的行为</td>
</tr>
<tr>
<td>ng-mouseover</td>
<td>规定鼠标指针位于元素上方时的行为</td>
</tr>
<tr>
<td>ng-mouseup</td>
<td>规定当在元素上松开鼠标按钮时的行为</td>
</tr>
<tr>
<td>ng-non-bindable</td>
<td>规定元素或子元素不能绑定数据</td>
</tr>
<tr>
<td>ng-open</td>
<td>指定元素的 open 属性</td>
</tr>
<tr>
<td>ng-options</td>
<td>在 <select> 列表中指定 <options></td>
</tr>
<tr>
<td>ng-paste</td>
<td>规定粘贴事件的行为</td>
</tr>
<tr>
<td>ng-pluralize</td>
<td>根据本地化规则显示信息</td>
</tr>
<tr>
<td>ng-readonly</td>
<td>指定元素的 readonly 属性</td>
</tr>
<tr>
<td>ng-repeat</td>
<td>定义集合中每项数据的模板</td>
</tr>
<tr>
<td>ng-selected</td>
<td>指定元素的 selected 属性</td>
</tr>
<tr>
<td>ng-show</td>
<td>显示或隐藏 HTML 元素</td>
</tr>
<tr>
<td>ng-src</td>
<td>指定 <img> 元素的 src 属性</td>
</tr>
<tr>
<td>ng-srcset</td>
<td>指定 <img> 元素的 srcset 属性</td>
</tr>
<tr>
<td>ng-style</td>
<td>指定元素的 style 属性</td>
</tr>
<tr>
<td>ng-submit</td>
<td>规定 onsubmit 事件发生时执行的表达式</td>
</tr>
<tr>
<td>ng-switch</td>
<td>规定显示或隐藏子元素的条件</td>
</tr>
<tr>
<td>ng-transclude</td>
<td>规定填充的目标位置</td>
</tr>
<tr>
<td>ng-value</td>
<td>规定 input 元素的值</td>
</tr>
</tbody>
</table>
<blockquote>
<p>https://www.runoob.com/angularjs/angularjs-reference.html</p>
</blockquote>
<p> </p>
<p> </p>
<div id="gtx-trans" style="position: absolute; left: -21px; top: 2612.39px"> </div>
</div>
<div id="MySignature" role="contentinfo">
<blockquote >
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者名称：</span>追逐时光者</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者简介：</span>一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。如果该篇文章对您有帮助的话，可以点一下右下角的【♥推荐♥】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确的地方，欢迎指正或补充，不胜感激。
</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/Can-daydayup/p/14315774.html
頁:
[1]