深入理解angular2启动项目步骤


Posted in Javascript onJuly 15, 2017

1. 创建项目文件夹

创建一个新的文件夹来保存你的项目,比如一开始有个self就好了

深入理解angular2启动项目步骤

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 将在这里显示我们的应用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
实例浅析js的this
Dec 11 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
个人小程序接入支付解决方案
May 23 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
js+html5实现复制文字按钮
Jul 15 #Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 #Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 #Javascript
vue增删改查的简单操作
Jul 15 #Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 #Javascript
Javascript实现基本运算器
Jul 15 #Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 #Javascript
You might like
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
Python多进程编程技术实例分析
2014/09/16 Python
Python数组定义方法
2016/04/13 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
在python中用url_for构造URL的方法
2019/07/25 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python流程控制语句的深入讲解
2020/06/15 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
优质的学校老师推荐信
2013/10/28 职场文书
电子商务个人自荐信
2013/12/12 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server