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. ecna2017-Sheba’s Amoebas

    很简单的深搜的一道题,由于这道题要找环的个数,并且认为相连当一个点的8个方向种中有一个方向和这个点相连. 这个题做法无非就是暴力每个点,然后满足条件的深搜即可. 感觉我自己的代码写的很无趣,大佬的代码 ...

  2. C. Meme Problem

    链接 [http://codeforces.com/contest/1076/problem/C] 题意 a+b=d and a⋅b=d. 计算出a和b 分析 ab=a(d-a)=d aa-ad+d= ...

  3. SE Springer小组之《Spring音乐播放器》可行性研究报告五、六

    5 可选择的其他系统方案 曾经考虑过制作闹钟系统,但考虑到闹钟系统在电脑应用中极其不实用,所以此方案未通过. 6 投资及效益分析 6．1支出 本软件只用于完成课程学习要求,不用做商用,无基础设备等支出 ...

  4. SpringBoot-简单实例

    在进行实例之前,首先须确保电脑环境变量已经配置好,包括jdk.maven.此文章不做描述,不清楚自行百度. 第一步:来到springboot官网(https://start.spring.io/)下载 ...

  5. 6-Python3从入门到实战—基础之数据类型（元组-Tuple）

    Python从入门到实战系列--目录 元组的定义 定义元组只需要在括号中添加元素,并使用逗号隔开即可 tup = ('Python','Java','C++','Kotlin') 元组与列表的区别 P ...

  6. node基础 npm、module、exports、require

    module 模块.包:可以认为是一个代码包,package,提供特定的功能(暴露给外界接口,让外界调用) exports 输出.导出:导出模块中的各种类型的变量,以及各种方法,导出之后,才可以被外界 ...

  7. js十大排序算法：冒泡排序

    排序算法说明: (1)对于评述算法优劣术语的说明 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面:不稳定:如果a原本在b的前面,而a=b,排序之后a可能会出现在b的后面: 内排序:所有排 ...

  8. Atlas & mysql-proxy

    Atlas https://github.com/Qihoo360/Atlas https://github.com/Qihoo360/Atlas/wiki/Installing-Atlas Atla ...

  9. Postgresql 密码设置

    今天下午 陷进去了 其实很简单的一个事情结果浪费了 接近一个小时. 做事情必须要细致一些. 自己的确做的不好. 这里面简单说一下pg_hba.conf 和 postgresql 密码的一些设置问题. ...

  10. Laravel之路由 Route::get/post/any、路由参数、过滤器、命名、子域名、前缀、与模型绑定、抛出 404 错误、控制器

    基本路由 应用中的大多数路都会定义在 app/routes.php 文件中.最简单的Laravel路由由URI和闭包回调函数组成. 基本 GET 路由 代码如下: Route::get('/', fu ...