一。安装脚手架
1.首先安装node.js(http://nodejs.org/download);
2.安装typeScript(js Es6版的一个超集,增加了类支持);
$ npm install -g typescript
3.安装angular-cli
npm install -g @angular/cli
4.创建新项目
ng new **(项目名自取)
如果成功命令行会显示
installed packages for tooling via npm
- 创建完比就可以运行,命令是
ng serve
默认端口为localhost:4200
三:Component
angular 背后的指导思想之一就是组件化
组件化背后的基本思想:我们要交浏览器认识一些拥有自定义功能的新标签
创建新的组件 命令:ng generate component **(组件名自取)
最基本的组件包括两部分:
(1):Componet 注解
(2):组件定义类
四。注入依赖
如
import { Component, OnInit ,Input} from '@angular/core';
import 语句定了我们写代码是用了哪些块
语句结构为:
import {things} from where
其中{things}这部分写法我们叫做解构
'@angular/core';部分告诉程序在哪里找到依赖
五:Component注解
导入依赖后我们还要声明该组件
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
我们可以把注解看作添加到代码上的元组件
当在一个类上使用@Component的时候,就要把类装饰成一个Component
selector 属性用来指出该组件将使用哪个Dom元素
templateUrl:指定从哪加载模板
tempate:用··直接加载模板
styleUrls:添加css样式
六 加载组件
我们需要把组件的标签添加到一个将要渲染的模板当中去
七:将数据添加到组件中去