深入理解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 将在这里显示我们的应用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇angularJs在多个控制器中共享服务数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
使用AngularJS编写较为优美的JavaScript代码指南
这篇文章主要介绍了使用AngularJS编写较为优美的JavaScript代码指南,包括控制器和封装等进阶技巧上的编程建议,倾力推荐!需要的朋友可以参考下2015-06-06
angularjs利用directive实现移动端自定义软键盘的示例
下面小编就为大家带来一篇angularJS利用directive实现移动端自定义软键盘的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了AngularJS安装版本问题解析,在这需要注意在安装前请确保自己安装NodeJS环境版本为V18及以上，否则会因node版本问题导致项目无法正常运行，需要的朋友可以参考下2024-02-02
这篇文章主要介绍了angularjs $http实现form表单提交示例，非常具有实用价值，需要的朋友可以参考下2017-06-06
Angular CLI在Angular项目中如何使用scss详解
angular-cli自身支持Scss预处理器，Scss比css更加方便灵活，而且层次清晰，代码整洁。下面这篇文章主要给大家介绍了关于Angular CLI在Angular项目中如何使用scss的相关资料，需要的朋友可以参考下。2018-04-04
这篇文章主要介绍了angular4笔记系列之内置指令小结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
AngularJS基于factory创建自定义服务的方法详解
这篇文章主要介绍了AngularJS基于factory创建自定义服务的方法,结合实例形式分析了AngularJS使用factory创建自定义服务的具体步骤、操作技巧与相关注意事项,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了Angular应用prerender预渲染提高页面加载速度,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了从 Angular Route 中提前获取数据,通过本文，你将学会使用 resolver， 在 Angular App 中应用 resolver，应用到一个公共的预加载导航，本文给大家介绍的非常详细，需要的朋友可以参考下2022-07-07
最新评论