深入理解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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
js获取div高度的代码
Aug 09 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
Jquery焦点图实例代码
2014/11/25 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
JS实现手风琴特效
2020/11/08 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python编程实现归并排序
2017/04/14 Python
Python笔记之代理模式
2019/11/20 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
决心书范文
2014/03/11 职场文书
大四毕业生自荐书
2014/07/05 职场文书
销售经理岗位职责
2015/01/31 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL