Angular JS 2.0 Hello World 入门案例

 

     因为以前一直没有接触过前端这边，但是现在感觉比较流行的就是前后端分离，所以还是想花点时间学学Angular JS，首先就从Hello Word 开始吧!

     1 首先是安装node.js 这里就不赘述了，不知道的小伙伴可以自行百度（node.js的安装）

        然后建立文件夹作为angular JS的工作区间 我是在F盘建立文件夹 （F:\angular_workspace）

 

      2 在工作区下面新建一个json文件 （package.json） 将下面的内容复制进去

    

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "core-js": "^2.4.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0"
  }
}

　　3 打开 CMD并进入工作空间，然后执行命令 npm install

 

     4 在工作区中建立文件夹 app，然后新建几个文件

 

    1） app.component.js

    

?
1
2
3
4
5
6
7
8
9
10
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));

　　2）app.module.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(function(app) {
 
app.AppModule =
 
ng.core.NgModule({
 
imports: [ ng.platformBrowser.BrowserModule ],
 
declarations: [ app.AppComponent ],
 
bootstrap: [ app.AppComponent ]
 
})
 
.Class({
 
constructor: function() {}
 
});
 
})(window.app || (window.app = {}));

　　3）main.js

?
1
2
3
4
5
6
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));

　　

     5 在工作区间的根目录下建立首页文件和样式

    1）index.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
 
<head>
<title>Angular 2 QuickStart JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
 
 
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
 
<script src='app/app.component.js'></script>
<script src='app/app.module.js'></script>
<script src='app/main.js'></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
 
</html>

　　2）style.css

?
1
2
3
4
5
6
7
8
9
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
 
body {
margin: 2em;
}

　　6 然后打开CMD  到根目录下 输入命令 npm start

 

  然后浏览器会自动打开，此时我们的第一个angularJS 的程序就完成了

 

参考博客 https://www.jianshu.com/p/f2c1861d9d49

 

 

 

   

 

   

    

posted @   小琪子  阅读(127)  评论(0)    收藏  举报
编辑推荐：
· 字符集、编码的前世今生
· Web性能优化：从 2 秒到200毫秒
· WPF 使用GDI+提取图片主色调并生成Mica材质特效背景
· golang遍历处理map时的常见性能陷阱
· .NET8带来的一些新特性
阅读排行：
· Web性能优化：从 2 秒到200毫秒
· 看到这种代码，我直接气到想打人
· Winform高级技巧-界面和代码分离的实践案例
· 1 分钟生成架构图？程序员 AI 绘图保姆级教程
· 字符集、编码的前世今生
点击右上角即可分享
微信分享提示