深入理解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 相关文章推荐
javascript中的循环语句for语句深入理解
Apr 04 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
原生javascript实现分页效果
Apr 21 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
vue的mixins属性详解
Mar 14 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
vue远程加载sfc组件思路详解
Dec 25 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
php cookies中删除的一般赋值方法
2011/05/07 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
小程序自定义日历效果
2018/12/29 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python判断字符串与大小写转换
2015/06/08 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
工程质检员岗位职责
2015/04/08 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
同乡会致辞
2015/07/30 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python