博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular2.0学习日记1
阅读量:5275 次
发布时间:2019-06-14

本文共 2625 字,大约阅读时间需要 8 分钟。

使用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 中导入  并添加到 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

你可能感兴趣的文章
(解决)mysql1366中文显示错误的终极解决方案
查看>>
使用enterTextInWebElement处理qq授权页报“网络异常,请稍后再试”的解决方法
查看>>
beta冲刺3
查看>>
Django中的缓存的配置与使用
查看>>
ASP.NET Core的配置(2):配置模型详解
查看>>
WPF获取某控件的位置,也就是偏移量
查看>>
浅析SQL Server数据库中的伪列以及伪列的含义
查看>>
背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox
查看>>
从零开始学Xamarin.Forms(四) Android 准备步骤(添加第三方Xamarin.Forms.Labs库)
查看>>
VSTO之旅系列(三):自定义Excel UI
查看>>
html5 canvas 实现一个简单的叮当猫头部
查看>>
深入理解C指针之四:指针和数组
查看>>
WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现...
查看>>
C#控制管理VisualSVN Server
查看>>
警惕使用WebClient.DownloadFile(string uri,string filePath)方法
查看>>
[UML]UML系列——状态机图statechart diagram
查看>>
WPF制作的一个小功能,智能提示(IntelliSense)
查看>>
关于私有变量,静态私有变量
查看>>
Zen Coding css,html缩写替换大观 快速写出html,css
查看>>
JSON
查看>>