Angular（一）

前端踩坑之Angular起步
为了证明自己曾经学过，赶紧写下笔记顺带分享

1、安装Angular CLI，在已经安装node环境下，运行npm install -g angular 创建手脚架

npm install -g angular-cli

2、在创建手脚架后，通过命令ng new XX(项目名字）创建项目，输入命令后将会自动创建各层级目录，对项目进行初始化

ng new agDemo

3、进入项目目录，cd agDemo

cd agDemo

4、启动项目，ng serve --open，由于使用了命令–open，项目启动后将会自动打开默认浏览器，进入手脚架网页，如果没有使用–open，也可以自行进入localhost:4200,至此，angular项目启动成功

ng serve --open

5、创建模块，关于模块，主要目的就是为了偷懒，减少重复代码，通过ng g c xx（模块名）创建,创建成功后，手脚架将会自动帮我们引入这个模块到app.js中

ng g c helloword
//等价于
ng generate component helloword

6、模块结构分析，第五步成功后，手脚架会在当前src/app目录下创建了一个helloword目录，里面有四个文件：helloword.component.css、helloword.component.html、helloword.component.spec.ts、helloword.component.ts，前两个文件很明显是css和html页面，后两个不好说，而在helloword.component.ts中，有一个@Component标记的对象，只要把对象里面的selector复制到上级目录的app.commonent.html中，就可以把hellowork模块的内容展示出来，这里为了明显，直接就把原来的内容删了再加上。

7、双向绑定？angular能够使用**{{}}**进行类似vue的数据绑定，也类似Java中模板引擎，反正觉得像什么就是什么，在第六步中生成的文件helloword.component.ts中

export class AppComponent {sthName= '靓仔';
}

这个输出的类，里面可以定义变量，然后在同模块下，helloword.component.html中可以通过*{{sthName}}*就可以使用变量，

<p>helloword {{sthName}}！</p>

Angular（一）相关推荐

Angular No name was provided for external module 'XXX' in output.globals 错误
Angular 7 开发自定义库时,引用ngZorroAntd,build过程中出现 No name was provided for external module 'ng-zorro-antd' ...
angular.isUndefined()
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ang ...
五：Angular 数据绑定 (Data Binding)
通常来说,数据绑定要么是从页面流向组件中的数据,要么是从组件中的数据流向页面.下面我们来介绍在Angular 2中数据绑定的几种不同方式. 1. 使用{{}}将组件中的数据显示在html页面上实 ...
angular初步认识一
最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架不说那么多,先上例子,我是个代码控 <!DOCTYPE html> <html lang="en& ...
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素（@ViewChild只能获取静态的固定DOM节点）
故事背景:有一天,强哥整了个动态渲染的列表代码如下 app.component.html <div><button (click)="add()">添加一行 ...
Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法，强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情.所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住, ...
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办？
有一天,我写了一个自信满满的自定义组件myComponent,在多个页面import使用了,结果控制台给我来这个我特么裤子都脱了,你给我来这个提示是几个意思仔细一看 The Component ' ...
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
Angular的常用路由守卫有5种,按照执行顺序: ① CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载.这里是指对应组件的代码). ↓ ② CanAcitivat ...
浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...
【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能
app.component.html <app-sizer [(ngModel)]="fontSizePx"></app-sizer> <p [sty ...

Angular（一）

Angular（一）相关推荐

最新文章

热门文章