AngularJS2入门实例（1）

最新推荐文章于 2020-07-10 19:25:59 发布

tianjun2012

最新推荐文章于 2020-07-10 19:25:59 发布

阅读量4.4k

点赞数 2

分类专栏： angular 文章标签： angular angularjs angularjs2

本文链接：https://blog.csdn.net/tianjun2012/article/details/50988544

版权

angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、入门体验

最近由于项目的需要，本人花了一个礼拜的时间刚刚把angulajs1.x给入门，感觉可以上手做项目了，悲催的被告知，还需要学习angular2，2.x目前还是beta版（公测）估计第一个稳定版也快出来了吧！废话不多，我留下我学习的痕迹，上效果图：
（其实我也是ng-book2这本书来一步步学习的，在啰嗦一句，大家翻墙啊，一定，不然好多资料你下不来，也在线看不到，https://github.com/kittencup/angular2-ama-cn/issues/24）
这里写图片描述

二、入门实例的代码

app.ts代码：

import { bootstrap } from "angular2/platform/browser";
import { Component } from "angular2/core";

@Component({
  selector:'reddit-article',
  host:{
    class:'row'
  },
  template:`
    <div class="four wide column center aligned votes">
      <div class="ui statistic">
        <div class="value">{{votes}}</div>
        <div class="label">Points</div>
      </div>
    </div>
    <div class="twelve wide column">
      <a class="ui large header" href="{{link}}">{{title}}</a>
      <ul class="ui big horizontal list votes">
        <li class="item">
          <a href (click)="voteUp()">
            <i class="arrow up icon"></i>upvote
          </a>
        </li>
        <li class="item">
          <a href (click)="voteDown()">
            <i class="arrow down icon"></i>downvote
          </a>
        </li>
      </ul>
    </div>
  `
})
class ArticleComponent{
  votes:number;
  title:string;
  link:string;
  constructor(){
    this.votes=10;
    this.title="Angular 2";
    this.link='http://angular.io';
  }
  voteUp(){
    this.votes+=1;
    return false;
  }
  voteDown(){
    this.votes-=1;
    return false;
  }
}


  @Component({
    selector:'reddit',
    directives:[ArticleComponent],
    template:`
    <form class="ui large form segment">
        <h3 class="ui header">Add a Link</h3>
        <div class="field">
          <label for="title">Title:</label><input name="title" #newtitle>
        </div>
        <div class="field">
          <label for="link">Link:</label><input name="link" #newlink>
        </div>
        <button (click)="addArticle(newtitle,newlink)" class="ui positive right floated button">
          submit link
        </button>
    </form>
    <div class="ui grid posts">
      <reddit-article></reddit-article>
    </div>
  `
  })

class RedditApp{
  constructor(){}
  addArticle(title:HTMLInputElement,link:HTMLInputElement):void{
    console.log(`Adding article title:${title.value} and link:${link.value}`);
  }
}
bootstrap(RedditApp);

注意：我意思刚刚接触这个实例，和angular1.x的模块化加载是有点不同的，在实验的时候，我这个上面的几个@Component和class的顺序不是按照上面来的，结果不是报错，就是两个，只出来一个，我是无语了，只有慢慢学习，慢慢来知其所以然啦！
同一目录下的

<!doctype html>
<html>
<head>
    <title>Angular 2 - Simple Reddit</title>
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css"
          href="resources/vendor/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <script>
        System.config({
            packages:{
                app:{
                    format:'register',
                    defaultExtension:'js'
                }
            }
        });
        System.import('app.js')
                .then(null,console.error.bind(console));
    </script>
    <!-- Menu Bar -->
    <div class="ui menu">
        <div class="ui container">
            <a href="#" class="header item">
                <img class="logo" src="resources/images/ng-book-2-minibook.png">
                ng-book 2
            </a>
            <div class="header item borderless">
                <h1 class="ui header">
                    Angular 2 Simple Reddit
                </h1>
            </div>
        </div>
    </div>

    <div class="ui main text container">
        <reddit></reddit> <!-- <--- Our app loads here! -->
    </div>
</body>
</html>`这里写代码片`

tianjun2012

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
AngularJS2入门实例（1）

一、入门体验最近由于项目的需要，本人花了一个礼拜的时间刚刚把angulajs1.x给入门，感觉可以上手做项目了，悲催的被告知，还需要学习angular2，2.x目前还是beta版（公测）估计第一个稳定版也快出来了吧！废话不多，我留下我学习的痕迹，上效果图：（其实我也是ng-book2这本书来一步步学习的，在啰嗦一句，大家翻墙啊，一定，不然好多资料你下不来，也在线看不到，https://githu
复制链接

扫一扫