深入理解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 相关文章推荐
二级域名转向类
Nov 09 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
AngularJS实现表单验证
Jan 28 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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代码
2007/03/03 PHP
PHP教程 预定义变量
2009/10/23 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
jQuery bind事件使用详解
2011/05/05 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
javascript常用的方法分享
2015/07/01 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
PHP webshell检查工具 python实现代码
2009/09/15 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python轮询机制控制led实例
2020/05/03 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
python实现经纬度采样的示例代码
2020/12/10 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
参观接待方案
2014/03/17 职场文书