angular2 怎么利用@directive 实现angular1中的ng-controller+ng-app

Question

angular2 怎么利用@directive 实现angular1中的ng-controller+ng-app

发布于
2016-11-17

最近在学习angular2 看国内的官网镜像上的中文教程摸索前进>_< （看不懂英文T_T）在我看来angular2相对于angular1最大的变化是取消了ng-controller和$scope

之前对于angularjs的使用集中在数据绑定的便捷和控制器操作数据典型的curd类型网站只需要暂时数据表单输入 ajax 就够了现在没了controller就没办法想以前那样html和js分开要组件化就得把html代码和js代码结合到一起这样就从写网页+写js 变成了写前端略坑而且angular2貌似不组件化还法单独使用

现在看完了开发指南看到*ngFor=“。。。 ” 可以把“”里的数据弄出来显示在网页上那能不能使用@directive 来实现angular1中 ng-app+ng-controller这两个指令的功能并合并在一个@directive来实现
比如

<html>
<head>
</head>
<body>
    <div *ngCon="app">
        {{test}}
    </div>
</body>
</html>

class app{
    test="hello world"
}

有大佬能弄出来么求教

angularjs angualrjs typescript javascript ecmascript-6

阅读 4.1k

1 个回答

阿宝哥

Angular 2 中定义了 @Directive 和 @Component 装饰器，组件是继承于指令，并扩展了与 UI 视图相关的属性，如 template、styles、animations、encapsulation 等，因此如果与UI视图相关，就必须使用@Component 装饰器哈。

图片描述

参考示例：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h4>Welcome to Angular World</h4>
    <ul>
      <li *ngFor="let item of items;">
        {{ item }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  items: Array<string> = ['item1', 'item2', 'item3', 'item4', 'item5'];
}

参考：
Angular 2 中定义的指令和组件接口：

export interface Directive {
   selector?: string;  // 用于定义组件在HTML代码中匹配的标签
   inputs?: string[];  // 指令的输入属性
   outputs?: string[];  // 指令的输出属性
   host?: {[key: string]: string};  // 绑定宿主的属性、事件等
   providers?: Provider[];  // 设置指令及其子指令可以用的服务
   exportAs?: string;  // 导出指令，使得可以在模板中调用
   queries?: {[key: string]: any};  // 设置指令的查询条件
}

export interface Component extends Directive {
   changeDetection?: ChangeDetectionStrategy;  // 指定组件使用的变化检测策略
   viewProviders?: Provider[];     // 设置组件及其子组件(不含ContentChildren)可以用的服务
   moduleId?: string;  // 包含该组件模块的 id，它被用于解析 模版和样式的相对路径
   templateUrl?: string;  // 为组件指定一个外部模板的URL地址
   template?: string;  // 为组件指定一个内联的模板
   styleUrls?: string[];  // 为组件指定一系列用于该组件的样式表文件
   styles?: string[];  // 为组件指定内联样式
   animations?: any[];  // 设置组件相关动画
   encapsulation?: ViewEncapsulation;  // 设置组件视图包装选项
   interpolation?: [string, string];  // 设置默认的插值运算符，默认是"{{"和"}}"
   entryComponents?: Array<Type<any>|any[]>;  // 设置需要被提前编译的组件
}

推荐问题

Microsoft

子站问答

访问

相似问题

找不到问题？创建新问题

angular2 怎么利用@directive 实现angular1中的ng-controller+ng-app

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

什么是闭包？闭包有哪些应用场景？

求一个能输入需求就可以写出代码的网站，支持一键部署？

Microsoft