Angular4.x学习日志

码云链接:https://gitee.com/ccsoftlucifer/Angular4Study

1.部署环境

安装nodejs

安装angular脚手架程序

2.创建工程

ng new  项目名称 // 创建一个项目

　　add routing

　　　　yes

　　css

　　　　yes

npm install //安装依赖

ng serve --open //启动

注意:

如果ng serve --open启动失败，删除model文件夹，然后重新install.

如果没有在项目根目录运行 会出错。

3.目录分析

工程的目录那么多，重要的其实也就几个。

node_modules //安装的第三方模块

src //项目所有文件放在src里面

src/app //组件 以及 app.mdule.ts 定义根模块

src/index.html //首页

src/style.css //全局css样式文件

package.json //npm配置文件

这三个文件就组成了一个组件。

4.组件是什么东西呢?

写angular项目其实就是组件,以组件的形式方便引入.

创建一个组件:

比如我要在app/components文件夹下创建一个header的组件.

先在vscode中右键app目录,创建components文件夹.

然后到工程的根目录,使用命令

 ng g component components/header

注意:所有以spec.ts结尾的文件都可以删除.

这个文件是多余的,删除掉.创建完毕之后的目录结构如下:

这个时候可以直接在首页app.components.html中引入这个组件了.

这个时候项目会去找路由,路由中添加了新建的组件的路径,他就会自动找到.

而为什么是app-XXXX这个名字呢?

是因为在header.components.ts中,定义好了:

看吧是 'app-header'

5.在自定义的组件中编写代码

news.component.ts

 import { Component, OnInit } from '@angular/core';

 @Component({
   selector: 'app-news',
   templateUrl: './news.component.html',
   styleUrls: ['./news.component.css']
 })
 export class NewsComponent implements OnInit {

   // 定义数据 -- 属性
   title = 'title变量的值';
   // 定义属性的方法2
   msg: any;
   // 当然可以直接写类型
   msgStr: string = '这是string类型的msg';

   // 其实变量前面有访问修饰符,默认不写为public
   /*
     public 共有 可以在类的里外使用

     protected 保护类型 只能在当前类和他的子类访问

     private 私有只有当前类可以访问这个属性

   */
   public id = '=123';

   public h = '';

   public obj={

     name : '张三'
    }

   // 数据循环方式1
   public list=[];

   // 数据循环方式2
   public list2:any[];

   // 定义一个稍微复杂点的数组
   public list3:any[];

   //<!-- 对象循环 -->
   public list4=[];

   constructor() {
     this.msg='这是msg,通过constructor赋值';
     // 去服务器拉取数据
     this.h = '<h2>这个是新闻数据</h2>';
     this.list=['1','2','3'];
     this.list2=['java','php','dotnet'];
     this.list3=[
         {'title':'XXX和39位外方领导人围桌共绘"工笔画"'},
         {'title':'“一带一路”：如何绘制精谨细腻的“工笔画”'},
         {'title':'高峰论坛：刷新中国经济“信心指数” 理上网来'}

     ];
     this.list4=[
       {
         'username':'小a',
         "list":[
           {'course':'数学','source':100},
           {'course':'语文','source':99},
           {'course':'英语','source':80},
         ]
       },{
         'username':'小b',
         "list":[
           {'course':'数学','source':80},
           {'course':'语文','source':90},
           {'course':'英语','source':100},
         ]

       }

     ];
    }

   ngOnInit() {
   }

 }

