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. confluence上传文件附件预览乱码问题（linux服务器安装字体操作）

    在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...

  2. 分布式监控系统Zabbix--完整安装记录 -添加apache监控

    前面介绍了zabbix3.0.3环境及相关监控项的添加,下面介绍下针对apache的监控配置:1)在apache配置文件中打开server-status状态访问功能(自带的) [root@IDC-Ad ...

  3. Python-文件操作—_19

    1,文件操作 模特主妇护士老师.txt 1,文件路径:d:\模特主妇护士老师.txt 2,编码方式:utf-8 gbk .... 3,操作方式:只读,只写,追加,读写,写读..... 以什么编码方式储 ...

  4. C. Books Queries

    链接 [http://codeforces.com/contest/1066/problem/C] 题意 开始空队列,可以进行前插和后插,还可以查询使某个数的为最左或最右需要去掉的最少数字 分析 模拟 ...

  5. 第二次作业 --- 我对QQ的评测

    腾讯QQ(简称“QQ”)是腾讯公司开发的一款基于Internet的即时通信(IM)软件.腾讯QQ支持在线聊天.视频通话.点对点断点续传文件.共享文件.网络硬盘.自定义面板.QQ邮箱等多种功能,并可与多 ...

  6. Jquery获取和修改img的src值的方法

    转自:http://www.jb51.net/article/46861.htm 获取(代码): $("#imgId")[0].src; 修改(代码): $("#imgI ...

  7. Eclipse 项目有红感叹号

    问题原因]:工程中classpath中指向的包路径错误 [解决办法]:右键项目名称 BuildPath ---> Configure Build Paht...中,然后上面有几个选项卡找到 Li ...

  8. SQL Server 递归查询上级或下级组织数据（上下级数据通用查询语法）

    查询上级组织数据: WITH OCTE AS ( AS LVL FROM IOV_Users U LEFT JOIN IOV_Organization O ON U.OrgId=O.ID UNION ...

  9. shell脚本--continue、break

    shell中的continue和break和其他语言中的使用方法一模一样:continue用于跳过本次循环,break用于中断本层的循环 下面是使用例子: #!/bin/bash #文件名:test. ...

  10. shell脚本--循环结构

    shell的循环结构有while和for两种 for循环 #!/bin/bash #文件名:test.sh i=4 for i in 2 4 6 8 10 do echo $i done echo $ ...