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样式
六 加载组件
我们需要把组件的标签添加到一个将要渲染的模板当中去
七:将数据添加到组件中去

相关文章
|
4月前
|
网络协议 虚拟化
EVE-NG安装怎么操作?
Eve-NG是一种网络模拟工具,它可以在虚拟网络环境中测试和验证网络设备和网络安全性。以下是关于Eve-ng安装的步骤和注意事项。 首先,要准备安装Eve-ng,你需要在电脑上安装好虚拟机,虚拟机的安装请自行去网上搜索,小编安装的是VMware Station 17。 接下来,需要准备的安装包。目前网上可以找到的有Pro专业版和Community社区版两个版本。 Eve-ng的专业版本,是收费的,社区版是开源免费的,有着更高可靠性和性能,例如每个实验支持1024个节点数量,而社区版仅有63个,在TCP端口的支持上,专业版支持从1-65000,社区版仅128个,同时专业版还有其他优势
|
API 容器
ng中的ng-content ng-template ng-container
ng中的ng-content ng-template ng-container
94 0
|
JavaScript 前端开发 测试技术
一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别
一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别
126 0
一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别
SAP Spartacus 里 ng-template和ng-container的嵌套使用
SAP Spartacus 里 ng-template和ng-container的嵌套使用
SAP Spartacus 里 ng-template和ng-container的嵌套使用
|
开发工具 git
输入 ng build 或者 ng serve 之后没有任何输出的问题分析
输入 ng build 或者 ng serve 之后没有任何输出的问题分析
177 0
输入 ng build 或者 ng serve 之后没有任何输出的问题分析
ng-content和@ContentChild的配合用法
ng-content和@ContentChild的配合用法
166 0
ng-content和@ContentChild的配合用法
ng-controller and ng-model的工作原理
ng-controller and ng-model的工作原理
ng-controller and ng-model的工作原理
|
SQL 开发框架 .NET
ng-template 和 TemplateRef.createEmbeddedView
ng-template 和 TemplateRef.createEmbeddedView
113 0
ng-template 和 TemplateRef.createEmbeddedView
|
前端开发 JavaScript 对象存储
ng-animate和ng-cookies用法
———ng-animate 本文讲一下Angular中动画应用的部分。 首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画样式,所以说,它的自由度和可定制性挺大的。
1457 0