简介

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

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

具体步骤

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

  • 新建目录结构
    angular2-quickstart
    1. |----app
    2. | |----app.component.js
    3. | |----boot.js
    4. |----index.html
    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. "name": "angular2-quickstart",
  3. "version": "1.0.0",
  4. "scripts": {
  5. "start": "npm run lite",
  6. "lite": "lite-server"
  7. },
  8. "license": "ISC",
  9. "dependencies": {
  10. "angular2": "2.0.0-beta.0",
  11. "systemjs": "0.19.6",
  12. "es6-promise": "^3.0.2",
  13. "es6-shim": "^0.33.3",
  14. "reflect-metadata": "0.1.2",
  15. "rxjs": "5.0.0-beta.0",
  16. "zone.js": "0.5.10"
  17. },
  18. "devDependencies": {
  19. "lite-server": "^1.3.1"
  20. }
  21. }

app.component.js

  1. (function (app) {
  2. app.AppComponent = ng.core
  3. .Component({
  4. selector: '.my-app',//简单的CSS选择器
  5. template: '<h1>My First Angular 2 App</h1>'
  6. })
  7. .Class({
  8. constructor: function () {
  9. }
  10. });
  11. })(window.app || (window.app = {}));

boot.js

  1. (function (app) {
  2. document.addEventListener('DOMContentLoaded', function () {
  3. ng.platform.browser.bootstrap(app.AppComponent);
  4. });
  5. })(window.app || (window.app = {}));

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Angular 2 QuickStart</title>
  5. <!-- 1. Load libraries -->
  6. <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
  7. <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
  8. <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
  9. <!-- 2. Load our 'modules' -->
  10. <script src='app/app.component.js'></script>
  11. <script src='app/boot.js'></script>
  12. </head>
  13. <!-- 3. Display the application -->
  14. <body>
  15. <div class="my-app">Loading...</div>
  16. </body>
  17. </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. Tomcat 安装错误

    安装tomcat时,遇到"failed to install tomcat6 service check your settings and permissions"的问题 安装时 ...

  2. springmvc的异常统一处理

    在项目实际开发中,异常的统一处理是一个常态.假如不使用异常统一处理,我们往往需要在service层中捕获异常,并且根据不同的异常在result中的设置不同的code并给予相应的提示.这样可能会导致不同 ...

  3. Linux __setup解析【转】

    本文转载自:http://blog.csdn.net/fdaopeng/article/details/7895037 __setup这条宏在Linux Kernel中使用最多的地方就是定义处理Ker ...

  4. YTU 2903: A--A Repeating Characters

    2903: A--A Repeating Characters 时间限制: 1 Sec  内存限制: 128 MB 提交: 50  解决: 30 题目描述 For this problem,you w ...

  5. ACTION中获得数据的几种方式

    1.第一种是通过公司封装的方法. 2.第二种:是通过IF方法判断 3.第三种是通过:set/get获得

  6. Python基础第九天

    一.内容

  7. Swift4 扩张(Extenstion), 集合(Set)

    创建: 2018/03/09 完成: 2018/03/10 更新: 2018/04/19 修改小标题  [扩张的定义与使用协议] -> [通过扩张来采用协议] 更新: 2018/09/18 标题 ...

  8. Ruby  Numeric类

    Numeric类   Numeric ---------> Integer ---------> Fixnum                                       ...

  9. HDU1254:推箱子(bfs+dfs)

    传送门 题意 给出一副图 0.空地1.墙2.箱子3.目的地4.人所在的位置 问最少几步能将箱子推到目的地 分析 这道题难度略大(菜鸡),首先用vis[bx][by][mx][my]记录当箱子(bx,b ...

  10. Keras 文档阅读笔记(不定期更新)

    目录 Keras 文档阅读笔记(不定期更新) 模型 Sequential 模型方法 Model 类(函数式 API) 方法 层 关于 Keras 网络层 核心层 卷积层 池化层 循环层 融合层 高级激 ...