angular2 启动步骤
以下内容转自网络
1. 创建项目文件夹
创建一个新的文件夹来保存你的项目，比如一开始有个self就好了
2.安装基础库
首先确保已经安装了node.js
我们使用 npm package manager 来安装需要的开发库和开发工具。
打开终端窗口，输入下面的命令。
npm install
如果在执行npm install命令时没有出现npm ERR!，一起都好。可能会有几个npm WARN消息，这也没有影响。
我们会经常在一连串的gyp ERR!（gyp: generate your project）消息后看到一个npm WARN消息。不用管他们。一个包会使用node-gyp重新编译自己。如果重新编译失败，包会恢复（场使用一个预编译版本），一切正常工作。
只要保证在npm install命令最后面没有npm ERR!就好。
之后再执行下面的命令
npm init -y
npm i angular2@2.0.0-alpha.44 --save --save-exact
npm i live-server --save-dev
这些命令将会创建名为 package.json 的项目文件，安装相应的软件包，现在的 package.json 看起来应该如下所示。
{
"name": "angular2-getting-started",
"version": "1.0.0",
"dependencies": {
"angular2": "2.0.0-alpha.44"
},
"devDependencies": {
"live-server": "^0.8.1"
}
}
还需要一个 scripts 的配置节，找到并替换为如下的内容, 如果在你的文件中没有这个配置节, 那就加上好了.
"scripts": {
"start": "live-server"
}
3. 第一个 Angular Component
添加一个名为 app.js 的文件，输入下面的内容。
var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
我们正在创建一个名为 AppComponent 的可视组件，通过使用全局的 ng 命名空间下的 Component 和 Class 方法来完成。
var AppComponent = ng
.Component({...})
.Class({...})
Component 方法需要一个包含两个属性的配置对象。selecter 属性告诉 Angular 需要控制名为 "my-app" 的元素。一旦遇到 my-app 元素，Angular 将会创建和显示 AppComponent 实例
template 属性定义了组件的可视外观。在这个示例中，我们使用了内联的模板，我们也可以把这个模板调整到一个模板文件中，然后通过 templateUrl 来关联模板文件的名称来使用它。
我们使用 Class 方法实现这个组件本身的内容，可以定义属性，方法并绑定到这个视图
现在的组件是一个最小化的实现，构造函数中没有内容。在以后的示例中，我们会看到很多有趣的内容。
4. 启动应用
我们需要在应用中做点什么，在 app.js 的最后，添加下面的内容。
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
我们等到浏览器通知我们说，内容已经加载完成了，然后再调用 bootstrap 方法。
bootstrap 方法通知 Angular 使用 AppComponent 作为应用的根来启动应用，
应该可以猜到, 在应用变得复杂的情况下, 我们会创建一个 Component 的树来完成复杂的工作.
Wrapped in an IIFE
我们不希望污染全局命名空间，但是,现在还不需要应用到命名空间，我们直接使用 IIFE ( Immediately Invoked Function Execution ) 来封装我们的代码。
(function() {
var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
})();
5. 创建 index.html
在项目文件夹中添加名为 index.html 的页面，内容如下：
<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
<script src="app.js"></script>
</head>
<body>
<my-app></my-app>
</body>
</html>
在 head 中，我们的应用加载了两个脚本
angular2.sfx.dev.js, Angular2 的开发库
app.js, 我们刚刚开发的脚本。
在 body 中，使用了名为 <my-app> 的元素，这是应用的根的占位，Angular 将在这里显示我们的应用。
angular2 启动步骤的更多相关文章
- [iOS微博项目 - 2.4] - 重新安排app启动步骤
github: https://github.com/hellovoidworld/HVWWeibo A.app启动步骤 1.加入了授权步骤之后,最先要判断app内是否已经登陆了账号 2.在程序启 ...
- Oozie的详细启动步骤（CDH版本的3节点集群）
不多说,直接上干货! 我的机器情况是,bigdatamaster(Oozie是安装在这台节点上).bigdataslave1和bigdatalsave2. 启动步骤 第一:先启动mysqld服务进程 ...
- HBase的多节点集群详细启动步骤（3或5节点）（分为Zookeeper自带还是外装）
HBase的多节点集群详细启动步骤(3或5节点)分为: 1.HBASE_MANAGES_ZK的默认值是false(zookeeper外装)(推荐) 2.HBASE_MANAGES_ZK的默认值是tru ...
- spark集群启动步骤及web ui查看
集群启动步骤:先启动HDFS系统,在启动spark集群,最后提交jar到spark集群执行. 1.hadoop启动cd /home/***/hadoop-2.7.4/sbinstart-all.sh ...
- Kafka的3节点集群详细启动步骤（Zookeeper是外装）
首先,声明,kafka集群是搭建在hadoop1.hadoop2和hadoop3机器上. kafka_2.10-0.8.1.1.tgz的1或3节点集群的下载.安装和配置(图文详细教程)绝对干货 如下分 ...
- Hadoop的多节点集群详细启动步骤（3或5节点）
版本1 利用自己写的脚本来启动,见如下博客 hadoop-2.6.0-cdh5.4.5.tar.gz(CDH)的3节点集群搭建 hadoop-2.6.0.tar.gz的集群搭建(3节点) hadoop ...
- Kylin启动步骤
Kylin本身的启动命令比较简单, 但是由于Kylin依赖的其他组件比较多, 所以把完整的启动步骤整理一下. 1.确保集群时间同步 首先查看集群中的时间是否同步 date 如果时间不一致,需要使用如下 ...
- windows下vue项目启动步骤
原创:https://blog.csdn.net/qq_27680317/article/details/71123051?locationNum=10&fps=1 不是ngnix服务器是,忽 ...
- Oracle 11g RAC停止和启动步骤
关闭前备份控制文件/参数文件: sqlplus / as sysdba alter database backup controlfile to '/home/oracle/control.ctl ...
随机推荐
- swiper.js插件的使用
swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css. <!DOCTYPE html><html> <he ...
- GDI双缓冲绘图
一.简介 在进行复杂图形绘制时,若直接在屏幕DC上进行绘制,则会出现明显的闪烁.闪烁产生的原因是当绘制的图形较为 复杂时,图形绘制过程中就被刷新到屏幕上,导致结果断断续续地显示出来.双缓冲绘图的原理是 ...
- C++类成员函数与成员变量的内存布局
一.成员函数 成员函数可以被看作是类作用域的全局函数,不在对象分配的空间里,只有虚函数才会在类对象里有一个指针,存放虚函数的地址等相关信息.
- [在读]Nodejs实战
书到手的时候其实就已经过时,Express更新太快,因而书中的例子实践起来会有很多阻碍. 目前搁置状态.
- sass 常用用法笔记
最近公司开发的h5项目,需要用到sass,所以领导推荐让我去阮一峰大神的SASS用法指南博客学习,为方便以后自己使用,所以在此记录. 一.代码的重用 1.继承:SASS允许一个选择器,继承另一个选择器 ...
- Java练习题01
问题: 利用二维非矩阵数组输出下面的数字 0 1 2 2 3 4 3 4 5 6 代码: public class Page98{ public static void main(String ...
- 在SQLServer使用触发器实现数据完整性
1.实现数据完整性的手段 在sqlserver中,在服务器端实现数据完整性主要有两种手段:一种是在创建表时定义数据完整性,主要分为:实体完整性.域完整性.和级联参照完整性:实现的手段是创建主键约束.唯 ...
- 51nod 1096 距离之和最小（水题日常）
基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 X轴上有N个点,求X轴上一点使它到这N个点的距离之和最小,输出这个最小的距离之和. Input 第1行:点的数量 ...
- DELETE - 删除一个表中的行
SYNOPSIS DELETE FROM [ ONLY ] table [ WHERE condition ] DESCRIPTION 描述 DELETE 从指明的表里删除满足 WHERE 子句的行. ...
- python 人脸识别试水（一）
1.安装python,在这里我的版本是python 3.6 2.安装pycharm,我的版本是pycharm 2017 3.安装pip pip 版本10 4.安装 numpy :pip ins ...