NG 1.5 Version应用程序入口Component写法

最新推荐文章于 2024-07-08 07:46:41 发布

青涛声依旧

最新推荐文章于 2024-07-08 07:46:41 发布

阅读量576

点赞数

分类专栏： AngularJS 文章标签： AngularJS Component app 应用

本文链接：https://blog.csdn.net/u013915143/article/details/51953137

版权

AngularJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Index.html中写入已经编写好的Component ，即app


    
   
   
    
    
        //do something or not

其中<app></app>为ng识别的启动入口Component，开发者可以在对应的JS 文件index.js中配置该Component，（其中AppComponent为已经导出的模块。详细请参考ES6）如：

import AppComponent from './app';

angular.module('app', [
        uiRouter,
        ngCookies ])
.config(config)
.component('app', AppComponent);

那么AppComponent是如何定义的，如下为app.js文件。

import template from './app.html';

let app = {
    template,
    restrict:'E',
    controller:controllerFun
};

function controllerFun(){
    console.log('app fun...')
}

export default app;

如果对Angularjs有所了解的话，看到上面的代码，会发现NG 1.5 version中的component与directive十分相似，其实从官方文档的说明看，可以发现component是一种特殊的directive，它适用于基于组建的应用程序结构，它的配置更简单，更容易编写，更偏向于NG2的风格。

组件的优点：

① 配置比普通的指令简单；

② 促进健全的默认值和最佳实践；

③ 对基于组件的架构进行了优化；

④ 使得正在使用的组件和指令更容易向NG2过渡。

不使用的组件情景：

① 对于编写依赖于DOM操作的指令，添加事件监听器等，因为编译和链接函数在组件中是不可用的；

② 当你需要高级指令定义选项，如优先级，终端，多元素；

③ 当你想用一个属性或CSS类，而不是一个元素，去触发指令的时候。