AngularJS的简单使用
官网下载:AngularJS
路由视图需要:Angular-Route.js
基于zepto的轻量级的 JavaScript UI 库: App.js 用于开发跨平台的移动Web应用
<!DOCTYPE html>
<html ng-app='mainApp'>
<head>
<title>简单AngularJS使用</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scalable=1" name="viewport">
</head>
<body>
<ul>
<li><a href="#/">直接显示内容</a></li>
<li><a href="#templet">引用其他页面</a></li>
</ul>
<!-- ng-view 相当于thinkPHP里的 $this->display(); 用来实现页面渲染 -->
<div ng-view></div>
<!-- AngularJS -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script>
/* mainApp route */
angular.module('mainApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
template: '<div class="container"><p><h4>默认根目录页面</h4></p></div>'
})
.when('/templet', { //templet为模板页面调用的ID
templateUrl: "templet.htm"
})
.otherwise({
template: '<div class="container"><p><h4>默认其他页面</h4></p></div>'
});
}]);
</script>
</body>
</html>
AngularJS的简单使用的更多相关文章
- AngularJs最简单解决跨域问题案例
AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报 分类: javascript(1) 作者:白狼 出处:http://www.mank ...
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- 对AngularJs的简单了解
一.简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得 ...
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
- angularjs的简单应用(一)
AngularJS是为了克服html在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. AngularJS使用了不同的方法,它尝试去 ...
- AngularJS作出简单聊天机器人
简单聊天机器人 很初级的对话框形式.以前做对话框使用js,今天尝试使用AngularJS做出来 这里直接使用自己写的JSON数据. <!DOCTYPE html> <html lan ...
- AngularJS 实现简单购物车
使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...
- Angularjs实现简单分页
一个后台中总需要一款分页,那我为了自己方便使用,实现如下效果 我把这个组件命名为tm.pagination,原因是因为起名真的太难起了.而且我网名也叫天名, TM就这样了吧.github地址https ...
- AngularJS实现简单的分页功能
本篇文章由:http://xinpure.com/angularjs-simple-paging-functionality/ 初学 AngularJS, 尝试着写一些小功能 代码逻辑写得略粗糙,仅仅 ...
随机推荐
- The commands of Disk
The commands of Disk fdisk( the disk size is less 2TB) fdisk - partition table manipulator for Linux ...
- JS-自制提速小工具:开发页面时需要按比例计算宽高值的快速计算器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name= ...
- NOIP2016题解
D1T1:把方向和朝向异或一下,在mod n意义下+1s或-1s. #include<cstdio> const int N=1e5+5; int n,m,j,k,v,s[N]; char ...
- Markdown与标记语言
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...
- excellent cushioning and also vitality go back with this boot
The particular manufactured fine mesh higher almost addresses the complete boot. Here is the sort of ...
- 安装PHP sphinx扩展 sphinx-1.1.0/sphinx.c:105:2: error: too few arguments 错误
表现: /home/sphinx-1.1.0/sphinx.c: In function 'php_sphinx_client_read_property':/home/sphinx-1.1.0/sp ...
- webapi6
- MyBatis源码分析(4)—— Cache构建以及应用
@(MyBatis)[Cache] MyBatis源码分析--Cache构建以及应用 SqlSession使用缓存流程 如果开启了二级缓存,而Executor会使用CachingExecutor来装饰 ...
- PHP header函数设置http报文头(设置头部域)
PHP HTTP 简介: HTTP 函数允许您在其他输出被发送之前,对由 Web 服务器发送到浏览器的信息进行操作. PHP 5 HTTP 函数:header() 向客户端发送原始的 HTTP ...
- 总是多次出现 那个同样的 权限错误 _storage_write_error_, 所以一开始就把机器设好setenforce 0
把根目录下的所有文件/目录, 都设为权限777. 好像没有必要把所有的东西, 都设为777, 实际上问题是由selinux引起的, 所以, 只要把相应的目录, 不一定是所有的目录, 只是要写入内容的目 ...