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 controller */

angular.module(‘mainApp‘, [‘ngRoute‘])

  .config([‘$routeProvider‘, function ($routeProvider) {

    $routeProvider

      .when(‘/‘, {

        template: "这是直接显示内容"

      })

      .when(‘/templet‘, {

        templateUrl: "templet.htm"

      });
  }]);

</script>

</body>

</html>

时间: 2024-07-30 10:22:31

AngularJS的简单使用的相关文章

用angularjs做简单的tab切换

用angularjs做简单的tab切换: 页面部分 <div> <div id="tabs" ng-controller="TabsCtrl"> <ul> <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.t

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

MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage 布局页的引用 <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script&g

对AngularJs的简单了解

一.简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足: 类库 - 类库是一些函数的集合,它能帮助你写WEB应用.起主导作用的是你的代码,由你来决定何时使用类库.类库有:jQuery等 框架 - 框架是一种特殊的.已经实现了的WEB应用,你只需要对它填充

Angularjs实现简单分页

一个后台中总需要一款分页,那我为了自己方便使用,实现如下效果 我把这个组件命名为tm.pagination,原因是因为起名真的太难起了.而且我网名也叫天名, TM就这样了吧.github地址https://github.com/miaoyaoyao/AngularJs-UI 分页在线查看 点击预览 http://demo.miaoyueyue.com/js/ng/AngularJs-UI/demo/pagination.html 分页兼容性 对不起,我不会去测试老掉牙的ie8浏览器.目前测试了i

AngularJS 实现简单购物车

使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性. 先看看界面: 点击+-操作和删除: 这些全部只需要操作数据源就行,不需要关注界面. 实现过程: 一.使用任何语言创建一个服务端: public class ShoppingCar { public string Title { get; set; } public decimal UnitPrice { get; set; } public int Count { get; set; } } publ

angularJS搭建简单应用程序的基本架构分析

本文以一个基于angularJS框架的简单应用分析angularJS应用的基本架构 1.理解几个基本概念 1.1 angularJS控制器 对于刚入门的童鞋来说,提到控制器可能想到了就是电器上的一些开关或者控制设备等,实际上,在JavaScript编程中也有控制器这一概念,angularJS控制器(以下简称控制器)指的是附加在文档对象模型(DOM)节点上的函数,用来驱动应用程序的逻辑.通俗的说就是把一部分的JavaScript功能(方法)封装在一个js文件中,在html文件中进行调用来实现一些功

关于angularjs的简单使用

前言angularjs无疑是一款实现前后端分离js库,利用mvc的思想进行,它的使用也是很简单的. 下面我就简单的介绍一下平时我们用的最多的表格和导航. 1.在页面的开始引用angularjs库. 2.在一个页面中会有地方运用到angularjs,那么在body就开始调用angularjs的必要的东西ng-app="myApp" ng-controller="myCtrl" 3.angularjs所要交互的数据都是用{{}}包起来的,比如说,test这个数据是要进行

AngularJS实现简单的分页功能

本篇文章由:http://xinpure.com/angularjs-simple-paging-functionality/ 初学 AngularJS, 尝试着写一些小功能 代码逻辑写得略粗糙,仅仅只是实现了简单的分页功能,使用 AngularJS 尝尝鲜. AngularJS Code (Users.js) var Users = angular.module('Users', []); Users.controller('UserList', function($scope, $http)

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

我们以两个主域名或者一个主域名+一个二级域名为例,均可演示跨域问题. 客户端 a.com 服务端 b.com或者s.a.com angularJs版本 V1.2.25 准备工作做得很充分嘛,就差把我们的编辑器是subline暴露出来了,这个一般人我是不告诉他滴. 有人嚷嚷了,这问题老早就有了,你现在提出来有啥意义呢?难不成你还能把花忽悠开了?嗯,我还真能把花写开了.看戏吧,我们本篇要上演的是完整版跨域实例. 接下来我们先看客户端是如何请求数据的 注意哦,我们的代码是写在a.com域名下面的 <!