ng2相关内容

简介: 1.首先安装node.js(http://nodejs.org/download); 2.安装typeScript(js Es6版的一个超集,增加了类支持); $ npm install -g typescript 3.

一。安装脚手架
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

  1. 创建完比就可以运行,命令是
    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样式
六 加载组件
我们需要把组件的标签添加到一个将要渲染的模板当中去
七:将数据添加到组件中去

相关文章
|
API 容器
ng中的ng-content ng-template ng-container
ng中的ng-content ng-template ng-container
120 0
|
前端开发 JavaScript 对象存储
ng-animate和ng-cookies用法
———ng-animate 本文讲一下Angular中动画应用的部分。 首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画样式,所以说,它的自由度和可定制性挺大的。
1481 0