随笔分类 -  angularcli

angular官网实例（综合）
摘要：第一部分： （应用的“外壳”） 1、新建项目： ng new mytest 2、进入项目目录，并启动这个应用。 cd mytest ng serve --open 3、添加一个标题 打开 app.component.ts title = 'Tour of Heroes'; 打开 app.compon 阅读全文
posted @ 2018-09-04 14:46 撑死的喵~ 阅读(4249) 评论(0) 推荐(1)
angularcli 第八篇（router 路由）
摘要：更多详细：https://segmentfault.com/a/1190000009265310 一、标题：页面有两个按钮（test1、test2），点击这两个按钮，跳转相应页面~ 注：可直接创建一个带路由模块的项目：ng new project --routing （下面针对新建项目时没有带路由， 阅读全文
posted @ 2018-09-03 18:26 撑死的喵~ 阅读(2816) 评论(0) 推荐(0)
angularcli 第七篇（service 服务）
摘要：在组件中定义的信息是固定的，假设另外一个组件也需要用到这些信息，这时候就用到服务，实现 共享数据 和 方法 组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。 Service 可以从任何地方获取数据：Web 服务、本地存储（Lo 阅读全文
posted @ 2018-08-04 20:52 撑死的喵~ 阅读(3674) 评论(0) 推荐(0)
angularcli 第六篇（todolist 列表）
摘要：1、通过文本框输入，向数组添加数据 2、删除数组的数据 3、按下键盘回车“Enter”向数组添加数据 具体参照angularcli第四篇（执行事件） 实现的功能：在input框中输入数据，前面是通过按下按钮数据添加到数组中，现在要改成按下回车键： 步骤： （1）给input增加鼠标监听事件： 通过k 阅读全文
posted @ 2018-08-03 15:21 撑死的喵~ 阅读(981) 评论(0) 推荐(0)
angularcli 第五篇（输入框、表单处理）
摘要：本文参考：Angular4 表单快速入门 注：涉及input表单时要在AppComponent中引入 FormsModule模块: import{ FormsModule } from '@angular/forms'; @NgModule({ imports: [BrowserModule, Fo 阅读全文
posted @ 2018-08-02 16:11 撑死的喵~ 阅读(3124) 评论(0) 推荐(0)
angularcli 第四篇（执行事件）
摘要：目录： 1.按下按钮执行事件 2、按下键盘回车“Enter”执行事件 1、按下按钮执行事件：<button (click) = 'setName()'>......</button> 界面： 2、按下键盘回车“Enter”执行事件 我们一般页面都是通过按下 button 按钮来触发事件，这次来学习通 阅读全文
posted @ 2018-08-02 14:39 撑死的喵~ 阅读(477) 评论(0) 推荐(0)
angularcli 第三篇（数据循环*ngFor、条件判断*ngIf）
摘要：1、数据循环 *ngFor （1）普通循环 （2）遍历数组同时获取索引值key （3）template 循环 例：对象内部嵌套数字，多重循环 public list:any[]; constructor() { this.list4=[ { 'catename':"宝马", "list":[ {'t 阅读全文
posted @ 2018-08-02 10:53 撑死的喵~ 阅读(1241) 评论(0) 推荐(0)
angularcli 第二篇（数据绑定、属性申明、绑定属性）
摘要：1、数据绑定 插值绑定： <li>{{ hero.name }} </li> 或 <div class = "{{ demo }}" >...</div> 绑定HTML： <div [innerHTML] = "...." > </div> 属性绑定： <input [value] = "myDat 阅读全文
posted @ 2018-08-02 10:52 撑死的喵~ 阅读(503) 评论(0) 推荐(0)
angularcli 第一篇（新建、组件、模块）
摘要：1、新建并启动项目： 2、新建组件： 注： 只需要记得在 app.component.html 中加入 <app-header></app-header> 就可以看到header.component.html中编辑的内容。访问 http://localhost:4200/ 将会看到。 3、组件和模块 阅读全文
posted @ 2018-08-02 10:50 撑死的喵~ 阅读(5196) 评论(0) 推荐(0)