官网下载: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的简单使用的更多相关文章

  1. AngularJs最简单解决跨域问题案例

    AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报  分类: javascript(1)  作者:白狼 出处:http://www.mank ...

  2. [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  3. 对AngularJs的简单了解

    一.简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得 ...

  4. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  5. angularjs的简单应用（一）

    AngularJS是为了克服html在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. AngularJS使用了不同的方法,它尝试去 ...

  6. AngularJS作出简单聊天机器人

    简单聊天机器人 很初级的对话框形式.以前做对话框使用js,今天尝试使用AngularJS做出来 这里直接使用自己写的JSON数据. <!DOCTYPE html> <html lan ...

  7. AngularJS 实现简单购物车

    使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用 ...

  8. Angularjs实现简单分页

    一个后台中总需要一款分页,那我为了自己方便使用,实现如下效果 我把这个组件命名为tm.pagination,原因是因为起名真的太难起了.而且我网名也叫天名, TM就这样了吧.github地址https ...

  9. AngularJS实现简单的分页功能

    本篇文章由:http://xinpure.com/angularjs-simple-paging-functionality/ 初学 AngularJS, 尝试着写一些小功能 代码逻辑写得略粗糙,仅仅 ...

随机推荐

  1. bzoj2330: [SCOI2011]糖果

    2330: [SCOI2011]糖果 Time Limit: 10 Sec Memory Limit: 128 MB Description 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友 ...

  2. python中使用heapq查看最大与最小的N个元素列表

    怎么从一个集合中获取最大或最小的N个元素列表? heapq模块有两个函数:nlargest() 和 nsmallest() 可以完美解决这个问题. In [39]: import heapq In [ ...

  3. .gitignore过滤个人配置

    git还是一个很好使用的版本工具.所以用eclipse做自己的小玩意儿,在多台电脑之间同步的时候我经常会使用它.. 但是有个问题..不同电脑的eclipse的个人配置稍微有那么一点点的不同..比如有几 ...

  4. volatile关键字 学习记录1

    虽然已经工作了半年了...虽然一直是在做web开发....但是平时一直很少使用多线程..... 然后最近一直在看相关知识..所以就有了这篇文章 用例子来说明问题吧 public class Volat ...

  5. Xcode6新特性(1)-删除Main.storyboard

    当新建完一个空项目的时候,Xcode会自动创建一个Main.storyboard的空文件,如果不需要,可以将其删除.但是如果删除,再次运行程序,程序会报错,提示找不到Main.storyboard文件 ...

  6. 没有素描色彩基础适合学习UI吗，如果可以，该怎么学？

      文章背景,来自[ UI设计交流群 - 92588284 ]的一次探讨,由于个人视野有限,个中观点有失狭隘,仅供参考,欢迎拍砖: 问题一:一个朋友想学UI设计,没有任何基础的,也没有美术功底,想问问 ...

  7. HDU 1859

    #include <iostream> #include <cstdio> #include <algorithm> #include <vector> ...

  8. CJCMS系列--demo代码篇

    CJCMS之前写了不多的文章,但是一直没有上代码,也许代码写得很乱很差,但是我觉得总得有个开始,持续改进.作为一个喜欢分享的程序员,我决定分享一下. 前面文章中的结构比较全,而此次我给出的demo,没 ...

  9. PL/SQL Developer不配置TNS直接登录

    如果只是临时登录,就没必要去配置一个TNS了,Database那里直接输入<IP>:<PORT>/<服务器SERVER_NAME> EBS的直接登录: http:/ ...

  10. MySQL报错：Got error 28 from storage engine

    今天碰到数据库出错: Got error 28 from storage engine 查了一下,数据库文件所在的盘应该没事,应该是数据库用的临时目录空间不够 问题原因: 磁盘临时空间不够导致. 解决 ...