[Angular 2] Angular 2 Smart Components vs Presentation Components

Both Smart Components and Presentation Components receive data from Services in entirely different ways. Smart Components use constructor injection to lookup the entire service from the injector while Angular 2 Presentation components take the data from @Input defined on their component class.

In the app, HomeComponent is smart component, it talks to the service and handle events.

Dump Component likes WidgetOneComponent, it receive input and just displaying the data.

时间: 2024-11-08 18:50:18

[Angular 2] Angular 2 Smart Components vs Presentation Components的相关文章

angular.isArray,angular.isDate,angular.isDefined,angular.isElement,angular.isFunction,angular.isNumber,angular.isObject,angular.isString,angular.isUndefined

//angular.isArray是否是数组console.log(angular.isArray([])); //trueconsole.log(angular.isArray([1,2,1,3])); //true//angular.isDate是否是日期console.log(angular.isDate('2012-12-02')); //falseconsole.log(angular.isDate(new Date)); //true//angular.isDefined引用对象是否

Angular企业级开发(10)-Smart Table插件开发

1.Smart Table内置的分页功能 Smart Table是基于AngularJS模块特性开发出来的一款优秀的表格组件,默认就支持过滤.排序等核心功能.开发者基于它也可以开发插件,满足个性化需求.比如分页.排序数据.通过Ajax获取等. Smart Table通过Custom Pagination插件可以完成分页功能: Custom pagination 运行效果如下: html代码结构: <table st-table="displayed" class="ta

[Angular] Separating Structural Styles From Theme Styles - Making Components Themeable

For the component's css file, we can improt two css files: common.css default-theme.css @import "common.css"; @import "au-fa-input-default-theme.css"; In the default theme, it contains all the default theme related style. :host { borde

简话Angular 02 Angular控制器-作用域嵌套

1. html代码 <div ng-controller="ParentController"> <h3><strong>父控制器</strong></h3> <label>姓名: </label> <input type="text" ng-model='person.name'> <label>年龄: </label> {{person.age

简话Angular 07 Angular config-run-service-factory-provider-constant-value

一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 config Angular module模块的加载阶段-应用在此时还没有启动 run Angular应用是第一个被运行的方法,相当于其它语言中的main()方法 factory factory() 方法是创建和配置服务的最快捷方式,单例对象,在应用的生命周期内只会被调用一次注入factory,相当于注入factory定义时的函数调用入口.用 Factory 就是创建一个对象,

Angular - - ngRoute Angular自带的路由

ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信息. controller:字符串或函数,指定控制器. controllerAs:一个用于控制器的标识符名称.. template:字符串或函数,html模板. templateUrl:字符串或函数,html模板的地址. resolve:对象,一个应该注入控制器的可选的映射依赖关系.如果任何一个依赖

简话Angular 08 Angular ajax

一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换 1.功能细分简解 $http 类似JQuery ajax,支持promise $http.jsonp 跨域访问,只支持json数据格式,不支持文本,html等其他格式 $httpProvider 主要在config中使用,做http通用设置 1 <label>JSONP 实例, Http promise实例</label> 2 <div ng-controller="

1.Angular框架-angular介绍与基本使用,MVC模式介绍

1.1. AngularJS概述 1.1.1. 介绍 简称:ng Angular是一个MVC框架 AngularJS 诞生于2009年,由 Misko Hevery 等人创建,后为Google所收购. 是一款优秀的前端JS框架,已经被用于Google的多款产品当中. AngularJS有着诸多特性,最为核心的是: MVC.模块化(编程).自动化双向数据绑定.语义化标签.指令.依赖注入等等. 其他前端框架: VueJS . Avalon . React . BackBone . KnockoutJ

简话Angular 03 Angular内置表达式大全

一句话: 大多数html标签属性和事件都有一个对应的ng指令 说明:这些指令和原生html最大的区别就是可以动态更新.比如一个div的样式用ng-class后,我们就可以随意应用css class. 1. 内置指令大全 ng-include 包含一个文件 ng-href ng-src 对应 href src ng-disabled ng-readonly 对应 disabled readonly ng-checked ng-selected ng-options ng-true-value ng