Angular2 是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行。

Angular2 是 Angular 1.x 的升级版本，性能上得到显著的提高，能很好的支持 Web 开发组件。

Angular2 发布于2016年9月份，它是基于ES6来开发的。

上手一个新的框架，了解的最开始的东西，都是最浅显的。

我的第一个应用如下



查看项目目录



实现项目过程如下

$ mkdir angular-quickstart

$ cd angular-quickstart

创建 package.json 文件

package.json

{

  "name": "angular2-quickstart",

  "version": "1.0.0",

  "scripts": {

    "start": "npm run lite",

    "lite": "lite-server"

  },

  "license": "ISC",

  "dependencies": {

    "@angular/common": "2.0.0",

    "@angular/compiler": "2.0.0",

    "@angular/core": "2.0.0",

    "@angular/forms": "2.0.0",

    "@angular/http": "2.0.0",

    "@angular/platform-browser": "2.0.0",

    "@angular/platform-browser-dynamic": "2.0.0",

    "@angular/router": "3.0.0",

    "@angular/upgrade": "2.0.0",

    "core-js": "^2.4.1",

    "reflect-metadata": "^0.1.3",

    "rxjs": "5.0.0-beta.12",

    "zone.js": "^0.6.23",

    "angular2-in-memory-web-api": "0.0.20",

    "bootstrap": "^3.3.6"

  },

  "devDependencies": {

    "concurrently": "^2.0.0",

    "lite-server": "^2.2.0"

  }

}

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ cnpm install

$ mkdir app

$ cd app

app.component.js

(function(app){

    app.AppComponent=

        ng.core.Component({

            selector:'my-app',

            template:'<h1>我的第一个Angular应用</h1>'

        })

        .Class({

            constructor:function(){}

        })

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

Angular应用都是模块化的，ES5没有内置的模块化系统，可以使用第三方模块系统，然后我们为应用创建独立的命名空间 app，

文件代码可以包裹在 IIFE（立即执行函数表达式）中：

(function(app) {

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


app.module.js

(function(app) {

    app.AppModule =

      ng.core.NgModule({

        imports: [ ng.platformBrowser.BrowserModule ],

        declarations: [ app.AppComponent ],

        bootstrap: [ app.AppComponent ]

      })

      .Class({

        constructor: function() {}

      });

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


main.js

(function(app){

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

    ng.platformBrowserDynamic

      .platformBrowserDynamic()

      .bootstrapModule(app.AppModule);

    });

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

我们需要两样东西来启动应用：

Angular 的 platformBrowserDynamic().bootstrapModule 函数。

上文中提到的应用根模块 AppModule。

接下来创建 index.html，代码如下所示：

index.html

<html>

  <head>

    <meta charset="utf-8">

    <title>Angular 2 实例 - 菜鸟教程(runoob.com)</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">

    <!-- 1. 载入库 -->

    <!-- IE 需要 polyfill -->

    <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/rxjs/bundles/Rx.js"></script>

    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>

    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>

    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>

    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>

    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <!-- 2. 载入 'modules' -->

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

    <script src='app/app.module.js'></script>

    <script src='app/main.js'></script>

  </head>

  <!-- 3. 显示应用 -->

  <body>

    <my-app>Loading...</my-app>

  </body>

</html>

index.html 分析

1、载入我们需要的JavaScript库；

2、载入我们自己的JavaScript文件，注意顺序；

3、我们在标签中添加标签。

执行过程为：当 Angular 在 main.js 中调用 bootstrapModule 函数时，它读取 AppModule 的元数据，在启动组件中找到 AppComponent 并找到 my-app 选择器，

定位到一个名字为 my-app 的元素，然后再这个标签之间的载入内容。

添加一些样式

styles.css 文件代码为

styles.css

h1 {

  color: #369;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 250%;

}

body {

  margin: 2em;

}

最后输入

$ npm start

第二种方法，我们也可以使用angular-cli构建项目应用



初始化命令如下

cnpm install -g @angular/cli

ng new my-app

cd my-app

ng serve --open

ng serve 命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

by本文学习自菜鸟教程 http://www.runoob.com/angularjs2/angularjs2-javascript-setup.html

初探angular2的更多相关文章

  1. 发布自己的Angular2库初探

    从去年年底开始使用ng2,遇到并解决或被虐了一些问题点,对其各种新特性与开发模式感觉还算舒服.还有的一个感想就是,要使用ng2还得先学习不少其他东西,比如TypeScript语法,比如ES6新特性,还 ...

  2. angular2 学习笔记 ( 4.0 初探 )

    目前是 4.0.0-rc.2. 刚好有个小项目要开发,就直接拿它来试水啦. 更新 cli 到最新版, 创建项目, 然后 follow https://github.com/angular/angula ...

  3. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  4. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  5. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  6. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  7. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  8. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  9. Angular2入门系列教程3-多个组件，主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

随机推荐

  1. Libp2p学习（一）

    Libp2p学习 参考资料:libp2p-specifications : https://github.com/libp2p/specs 持续更新ing 1. 介绍 Libp2p的实现目标是: 支持 ...

  2. Jenkins日常运维笔记-重启数据覆盖问题、迁移、基于java代码发版(maven构建)

    之前在公司机房部署了一套jenkins环境,现需要迁移至IDC机房服务器上,迁移过程中记录了一些细节:1)jenkins默认的主目录放在当前用户家目录路径下的.jenkins目录中.如jenkins使 ...

  3. Haproxy和Nginx负载均衡测试效果对比记录

    为了对比Hproxy和Nginx负载均衡的效果,分别在测试机上(以下实验都是在单机上测试的,即负载机器和后端机器都在一台机器上)做了这两个负载均衡环境,并各自抓包分析.下面说下这两种负载均衡环境下抓包 ...

  4. C. Multi-Subject Competition

    链接 [https://codeforces.com/contest/1082/problem/C] 题意 有n个人,m个科目,每个人都有选的科目si,以及他的能力值ri, 规则是每个科目要么选要么不 ...

  5. 【转】CSS颜色代码大全

    转自http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html FFFFFF #DDDDDD #AAAAAA #888888 #666666 #4 ...

  6. PAT 1014 福尔摩斯的约会

    https://pintia.cn/problem-sets/994805260223102976/problems/994805308755394560 大侦探福尔摩斯接到一张奇怪的字条:“我们约会 ...

  7. 常用的查询DOM的方法

    查询body的方法=========== document.body // document.getElementsTagname("body")[0]; 查询html的方法=== ...

  8. redi集群测试

    redis集群的测试   原文:http://blog.sina.com.cn/s/blog_53b45c4d0102wg10.html 1.测试存取值 客户端连接集群redis-cli需要带上 -c ...

  9. [转帖]浅析java程序的执行过程

    浅析java程序的执行过程 转帖来源: https://www.cnblogs.com/wangjiming/p/10315983.html 之前学习过 这一块东西 但是感觉理解的不深刻. copy一 ...

  10. FICO基础知识（四）

    What is the organizational structure for CO? Operating Concern 经营组织 Controlling Area 成本控制范围 Profit c ...