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. Centos6.9下RabbitMQ集群部署记录

    之前简单介绍了CentOS下单机部署RabbltMQ环境的操作记录,下面详细说下RabbitMQ集群知识,RabbitMQ是用erlang开发的,集群非常方便,因为erlang天生就是一门分布式语言, ...

  2. ecna2017-Game of Throwns

    这题就是给你一个标号为0-n-1的环,然后给你M个操作,操作有两种,一种是直接给一个数,这数的正负代表我当前向前(向后)仍了xx个位置的球,或者给你一个撤销操作表示为 undo m,表示撤销最近的M个 ...

  3. C++STL——优先队列

    一.相关定义 优先队列容器与队列一样,只能从队尾插入元素,从队首删除元素.但是它有一个特性,就是队列中最大的元素总是位于队首,所以出队时,并非按照先进先出的原则进行,而是将当前队列中最大的元素出队.这 ...

  4. Linux内核分析——字符集总结与分析

      一.  设置修改系统.应用默认字符集 1. 查看虚拟机的字符集: 由此可见,该虚拟机的字符集为zh_CN.UTF-8. 2. 查看服务器支持的编码方式 3. 修改字符集类型 上图可见,LANG字符 ...

  5. 『编程题全队』Beta 阶段冲刺博客四

    1.提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID) (1) 昨天已完成的工作 孙志威: 1.新增添加提醒事项的按钮 2.添加了新建提醒框 3.测试了新的SubTask思 ...

  6. maven私服 Nexus2.x.x私服安装配置

    一.Nexus的下载和安装 1.下载nexus ,下载地址:https://www.sonatype.com/download-oss-sonatype  2.打开目录nexus-2.x.x-xx-b ...

  7. [MS] 微软官网下载安装SQLSERVER2019的rpm

    快速入门:安装 SQL Server 和 Red Hat 上创建数据库 https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-co ...

  8. Docker 方式运行 sonarqube

    From 平台测试部同事的 ppt 感谢. 拉取镜像 docker pull postgres docker pull sonarqube 运行镜像 docker run --name db --re ...

  9. ionic创建项目失败

    × Downloading and extracting blank starter - failed![ERROR] Network connectivity error occurred, are ...

  10. 玩弄 python 正则表达式

    这里记录一个我常用的模型,每次久了不使用正则就会忘记. 记得最好玩的一句关于正则表达式的话就是 当你想到一件事情可以用正则表达式解决的时候 现在你就面临了两个问题了. python里面使用了re模块对 ...