AngularJS组件化--让开发更简单

AngularJS--组件化<component>

什么是组件化？

组件化是将页面中一部分UI分装起来进行重复使用，UI中的数据是可以不同的，甚至组件中可以对UI进行适当的业务逻辑处理，如链接跳转、数据运算。

代码：定义组件基础语法结构

var app=angular.module("pageHeader",[]);
app.component("组件名字",{
    template:"<h1>欢迎您尊敬的用户</h1>"

})

HTML页面：

<page-header></page-header>  

注意：组件命名规则
组件的命名有框架自己的规则和使用规范，都是根据实际项目需要进行封装处理的
组件命名规则：驼峰命名法，见名知意，如：myComp
使用规则：W3C命名规则，将大写字母转换成小写字母，前面加中划线;

组件选项：

template:组件替换模板字符串

templateUrl:组件替换html模板页面

controller:组件控制器

代码：定义组件语法使用

var app=angular.module("myapp",[]);
app.component("pageHeader",{
template:"<h1>欢迎您尊敬的用户{{username}}</h1>",

templateUrl:"需要打开的页面路径"，
controller:function($scope){
$scope.username="Tom"}
})