angularJs 简单实例
来源：互联网 发布：windows xp 64位原版 编辑：程序博客网 时间：2024/06/06 02:46
入口 agtest.html
<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="lib/angular-1.4.0/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-1.4.0/angular-route.js"></script>
<script src="testApp.js"></script>
</head>
<body ng-app="testApp" style="width: 100%;height: 100%;">
<ul>
<li><a href="#a">A</a>
<li><a href="#b">B</a>
</ul>
<div ng-view style="width: 100%;height: 100%;">
</div>
</body>
</html>
testApp.js
/**获得全局app对象*/
var testApp = angular.module('testApp', [ 'ngRoute']);
/**配置路由器*/
testApp.config(function($routeProvider,$locationProvider,$httpProvider) {
$routeProvider
.when('/a', {
templateUrl : 'a.html',
controller : 'AController'
})
.when('/b', {
templateUrl : 'b.html',
controller : 'BController'
})
});
testApp.controller('AController', function($scope) {
$scope.info="Page A";
});
testApp.controller('BController', function($scope) {
$scope.info="Page B";
});
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Insert title here</title>
</head>
<body style="width: 100%;height: 100%;">
<label style="color: #f00;">{{info}}</label>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Insert title here</title>
</head>
<body style="width: 100%;height: 100%;color: #f00;" >
<label style="color: #f0f;">{{info}}</label>
</body>
</html>
运行结果：
点击A
点击B
- angularJs 简单实例
- 一个简单的AngularJS实例
- AngularJS系列：1、一个简单的AngularJS实例
- angularJS 实例
- AngularJS $on、$emit和$broadcast简单功能实例
- 关于angularjs复选框的简单应用环境实例
- 【AngularJS】购物车实例
- AngularJS 购物车实例
- angularjs directive 实例 详解
- AngularJS 应用实例
- 【AngularJs】--入门实例
- 【angularJs】--入门实例二
- AngularJs入门实例
- AngularJs directive指令实例
- AngularJs directive-controller实例
- AngularJs directive-link实例
- angularjs之directive实例
- angularjs directive 实例 详解
- “QApplication”: No such file or directory
- Nginx实现七层负载均衡配置指导
- Android Studio 调试技巧
- Java大数处理_用法整理
- Nginx基于TCP的四层负载均衡介绍
- angularJs 简单实例
- Google C++ Style Guide学习心得
- 开源日志系统比较：scribe、chukwa、kafka、flume
- super oj p528
- MMX汇编指令优化
- OSQueue用法
- 关于类中定义的函数与windows API定义的函数名相同的链接问题
- 【VS开发】【C++开发】正确使用auto_ptr智能指针
- select下拉框的使用方案
