一、概述
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
二、结构
三、css代码
index.css
*{
margin:0;
padding:0;
}
header, footer, section, aside {
border:1px solid red;
margin:10px;
padding:5px;
}
header {
position:fixed;
width:100%;
height:100px;
top:0;
background-color:white;
}
aside,section{
margin-top:130px;
}
footer{
position:fixed;
bottom:0;
width:100%;
background-color:white;
margin-bottom:0;
}
footer li{
list-style-type:none;
}
one.css、two.css、three.css、four.css设置section的颜色分别为red、blue、green、greenyellow
section{
color:red;
}
四、模板页面代码
main.html、one.html、two.html、three.html、four.html代码为
<h3>{{name}}!</h3>
<h3>{{name}}!</h3>
五、js代码
app.js代码
//定义angular 应用模块myapp []当中依赖的模块
var app = angular.module("myapp", ['ngRoute', 'angularCSS']);
//配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
//在ng-view中插入html模版文件
templateUrl: "tpl/main.html",
css: "css/index.css",
controller: "HomeCtrl"
})
.when('/one', {
templateUrl: "tpl/one.html",
css: "css/one.css",
controller: "OneCtrl"
})
.when('/two', {
templateUrl: "tpl/two.html",
css: "css/two.css",
controller: "TwoCtrl"
})
.when('/three', {
templateUrl: "tpl/three.html",
css: "css/three.css",
controller: "ThreeCtrl"
})
.when('/four', {
templateUrl: "tpl/four.html",
css: "css/four.css",
controller: "FourCtrl"
//template:"<h4>tt</h4>"
})
.otherwise("/");
}]);
controller.js代码
//控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象
//在控制器中为name变量赋值
app.controller("HomeCtrl", ['$scope', function ($scope) {
$scope.name = "this is Home Page";
}]);
app.controller("OneCtrl", ['$scope', function ($scope) {
$scope.name = "this is One Page";
}]);
app.controller("TwoCtrl", ['$scope', function ($scope) {
$scope.name = "this is Two Page";
}]);
app.controller("ThreeCtrl", ['$scope', function ($scope) {
$scope.name = "this is Three Page";
}]);
app.controller("FourCtrl", ['$scope', function ($scope) {
$scope.name = "this is Four Page";
}]);
六、页面代码
index_1.html实现pc端页面
<!DOCTYPE html>
<html ng-app="myapp">
<!--angular+flex实现pc端页面-->
<head>
<meta charset="utf-8" />
<title>RouterApp</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<header>
<h3>Header</h3>
<nav style="display: flex;justify-content: space-around;">
<a href="#/">首页</a>
<a href="#/one">ONE</a>
<a href="#/two">TWO</a>
<a href="#/three">THREE</a>
<a href="#/four">FOUR</a>
</nav>
</header>
<div id="content" style="display: flex;justify-content: space-around;">
<aside style="flex-grow: 1;">
<h3>Aside</h3>
<div style="display: flex;flex-direction: column;">
<a href="#/">首页</a>
<a href="#/one">ONE</a>
<a href="#/two">TWO</a>
<a href="#/three">THREE</a>
<a href="#/four">FOUR</a>
</div>
</aside>
<section style="flex-grow: 3;">
<h3>Section</h3>
<div ng-view></div>
</section>
</div>
<footer>
<h3>Footer</h3>
<ul style="display: flex;justify-content: space-around;">
<li>
<a href="#/">首页</a>
</li>
<li>
<a href="#/one">ONE</a>
</li>
<li>
<a href="#/two">TWO</a>
</li>
<li>
<a href="#/three">THREE</a>
</li>
<li>
<a href="#/four">FOUR</a>
</li>
</ul>
</footer>
<script src="lib/angular-1.4.6.min.js"></script>
<script src="lib/angular-1.3.13-route.js"></script>
<script src="lib/angular-css-1.0.8.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/controller.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
index_2.html实现移动端页面
<html ng-app="myapp">
<!--angular+bootstrap框架实现移动端页面-->
<head>
<meta charset="utf-8" />
<title>RouterApp</title>
<link href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<header>
<h3>Header</h3>
<button class="btn btn-success" ng-click="registry()">
<span class="glyphicon glyphicon-apple"></span>注册
</button>
<button class="btn btn-success" ng-click="login()">
<span class="glyphicon glyphicon-user"></span>登陆
</button>
</header>
<section class="">
<h3>Section</h3>
<div ng-view></div>
</section>
<footer style="display: flex;justify-content:space-around;">
<a href="#/" class="btn-lg"><span style="color: red;" class="glyphicon glyphicon-home"></span>首页</a>
<a href="#/one" class="btn-lg"><span style="color: yellow;" class="glyphicon glyphicon-shopping-cart"></span>ONE</a>
<a href="#/two" class="btn-lg"><span style="color: cyan;" class="glyphicon glyphicon-export"></span>TWO</a>
<a href="#/three" class="btn-lg"><span style="color:blue" class="glyphicon glyphicon-book"></span>THREE</a>
<a href="#/four" class="btn-lg"><span style="color: black;" class="glyphicon glyphicon-cloud-upload"></span>FOUR</a>
</footer>
<script src="lib/angular-1.4.6.min.js"></script>
<script src="lib/angular-1.3.13-route.js"></script>
<script src="lib/angular-css-1.0.8.min.js"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="js/controller.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
七、运行效果
index_1.html运行效果：
index_2.html运行效果：
八、源码
gitee源码