angular-component组件开发实际应用
来源:互联网 发布:ntfs for mac反激活 编辑:程序博客网 时间:2024/06/16 07:26
常规网页开发时,网页的结构大概是什么样的?
上中下、左中右、上下、左右
上中下结构:上、下结构保持不变,中间部分内容发生变化
组件化:将页面中可以重复使用的标签封装成一个组件,方便这一部分UI重复使用
类似于JS中的函数,封装了一部分处理代码,通过函数调用就可以重复使用这些代码
首页:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/lib/angular/angular.min.js"></script>
引入angular
<script src="js/app/bottomnav/bottomnav.js"></script>
引入自定义js
</head>
<body>
<bottom-Nav></bottom-Nav>
<pageslide></pageslide>
如果自定义控制器命名遵循的驼峰式命名法:
bottomNav引用到html页面,为<bottom-Nav></bottom-Nav>
</body>
</html>
js链接页:
var app = angular.module("myApp", []);
app.component("bottomNav",{
templateUrl:"js/app/bottomnav/bottomnav.html",
controller:function($scope){
}
});
app.component("pageslide", {
template:"<h2>这是一个侧边栏导航</h2>"
});
html连接页:
<style type="text/css">
.div{
自定义样式
}
</style>
<div class="div">
<p>
style样式和js样式一般写在一个页面方便引用
组件化开发一般越细分,可重复使用的性能越强,
一定要把自己写的js代码放在引用的angular.js的链接下面
</p>
</div>
<script>
$("div").click()
</script>
- angular-component组件开发实际应用
- Component Development (组件开发)
- highcharts 实际开发应用
- angular js开发的理论和实际开发
- Asp-Email组件的实际应用
- Simile widgets时间轴组件实际应用
- Joomla扩展组件开发文档(component)
- 在angular应用中使用HTML组件
- Spring AOP实际开发应用
- 组件 - Component
- Angular开发(七)-关于组件的生命周期
- Angular组件
- Angular 组件
- angular组件
- Tigase开发笔记4:Tigase Component组件开发
- UML在实际开发中的应用
- javap 如何应用在实际开发中
- C#串口操作实际应用开发详解
- linux下ftp服务器的简单的搭建
- java中请给出UDP的DatagramSocket通信的例子?
- Markdown编辑器一览大全,总有一款适合你
- SeleniumWebDriverAPI-1
- JAVA面对对象
- angular-component组件开发实际应用
- 函数传值还是传指的问题案例
- 三范式
- 803E
- 解压文件时处理前13个字节
- Maven
- 3.1 Linux中的文件IO (1、2节)
- VI常用命令
- 【Bzoj1029】建筑抢修