news.component.html

 <app-header></app-header>
 <br>
 <h2>这是一个新闻组件</h2>

 <p>
   news works!
 </p>
 title = {{title}}
 <br>
 msg= {{msg}}
 <br>
 msgStr = {{msgStr}}
 <br>
 <!-- 绑定属性方法1 -->
 <div id="{{id}}">这是一个div 调试工具查看属性</div>
 <br>
 <!-- 绑定属性方法2 -->
 <div [title]="msg">使用方括号添加属性 调试工具查看属性</div>
 <br>
 <!-- 绑定后台HTML数据 -->
 <span [innerHTML]="h"></span>
 <br>
 <!-- 拿到对象数据 -->
 {{obj.name}}
 <br>
 <!-- 循环数据 -->
 <ul>
   <li *ngFor = "let item of list">   {{item}} </li>

 </ul>
 <!-- 获得索引值 -->
 <ul>
   <li *ngFor = "let item of list2 ; let key=index">
     {{key}}--{{item}}
   </li>
 </ul>
 <!-- 稍微复杂点的循环 -->
 <ul>
   <li *ngFor = "let item of list3 ; let key=index">
       {{key}} -- {{item.title}}
   </li>
 </ul>

 <!-- 复杂对象循环 -->
 <ul>
   <li *ngFor = "let item of list4 ;let key=index">
       {{key}} -- {{item.username}}
       <ol>
         <li *ngFor="let value of item.list">
             课程:{{value.course}} -- 成绩:{{value.source}}
         </li>
       </ol>
   </li>
 </ul>
 <br><br>
 <!-- 另外一种循环方式 -->
 <!-- <p>另外一种循环方式</p>
 <ul>
     <li template= "ngFor let item of list3 ; let key=index">
         {{key}} -- {{item.title}}
     </li>
 </ul> -->

6.事件绑定 双向绑定

想使用双向绑定,必须在app.module.ts中引入

import { FormsModule } from '@angular/forms';

并且在@ngModule中添加依赖

 @NgModule({
   declarations: [ // 自定义组件都需要引入,并且在里面配置
     AppComponent, HeaderComponent, NewsComponent, HomeComponent
   ],
   imports: [// 引入其他模块,当前项目依赖哪些模块
     BrowserModule,
     AppRoutingModule,
     FormsModule
   ],
   providers: [], // 定义的服务,放在里面
   bootstrap: [AppComponent]  //默认启动哪个组件
 })

测试代码:

home.component.ts

 import { Component, OnInit } from '@angular/core';

 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
   //定义成员变量
   public msg : any;
   public username:any;
   public flag:any;
   public count:any=0;
   public search:any='';
   constructor() {
     this.msg='msg:这是一个home页';
     this.username='thomas';
     this.flag=false;
     this.search='请输入值!';
   }

   //自定义方法1
   getMsg(){
     //获取属性的值
     alert(this.msg);

   }
   //自定义方法2
   setUsername() {
 // tslint:disable-next-line: triple-equals
     if(this.count %2==0){
         this.username='chen';
     }
     else
     {
       this.username='thomas';
     }
     this.count++;
     console.log(this.count);
   }
   setTrueFalse(){
       if(this.count%2==0)
         this.flag=true;
       else
         this.flag=false;
       this.count++;
       console.log(this.count);

   }

   keyupFunction(e){
     alert(e.key);

   }

   public str:any='';
   keyupSumFunction(e){
       this.str+=e.key;
      // alert(this.str);
   }
   ngOnInit() {
   }

 }

hoem.components.html

 <h2>{{msg}}</h2>
 <p>
   home works!
 </p>
 <br>
 <!-- // button执行函数 -->
 <button (click)='getMsg()'>执行自定义方法</button>
 <br><br>
 username:{{username}}
 <br>
 <button (click)='setUsername()'>改变姓和名</button>
 <br><br>
 <!-- 演示ngif语句 -->
 <button (click)='setTrueFalse()'>点击显示/隐藏</button>
 <br>
 <div *ngIf="flag">flag=true的情况下面显示</div>
 <br><br>
 显示每次按下的输入:
 <input type="test" (keyup)='keyupFunction($event)'>
 <br><br>
 <h2>这个是事件绑定:</h2>
 显示按下的字母的拼接:
 <input type="test" (keyup)='keyupSumFunction($event)'>
 {{str}}
 <br>
 <!-- 双向数据绑定 -->
 <h2>这个是双向绑定</h2>
 <input type='text' [(ngModel)]='search'/>
 {{search}}