Angular6

参考资料：Angular 修仙 https://semlinker.com/ng-quick-start/

入门级知识：https://www.jianshu.com/p/f0f81a63cbcb

1、创建一个新的项目：

    1）安装node.js https://nodejs.org/zh-cn/

    2)  安装cli npm install -g @angular/cli      检测是否安装成功：ng  --version

    3) ng new my-AngularApp

    4) cd my-AngularApp

    5) ng serve 

---

2、自定义组件

    1、使用Component 装饰器 定义组件元信息

        @Component({

            selector:'my-app',// 用于定义组件在HTML代码中匹配的标签

            template:`<h1>Hello {{name}}</h1>`,// 定义组件内嵌视图

            //template:` <sl-user></sl-user> `,

        })

     2、定义组件类

        export class userComponent{

            constructor(){}

        }

   3、定义数据接口

        interface Person {

            name:string;

            age:number;

            }

        let  semlinker: Person = {

           name:'semlinker',

            age:31

        };

---

3、模板变量   

https://www.jianshu.com/p/ad9d375bf76b

<input#phoneplaceholder="phone number">

上述的语法是如此的简洁：它创建了一个指向input元素的引用，这个引用稍后可以在我的模版中使用。需要注意的是，这个（引用）变量的作用域是它所定义的整个HTML模版（的范围）（即在定义这个引用变量的HTML模版中都可以访问这个变量）。

<!-- phone指向输入框元素 --><button(click)="callPhone(phone.value)">Call</button>

注意那个phone（变量）指向了input的HTMLElement对象实例。所以phone（变量）持有了（相应）HTMLElement（实例对象）的任何属性和方法，如id、name、innerHTML、value等。

---

4、路由模块：

1、在app.module.ts中导入路由模块

2、在路由模块中AppRoutingModule配置路由信息

expla

3、在组件内嵌视图中使用routerLink  和router-outlet 去链接2已配置的路由

routerLink 指令：为了让我们链接到已设置路由

import{ RouterModule }from'@angular/router';

---

5、模块结构