利用VS Code开发你的第一个AngularJS 2应用程序


Posted in Javascript onDecember 15, 2017

前言

之前已经给大家介绍了Angular2开发环境搭建教程之VS Code,本文将详细介绍利用VS Code如何开发AngularJS2应用程序的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

运行环境:

1、Windows 10

2、Node 6.7.0

利用VS Code开发你的第一个AngularJS 2应用程序

3、npm 3.10.8

利用VS Code开发你的第一个AngularJS 2应用程序

4、TypeScript 2.0.3

利用VS Code开发你的第一个AngularJS 2应用程序

创建项目

1、创建文件夹:angular2-quickstart,启动VS Code,打开刚创建的文件夹:angular2-quickstart。

2、在根文件夹(angular2-quickstart)下,创建package.json文件:

{
 "name": "angular-quickstart",
 "version": "1.0.0",
 "scripts": {
 "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
 "lite": "lite-server",
 "postinstall": "typings install",
 "tsc": "tsc",
 "tsc:w": "tsc -w",
 "typings": "typings"
 },
 "license": "ISC",
 "dependencies": {
 "@angular/common": "~2.0.2",
 "@angular/compiler": "~2.0.2",
 "@angular/core": "~2.0.2",
 "@angular/forms": "~2.0.2",
 "@angular/http": "~2.0.2",
 "@angular/platform-browser": "~2.0.2",
 "@angular/platform-browser-dynamic": "~2.0.2",
 "@angular/router": "~3.0.2",
 "@angular/upgrade": "~2.0.2",
 "angular-in-memory-web-api": "~0.1.5",
 "bootstrap": "^3.3.7",
 "core-js": "^2.4.1",
 "reflect-metadata": "^0.1.8",
 "rxjs": "5.0.0-beta.12",
 "systemjs": "0.19.39",
 "zone.js": "^0.6.25"
 },
 "devDependencies": {
 "concurrently": "^3.1.0",
 "lite-server": "^2.2.2",
 "typescript": "^2.0.3",
 "typings": "^1.4.0"
 }
}

3、在根文件夹(angular2-quickstart)下,创建tsconfig.json文件:

{
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "moduleResolution": "node",
 "sourceMap": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "removeComments": false,
 "noImplicitAny": false
 }
}

4、在根文件夹(angular2-quickstart)下,创建typings.json文件:

{
 "globalDependencies": {
 "core-js": "registry:dt/core-js#0.0.0+20160725163759",
 "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
 "node": "registry:dt/node#6.0.0+20160909174046"
 }
}

5、在根文件夹(angular2-quickstart)下,创建systemjs.config.js(JavaScript脚本)文件:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
 System.config({
 paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
 },
 // map tells the System loader where to look for things
 map: {
  // our app is within the app folder
  app: 'app',
  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  // other libraries
  'rxjs': 'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
 },
 // packages tells the System loader how to load when no filename and/or no extension
 packages: {
  app: {
  main: './main.js',
  defaultExtension: 'js'
  },
  rxjs: {
  defaultExtension: 'js'
  },
  'angular-in-memory-web-api': {
  main: './index.js',
  defaultExtension: 'js'
  }
 }
 });
})(this);

文件结构:

|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules ...
|_ typings ...
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json

安装依赖包(最关键一步

使用 npm 命令来安装 package.json 中列出的依赖包。在命令行 cmd 窗口,输入:cd angular2-quickstart,进入angular2-quickstar文件夹下,输入下列命令:

npm install

利用VS Code开发你的第一个AngularJS 2应用程序

创建TypeScript应用程序

1、在VS Code中,在根文件夹(angular2-quickstart)下,创建app子文件夹。

2、在子app文件夹下,创建TypeScript文件app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
 imports: [ BrowserModule ],
 declarations: [ AppComponent ],
 bootstrap: [ AppComponent ]
})
export class AppModule { }

3、在子app文件夹下,创建TypeScript文件app.component.ts:

import { Component } from '@angular/core';
@Component({
 selector: 'my-app',
 template: '<h1>我的第一个 AngularJS 2 应用程序</h1>'
})
export class AppComponent { }

4、在子app文件夹下,创建TypeScript文件main.ts:

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

5、在根文件夹(angular2-quickstart)下,创建html文件index.html:

<html>
<head>
 <title>Angular QuickStart</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="styles.css">
 <!-- 1. Load libraries -->
 <!-- Polyfill(s) for older browsers -->
 <script src="node_modules/core-js/client/shim.min.js"></script>
 <script src="node_modules/zone.js/dist/zone.js"></script>
 <script src="node_modules/reflect-metadata/Reflect.js"></script>
 <script src="node_modules/systemjs/dist/system.src.js"></script>
 <!-- 2. Configure SystemJS -->
 <script src="systemjs.config.js"></script>
 <script>
  System.import('app').catch(function(err) {
   console.error(err);
  });
 </script>
</head>
<!-- 3. Display the application -->
<body>
 <my-app>Loading...</my-app>
</body>
</html>

6、在根文件夹(angular2-quickstart)下,创建css文件styles.css:

/* Master Styles */
h1 {
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 250%;
}
h2,
h3 {
 color: #444;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: lighter;
}
body {
 margin: 2em;
}

配置应用程序

1、在VS Code中,在根文件夹(angular2-quickstart)下,创建.vscode子文件夹。

2、在.vscode子文件夹下,创建settings.json文件:

// 将设置放入此文件中以覆盖默认值和用户设置。
{
 "typescript.tsdk": "node_modules/typescript/lib",
 // ts 项目, 隐藏 .js 和 .js.map 文件
 "files.exclude": {
  "node_modules": true,
  "**/*.js": { "when": "$(basename).ts" },
  "**/*.js.map": true
 }
}

3、在.vscode子文件夹下,创建tasks.json文件:

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "0.1.0",
 "command": "cmd",
 "isShellCommand": true,
 "showOutput": "always",
 "args": ["/C npm start"]
}

运行应用程序至此,配置完毕,按 Ctrl + Shift + B 编译,程序将会将Typescript编译成 Javascript ,同时启动一个 lite-server, 加载我们编写的index.html。 显示:我的第一个 Angular 2 应用程序

利用VS Code开发你的第一个AngularJS 2应用程序

利用VS Code开发你的第一个AngularJS 2应用程序

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

参考资料:

  • 快速起步
  • 打造AngularJs2.0开发环境
  • AngularJs 2 快速入门
  • AngularJS2.0起步
Javascript 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
jquery仿微信聊天界面
May 06 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
vue数字类型过滤器的示例代码
Sep 07 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
js实现打字小游戏
Dec 17 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 #Javascript
JavaScript原生实现观察者模式的示例
Dec 15 #Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 #Javascript
ReactNative中使用Redux架构总结
Dec 15 #Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 #Javascript
vue实现验证码输入框组件
Dec 14 #Javascript
基于滚动条位置判断的简单实例
Dec 14 #Javascript
You might like
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
ext jquery 简单比较
2010/04/07 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
Vue异步组件使用详解
2017/04/08 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
vuex的使用步骤
2021/01/06 Vue.js
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
python实现的简单抽奖系统实例
2015/05/22 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
pytorch构建多模型实例
2020/01/15 Python
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
小学毕业寄语大全
2014/04/03 职场文书
家长通知书家长评语
2014/04/17 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
体育比赛口号
2014/06/09 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
Go语言编译原理之源码调试
2022/08/05 Golang