使用NG2之前需要安装node以及Npm环境,并到node下下载ng2所需要得文件,具体配置请到https://angular.cn/docs/ts/latest/quickstart.html按照提示操作,安装完毕并创建后各种目录后,正式开始编写第一个HelloWordl;

ng2是基于typescript,文件以ts结尾代表typesript文件,启动Npm start后,node会监视目录下的文件变得将ts编译为js文件

首先创建根模块文件app/app.module.ts, 每个Angular2的应用都至少有一个模块即跟模块。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
imports: [ BrowserModule ]
})
export class AppModule { }

//import2行表示从目录中引入我们所需得文件,import是ES6关键字,经过编译后会被转化为ES5的require,形式如下:

//var core = require('@angular/core');

//var bsmodule = require('@angular/platform-browser');

//@NgModule:意思为告诉Angular如何去编译和运行代码。模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们;

NgModule的主要属性如下:北京联盟 http://www.010lm.com/

  • declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员
  • providers:指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)
  • imports:导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。
  • exports:用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。
  • bootstrap:通常是app启动的根组件,一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
  • entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性

项目是运行在浏览器中的 Web 应用,所以根模块需要从 @angular/platform-browser 中导入 BrowserModule 并添加到 imports 数组中;

//export 也是es6的关键字,表示导出,以使得其他组件或者模块可以导入(import);

接着创建根组件app/app.component.ts

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

@Component({
selector: 'my-app',
template: '<h1>hello wordl</h1>'
})

export class AppComponent { }

//@Component表示将一份数据关联到导出的AppComponent,虽然此处AppComponent导出内容为空,但实际上@Component中的内容由于与之关联,因此里面的selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'实际上也一起导出,可供外部使用了;

//selector: 'my-app'  指my-app标签,即<my-app></my-app>;

select还可以使用属性以及类,如selector:".example"或者selector:"[ example ]",代表类名为或者属性为example的标签;

//template:要渲染的模板,如<h1>12345</h1>则表示将上面对应的seletor的innerhtml渲染为<h1>12345</h1>,

temlpate为联写法,还可以写为外部引入写法:templateUrl:"../index.html", 这样写需要先定义好一个html文件,其内容为<h1>12345</h1>,并引入;

组件写好后,需要在根模块下将写好的组件引入,在app/app.module.ts下import { AppComponent } from './app.component';
并修改:
@NgModule({imports: [ BrowserModule ]

            ,declarations: [ AppComponent ],

             bootstrap: [ AppComponent ]

            }

          )

最后添加新文件main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

至此就可以启动应用了,在npm下输入npm start等待几秒即可

转载于:https://www.cnblogs.com/zhengrunlin/p/5901019.html

angular2.0学习日记1相关推荐

  1. wisp5.0 学习日记2

    学习日记 昨天的报错 尝试1,在CCS中设置USB FET 尝试2 csdn解决方案1 尝试3 查看仿真器的驱动是否安装成功 昨天的报错 MSP430: Error initializing emul ...

  2. java的圆周率_java学习日记,圆周率的打印

    前段时间看到听说学习java每天写技术贴会对自己提升很大,我现在学习java也就2个周,算不上技术贴,就写写学习日记吧. 昨天师傅给我出了一道题,说是试试用java打印圆周率. 刚开始我的思路是,如果 ...

  3. GPU(CUDA)学习日记(十三)------ CUDA内存简介

    GPU(CUDA)学习日记(十三)------ CUDA内存简介 标签: cuda存储线程结构 2012-12-07 16:53 2902人阅读 评论(0)收藏 举报 分类: GPU(16) CUDA ...

  4. GPU(CUDA)学习日记(九)------ CUDA存储器模型

    GPU(CUDA)学习日记(九)------ CUDA存储器模型 标签: cuda存储bindingcache编程api 2012-09-27 10:53 1677人阅读 评论(1) 收藏 举报 分类 ...

  5. Angular2.0快速开始

    目前Angular2.0开发者预览版已经发布,和Angular1.x相比,发生了很多颠覆性的变化,随后Angular2团队在官网上给出了一个5分钟快速开始的教程,用于编写一个hello world级别 ...

  6. 语言余一个负数_C语言学习日记(8)——整数溢出

    小时候喜欢玩电子计算器,觉得很神奇,想要算什么数,立刻就能算出来.当时看着计算器的液晶屏幕就想,如果算一个很大的数,超过了屏幕上面数字的位数,会怎么样呢?试了以后结果是INF,那就是无穷大了.虽然当时 ...

  7. SpringMVC学习日记 1.Spring框架

    SpringMVC学习日记 1.Spring框架 Spring简介 Spring框架是一个开源框架,由Rod Johnson组织和开发,生产目的在于简化企业级应用的开发. 主要特性 非侵入(no-in ...

  8. 十五的学习日记20160926-你不知道的JS笔记/

    十五的学习日记20160926 JavaScript 一个用于检测正负值的函数,可以用它辨别-0值. 我觉得挺好用,以后可以写到自己的工具库里. //函数:检查传入参数是否为正数.Number=> ...

  9. 十五的学习日记20160925

    十五的学习日记20160925 CSS 学过盒子布局的人都知道,元素之间的上下margin会合并,保留数值较大的margin作为渲染依据. 但是今天在群里讨论发现: img元素和p元素的上下margi ...

最新文章

  1. css字体居中_简单介绍CSS.
  2. 关于编写性能高效的javascript事件的技术
  3. RabbitMQ实现工作队列
  4. 硬核分析|腾讯云原生OS内存回收导致关键业务抖动问题
  5. py文件转exe时包含paramiko模块出错解决方法
  6. python精通时间_学Python需要多久能学会?精通Python需要多长时间?
  7. 【C#桌面应用】第二节:利用Visual Studio2019 创建桌面应用
  8. 数据库学习之MySQL安装
  9. 机器学习-吴恩达-笔记-7-机器学习系统的设计
  10. html中ajax检测用户名实例,利用Ajax检测用户名是否被占用的完整实例
  11. MongoDB 凉了?
  12. Matlab 除法取整
  13. Python数据分析(9)-numpy文件读写
  14. 计算机数值数据编码(原码,反码,补码,移码)
  15. 4、ESP8266 ADC脚读取模拟信号
  16. 计算机最快接口速度,实测:USB3.1究竟比USB3.0接口快多少?
  17. 常用的人脸检测识别等数据集百度云下载
  18. linux使用make命令编译错误,有关linux的make文件编译问题
  19. 详解Https出现的前因后果
  20. steam在matlab是什么,什么是STEAM,和STEM有何区别?

热门文章

  1. OpenSSL X509 Certificate反序列化漏洞(CVE-2015-3825)成因分析
  2. android6.0源码分析之Camera2 HAL分析
  3. 如何在Eclipse和Android Studio中导入library project
  4. python中list的反转_Python实现list反转实例汇总
  5. MATLAB 线型 颜色 和 标记点组合使用
  6. hdu5386(暴力)
  7. BZOJ 4042 Luogu P4757 [CERC2014]Parades (树形DP、状压DP)
  8. xadsafe做暗刷_手把手教你如何去掉网吧广告之网维大师_XADSAFE
  9. 倒数日怎么设置起始日_起始价131亿!杭州江河汇流区85万方综合体招标延期
  10. linux查看某端口进程占用,Linux下查看某端口占用进程