angularJs 简单实例
2017-01-22 14:44
274 查看
入口 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
<!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实例
- AngularJS 依赖注入详解和简单实例
- 关于angularjs复选框的简单应用环境实例
- AngularJS 双向数据绑定详解简单实例
- AngularJS 过滤器的简单实例
- AngularJS基础 ng-open 指令简单实例
- AngularJS 简单应用实例
- AngularJS系列：1、一个简单的AngularJS实例
- AngularJS 路由详解和简单实例
- Angularjs中ng-repeat的简单实例
- 事件机制的简单实例
- RMI、CORBA、IIOP简单实例－－1. RMI
- 一个简单在jsp页面中连接sqlserver数据库的小实例
- 史上最简单的struts+spring+hibernate配置实例
- [WEB开发] 基于XMLHTTP的简单实例
- 一些C#的简单实例
- 2. 一个简单的Servlet--产生存文本下面是一个产生存文本的简单servlet的实例
- Linux C实现MySql数据库操作简单实例