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

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

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

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

我的第一个应用如下



查看项目目录



实现项目过程如下

$ mkdir angular-quickstart

$ cd angular-quickstart

创建 package.json 文件

  1. package.json
  2. {
  3.   "name": "angular2-quickstart",
  4.   "version": "1.0.0",
  5.   "scripts": {
  6.     "start": "npm run lite",
  7.     "lite": "lite-server"
  8.   },
  9.   "license": "ISC",
  10.   "dependencies": {
  11.     "@angular/common": "2.0.0",
  12.     "@angular/compiler": "2.0.0",
  13.     "@angular/core": "2.0.0",
  14.     "@angular/forms": "2.0.0",
  15.     "@angular/http": "2.0.0",
  16.     "@angular/platform-browser": "2.0.0",
  17.     "@angular/platform-browser-dynamic": "2.0.0",
  18.     "@angular/router": "3.0.0",
  19.     "@angular/upgrade": "2.0.0",
  21.     "core-js": "^2.4.1",
  22.     "reflect-metadata": "^0.1.3",
  23.     "rxjs": "5.0.0-beta.12",
  24.     "zone.js": "^0.6.23",
  26.     "angular2-in-memory-web-api": "0.0.20",
  27.     "bootstrap": "^3.3.6"
  28.   },
  29.   "devDependencies": {
  30.     "concurrently": "^2.0.0",
  31.     "lite-server": "^2.2.0"
  32.   }
  33. }

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

$ cnpm install

$ mkdir app

$ cd app

  1. app.component.js
  2. (function(app){
  3.     app.AppComponent=
  4.         ng.core.Component({
  5.             selector:'my-app',
  6.             template:'<h1>我的第一个Angular应用</h1>'
  7.         })
  8.         .Class({
  9.             constructor:function(){}
  10.         })
  11. })(window.app||(window.app={}));

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

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

  1. (function(app) {
  2. })(window.app || (window.app = {}));
  1. app.module.js
  2. (function(app) {
  3.     app.AppModule =
  4.       ng.core.NgModule({
  5.         imports: [ ng.platformBrowser.BrowserModule ],
  6.         declarations: [ app.AppComponent ],
  7.         bootstrap: [ app.AppComponent ]
  8.       })
  9.       .Class({
  10.         constructor: function() {}
  11.       });
  12.   })(window.app || (window.app = {}));
  1. main.js
  2. (function(app){
  3.     document.addEventListener('DOMContentLoaded',function(){
  4.     ng.platformBrowserDynamic
  5.       .platformBrowserDynamic()
  6.       .bootstrapModule(app.AppModule);
  7.     });
  8. })(window.app||(window.app={}))

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

Angular 的 platformBrowserDynamic().bootstrapModule 函数。

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

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

  1. index.html
  2. <html>
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <title>Angular 2 实例 - 菜鸟教程(runoob.com)</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <link rel="stylesheet" href="styles.css">
  10.     <!-- 1. 载入库 -->
  11.     <!-- IE 需要 polyfill -->
  12.     <script src="node_modules/core-js/client/shim.min.js"></script>
  14.     <script src="node_modules/zone.js/dist/zone.js"></script>
  15.     <script src="node_modules/reflect-metadata/Reflect.js"></script>
  17.     <script src="node_modules/rxjs/bundles/Rx.js"></script>
  18.     <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
  19.     <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
  20.     <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
  21.     <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
  22.     <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
  24.     <!-- 2. 载入 'modules' -->
  25.     <script src='app/app.component.js'></script>
  26.     <script src='app/app.module.js'></script>
  27.     <script src='app/main.js'></script>
  29.   </head>
  31.   <!-- 3. 显示应用 -->
  32.   <body>
  33.     <my-app>Loading...</my-app>
  34.   </body>
  36. </html>

index.html 分析

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

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

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

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

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

添加一些样式

styles.css 文件代码为

  1. styles.css
  2. h1 {
  3.   color: #369;
  4.   font-family: Arial, Helvetica, sans-serif;
  5.   font-size: 250%;
  6. }
  7. body {
  8.   margin: 2em;
  9. }

最后输入

$ 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. iptables限制连接数(如sftp) 以及 谨防CC/DDOS攻击的配置 ( connlimit模块)

    之前在公司服务器上部署了sftp,用于上传业务系统的附件.后来由于程序连接问题,使的sftp连接数过多(最多时高达400多个sftp连接数),因为急需要对sftp的连接数做严格限制.操作记录如下: 启 ...

  2. Mysql基于GTID复制模式-运维小结 (完整篇)

    先来看mysql5.6主从同步操作时遇到的一个报错:mysql> change master to master_host='192.168.10.59',master_user='repli' ...

  3. Ceph常规操作及常见问题梳理

    Ceph集群管理 每次用命令启动.重启.停止Ceph守护进程(或整个集群)时,必须指定至少一个选项和一个命令,还可能要指定守护进程类型或具体例程. **命令格式如 {commandline} [opt ...

  4. ABP框架用Dapper实现通过SQL访问数据库

    ABP的框架(2) - 访问数据库   为了防止不提供原网址的转载,特在这里加上原文链接:http://www.cnblogs.com/skabyy/p/7517397.html 本篇我们实现数据库的 ...

  5. JavaScript中的cookie

    cookie本身没什么可介绍的,但是cookie在JavaScript中,有很多需要注意的 首先,cookie在JavaScript中,是window.document对象的一个属性,所以访问cook ...

  6. oracle mysql gbk varchar varchar2

    http://www.cnblogs.com/kxdblog/p/4042331.html https://wenku.baidu.com/view/97524e0f844769eae009ed80. ...

  7. FreeMaker使用HashMap

    private Map<String, Object> variables; <input type="hidden" id="tongzhisbm&q ...

  8. Cron Expression的用途

    对于一些MIS系统,DeadLine,需要用户自己制定事件规则,Cron Expression应该可以派上用场. Cron Maker: http://www.cronmaker.com/

  9. pandas绘图

    #encoding:utf8 import pandas as pd import numpy as np import matplotlib.pyplot as plt df = pd.DataFr ...

  10. BZOJ4229选择——LCT+并查集+离线(LCT动态维护边双连通分量)

    题目描述 现在,我想知道自己是否还有选择. 给定n个点m条边的无向图以及顺序发生的q个事件. 每个事件都属于下面两种之一: 1.删除某一条图上仍存在的边 2.询问是否存在两条边不相交的路径可以从点u出 ...