简介

5 分钟从0搭建一个ng2项目demo
https://angular.io/docs/js/latest/quickstart.html

你运气真好，竟然看到了这篇文章，你省事了，一分钟让你完成，请点击https://github.com/1329555958/angular2-quickstart

具体步骤

假定你已经具备了nodejs环境；

  • 新建目录结构
    angular2-quickstart 
    1.   |----app
      2. 

    2.   |    |----app.component.js
      3. 

    3.   |    |----boot.js
      4. 

    4.   |----index.html
      5. 

    5.   |----package.json
  • 修改package.json(npm 相关，如果看不懂这里面的内容请关注nodejs)
  • 安装依赖
    npm install 在package.json同级目录下执行（我假装你不知道在哪里执行）
    执行的时候可能有红色字体的警告，无视它们，最后会成功的
  • 修改app.component.js
  • 修改boot.js
  • 修改index.html

此时你发现你的目录多出了node_modules及下面一些目录；
运行npm start，你的默认浏览器会打开一个页面，http://localhost:3000 ,如果没有，可以联系我；

恭喜你！你很棒，累了吧，休息会，稍后我们再细聊具体细节!

代码清单

package.json

  1. {
    2. 

  2.   "name": "angular2-quickstart",
    3. 

  3.   "version": "1.0.0",
    4. 

  4.   "scripts": {
    5. 

  5.     "start": "npm run lite",
    6. 

  6.     "lite": "lite-server"
    7. 

  7.   },
    8. 

  8.   "license": "ISC",
    9. 

  9.   "dependencies": {
    10. 

  10.     "angular2": "2.0.0-beta.0",
    11. 

  11.     "systemjs": "0.19.6",
    12. 

  12.     "es6-promise": "^3.0.2",
    13. 

  13.     "es6-shim": "^0.33.3",
    14. 

  14.     "reflect-metadata": "0.1.2",
    15. 

  15.     "rxjs": "5.0.0-beta.0",
    16. 

  16.     "zone.js": "0.5.10"
    17. 

  17.   },
    18. 

  18.   "devDependencies": {
    19. 

  19.     "lite-server": "^1.3.1"
    20. 

  20.   }
    21. 

  21. }

app.component.js

  1. (function (app) {
    2. 

  2.     app.AppComponent = ng.core
    3. 

  3.         .Component({
    4. 

  4.             selector: '.my-app',//简单的CSS选择器
    5. 

  5.             template: '<h1>My First Angular 2 App</h1>'
    6. 

  6.         })
    7. 

  7.         .Class({
    8. 

  8.             constructor: function () {
    9. 

  9.             }
    10. 

  10.         });
    11. 

  11. })(window.app || (window.app = {}));

boot.js

  1. (function (app) {
    2. 

  2.     document.addEventListener('DOMContentLoaded', function () {
    3. 

  3.         ng.platform.browser.bootstrap(app.AppComponent);
    4. 

  4.     });
    5. 

  5. })(window.app || (window.app = {}));

index.html

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <title>Angular 2 QuickStart</title>
    5. 

    6. 

  6.     <!-- 1. Load libraries -->
    7. 

  7.     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    8. 

  8.     <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    9. 

  9.     <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
    10. 

    11. 

  11.     <!-- 2. Load our 'modules' -->
    12. 

  12.     <script src='app/app.component.js'></script>
    13. 

  13.     <script src='app/boot.js'></script>
    14. 

    15. 

  15. </head>
    16. 

    17. 

  17. <!-- 3. Display the application -->
    18. 

  18. <body>
    19. 

  19. <div class="my-app">Loading...</div>
    20. 

  20. </body>
    21. 

    22. 

  22. </html>

