angular+angular-routeルーティング+一番上の見出し+左側に3つのハイパーリンク+右クリックで表示したい画像
15828 ワード
/span>html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
header{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
background: blue;
color: #fff;
font-size: 30px;
}
li{
list-style: none;
}
.nav{
float: left;
width: 20%;
}
.nav li{
width: 100px;
height: 70px;
border: 1px solid#eee;
line-height:70px ;
text-align: center;
}
a{
text-decoration: none;
}
.content{
float: left;
}
.news{
background: red;
}
.content{
width: 70%;
}
.pic li{
float: left;
margin: 10px;
}
style>
<script src="angular/angular.js">script>
<script src="angular/angular-route.js">script>
<script>
var myapp=angular.module("myapp",["ngRoute"]);
myapp.config(function($routeProvider){
console.log($routeProvider);
$routeProvider.when("/home",{
templateUrl:"pages/home.html",
controller:"homeCtrl"
}).when("/detail",{
templateUrl:"pages/detail.html",
controller:"detailCtrl"
}).when("/news",{
templateUrl:"pages/news.html"
}).when("/error",{
template:"
"
}).otherwise({
redirectTo:"/home"
});
/* （ ）*/
/*otherwise("/error")*/
});
myapp.controller("homeCtrl",function($scope,$http){
$scope.name=" ";
$http({
url:"package.json"
}).then(function (data) {
$scope.data=data.data;
})
});
myapp.controller("detailCtrl",function($scope,$timeout){
$scope.n=0;
$timeout(function(){
$scope.n++;
},2000)
})
script>
head>
<body ng-app="myapp">
<header>CC header>
<div class="box">
<ul class="nav">
<li><a href="#home"> a>li>
<li><a href="#detail"> a>li>
<li><a href="#news"> a>li>
ul>
<div ng-view class="content">
div>
div>
body>
html>
home.html<h2>{{name}}h2>
<ul class="pic">
<li ng-repeat="item in data">
<h2>{{item.title}}h2>
<img ng-src="{{item.img}}">
li>
ul>detail.html<p>{{n}}p>news.html<h2 class="news"> h2>