angular2快速开始的更多相关文章

  1. Angular2快速入门-3.多个组件（分离新闻列表页和详细页）

    上篇(Angular2快速入门-2.创建一个新闻列表)已经完成新闻列表的展示,并且点击新闻列表的时候,下面可以展示出新闻的详细信息,这节我们把新闻详细和新闻列表页面分离出来 新闻详细单独一个compo ...

  2. Angular2快速起步——构建一个简单的应用

    构建此应用,分为如下几步: 1.环境准备:安装Node.js和npm: 2.创建并配置此项目: 3.创建应用: 4.创建组件并添加到应用程序中: 5.启动应用程序: 6.定义作为该应用的宿主页面: 7 ...

  3. Angular2快速入门-5.使用http（新闻数据来自http请求）

    Angular2官网通过http请求模拟API 来请求hero 数据,感觉有点繁琐,很让人理解不了,我们不采用它的办法,直接展示怎么使用http请求来获取我们的数据 ,直截了当. 第一.准备工作,创建 ...

  4. Angular2快速入门-4.创建一个服务（创建NewsService提供数据）

    上篇我们使用的数据是通过mock-news.ts中的const News[] 数组直接赋给Component 组件的,这篇我们把提供数据的部分单独封装成服务 第一.创建news.service.ts ...

  5. Angular2快速入门-2.创建一个新闻列表

    背景: 我们想通过一个例子,展示下Angular2 怎么绑定页面,怎么创建Component, 例子:我们创建一个新闻列表,当点击新闻列表中某一条新闻的时候,展示出该条新闻的详细信息, 在详细信息中可 ...

  6. Angular2快速入门-1.创建第一个app

    一.环境搭建 Angular2 运行在nodejs 环境下,需要我们先创建好nodejs环境,具体操作   1.下载安装Nodejs,参考网址,https://nodejs.org/en/ 选择64位 ...

  7. Angular2入坑指南

    序 对后端开发来说,前端是神秘的,眼花缭乱的技术,繁多的框架,出名的不出名的好几百种,看是"繁荣",其实显得杂乱无章,但是我们在做开发的时候,技术选型还是主流的那么几个:浅析ang ...

  8. ASP.NET MVC和Web API中的Angular2 - 第1部分

    下载源码 - 903.5 KB 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索 ...

  9. angular2新建的项目上传github

    前提1.git配置好,参见博文 git常用操作 2.angular2安装配置好,这个网上有很多教程,就不多说了,参见angular2快速起步 需要注意的是,大部分问题都是网络问题. 3.新建一个ng项 ...

随机推荐

  1. Ubuntu grub2的启动配置文件grub.cfg，为了修改另人生厌的时间

    文章转自http://hi.baidu.com/detax/blog/item/90f18b54a8ef5253d00906e4.html 升级到Ubuntu 9.10后,就要接触grub2了,它和以 ...

  2. Spring Boot Spring 自动配置

    Spring Boot 不是应用服务器: Spring Boot没有实现诸如JPA.JMS(Java Message Service)之类的Java企业级规范: Spring Boot没有引入任何形式 ...

  3. /tmp/crontab.tDoyrp: 设备上没有空间 查看文件夹所在分区 磁盘剩余空间 15g的root-mail大文件

    问题诊断: 文件夹所在磁盘已满 问题确认: 查看文件夹所在磁盘剩余空间,找出空间被消耗的文件(集) 查看文件夹所在磁盘空间的所属文件(暂未解决) [root@hadoop1 /]# df -Bg /t ...

  4. Strus2中关于ValueStack详解

    什么是ValueStack 它是一个接口com.opensymphony.xwork2.util.ValueStack.我们使用它是将其做为一个容器,用于携带action数据到页面.在页面上通过ogn ...

  5. Android Studio集成Genymotion 及Genymotion 配置ADB

    1.打开 Android Studio,依次[File]-[Settings],快捷键  Ctrl + Alt + S 2.在打开的 settings 界面里找到 plugins 设置项,点击右侧的“ ...

  6. YTU 2838: 改错题AB-装置连接

    2838: 改错题AB-装置连接 时间限制: 1 Sec  内存限制: 128 MB 提交: 81  解决: 49 题目描述 注:本题只需要提交标记为修改部分之间的代码,请按照C++方式提交. 有AB ...

  7. 【HAOI 2006】 受欢迎的牛

    [题目链接] 点击打开链接 [算法] 先用tarjan缩点,然后找出度为零的点,即可 [代码] #include<bits/stdc++.h> using namespace std; # ...

  8. snnu1111(子序列求和)

    1111: 子序列求和 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 10  Solved: 2[Submit][Status][Web Board] [ ...

  9. bzoj 3566: [SHOI2014]概率充电器【树形概率dp】

    设g[u]为这个点被儿子和自己充上电的概率,f[u]为被儿子.父亲和自己充上电的概率 然后根据贝叶斯公式(好像是叫这个),1.P(A+B)=P(A)+P(B)-P(A)*P(B),2.P(A)=(P( ...

  10. jsp标准标签库——jstl

    JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. 除了这些,它还提供 ...