淺談angularJs
在家都知道，angular 能夠實現雙項數據綁定,其中它的佔位符是{{}},他是是MVC數據分離，javascript
首先要在<html>或<body>中建一個<body ng-app="">
<p>個人第一個表達式: {{ 5 + 5 }}</p>
</body>css
ng-app 指令用於告訴 AngularJS 應用當前這個元素是根元素。html
全部 AngularJS 應用都必需要要一個根元素。java
HTML 文檔中只容許有一個 ng-app 指令，若是有多個 ng-app 指令，則只有第一個會被使用。jquery
下面，我來具體用一個書畫的實例來講明一下angular效果，SH首先要在項目的根目錄下建一個index文件夾,<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-sacle=1.0" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
</head>
<body ng-app="myapp">
<div ng-view></div>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-3 col-sm-3 col-xs-3"><a href="#home" class="navbar-link"><img src="images/home.png" class="img-responsive center-block" />首頁 </a></div>
<div class="col-md-3 col-sm-3 col-xs-3"><a href="#" class="navbar-link"><img src="images/tel.png" class="img-responsive center-block" />電話</a></div>
<div class="col-md-3 col-sm-3 col-xs-3"><a href="#contact" class="navbar-link"><img src="images/map.png" class="img-responsive center-block" />聯繫咱們</a></div>
<div class="col-md-3 col-sm-3 col-xs-3"><a href="#about" class="navbar-link"><img src="images/guestbook.png" class="img-responsive center-block" />關於咱們</a></div>
</div>
</div>
</nav>
<div style="padding:50px;"></div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script>
var app=angular.module('myapp',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/home',{
templateUrl:'view/home.html',
controller:'indexController'
})
.when('/contact',{
templateUrl:'view/contact.html',
controller:''
})
.when('/about',{
templateUrl:'view/about.html',
controller:'aboutController'
})
.otherwise({redirectTo:'/home'})
}])
</script>
<script src="controller/indexController.js"></script>
<script src="controller/aboutController.js"></script>
</body>
</html>json
而後要在view文件夾下面要建一個about子頁面:<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-sacle=1.0" />
<title></title>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="col-md-2 col-md-push-5">
<ul class="nav navbar-nav" >
<li class="active dropdown">
<a href="javascript:;" data-toggle="dropdown" >關於咱們 <span class="caret"></span></a>
<ul class="dropdown-menu nav nav-tabs" id="list">
<li><a href="#">項目1</a></li>
<li><a href="#">項目2</a></li>
<li><a href="#">項目1</a></li>
<li><a href="#">項目2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="col-md-6" ng-controller="aboutController" ng-repeat="pencraft in subPencraft" >
<div class="thumbnail text-center">
<img src={{pencraft.img_about}} />
<h4>{{pencraft.tit_about}}</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<button class="form-control"> <img src="images/top.png"/> 回頂部</button>
</div>
</div>
</div>
<div class="container text-center">
<p> </p>
<img src="images/zw.gif" /><img src="images/english.gif" />
<p>xxx新聞中心 版權全部</p>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
</script>
</body>
</html>bootstrap
還要建一個聯繫個人子頁面:<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-sacle=1.0" />
<title></title>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
</head>
<body>
<div class="container">
<div class="row well">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h2>聯繫咱們</h2>
<p>電話：010-88888888</p>
<p>手機：13588888888</p>
<p>Email：12345@qq.com</p>
<p>地址：北京市海淀區學院裏春天花園8棟906</p>
<textarea class="form-control" rows="9"></textarea>
</div>
</div>
<button class="form-control"> <img src="images/top.png"/> 回頂部</button>
<div class="text-center">
<p> </p>
<img src="images/zw.gif" /><img src="images/english.gif" />
<p>xxx新聞中心 版權全部</p>
</div>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>數組
在項目新建一個controller文件夾，新建一個aboutController.js文件夾app.controller("aboutController",function($scope){
$scope.subPencraft=[
{"img_about":"images/wenhua.png","tit_about":"天道酬勤"},
{"img_about":"images/sp.png","tit_about":"宣傳視頻"},
]
})app
還要建一個contactController.js文件夾app.controller("arryController",function($scope){
$scope.imga=[
{"img_about":"images/15_l.jpg","about":"關於咱們"},
{"img_about":"images/20_l.jpg","about":"新聞資訊"},
{"img_about":"images/15_l.jpg","about":"關於咱們"},
{"img_about":"images/20_l.jpg","about":"新聞資訊"},
{"img_about":"images/15_l.jpg","about":"關於咱們"},
{"img_about":"images/20_l.jpg","about":"新聞資訊"},
{"img_about":"images/15_l.jpg","about":"關於咱們"},
{"img_about":"images/20_l.jpg","about":"新聞資訊"},
]
})ide
還有iindexController.js文件夾:app.controller('indexController',function($scope){
$scope.about='關於咱們'
$scope.img_about='images/15_l.jpg'
$scope.news='新聞資訊'
$scope.img_news='images/20_l.jpg'
$scope.writings='做品展現'
$scope.img_writings='images/23.jpg'
$scope.download='資料下載'
$scope.img_download='images/30.jpg'
$scope.employ='人才招聘'
$scope.img_employ='images/8.jpg'
$scope.messages='在線留言'
$scope.img_messages='images/9.jpg'
$scope.contact='聯繫咱們'
$scope.img_contact='images/31.jpg'
$scope.dial='一鍵撥號'
$scope.img_dial='images/dial.jpg'
})
下面還有一種是肯德基的實例:<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
</head>
<body ng-app="myapp">
<div ng-view></div>
<div class="container">
<div class="row navbar-fixed-bottom">
<div class="col-xs-3">
<a href="#pic/0">
<img src="images/breakfast_a.png" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#pic/1">
<img src="images/lunch_a.png" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#pic/2">
<img src="images/dinner_a.png" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#pic/3">
<img src="images/24h_a.png" class="img-responsive">
</a>
</div>
</div>
</div>
</body>
<script>
var app=angular.module('myapp',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/pic/:id',{templateUrl:'view/home.html',controller:'home'})
.otherwise({redirectTo:'/pic/0'})
}])
</script>
<script src="controller/home.js"></script>
</html>
而後在view文件夾中創建一個home.html文件夾。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container" style="background-image:url(images/bk.png)">
<div class="row">
<div class="col-xs-6" ng-repeat="img in imga">
<img src="{{img.pic}}">
</div>
</div>
</div>
</body>
</html>
在項目中創建一個controller文件夾裏面再建一個home.js內容是app.controller('home',function($scope,$http,$routeParams){
$http({
method:'GET',
url:'model/data.json'
}).success(function(data,status,header,config){
$scope.imga=data[parseInt($routeParams.id)]
}).error(function(status){
});
});
而後再建一個model文件夾，創建一個data.json文件夾，裏面寫二維數組[
[
{"pic":"images/b_1.png"},
{"pic":"images/b_1.png"},
{"pic":"images/b_1.png"},
{"pic":"images/b_1.png"},
{"pic":"images/b_1.png"},
{"pic":"images/b_1.png"}
],
[
{"pic":"images/l_1.png"},
{"pic":"images/l_1.png"},
{"pic":"images/l_1.png"},
{"pic":"images/l_1.png"},
{"pic":"images/l_1.png"},
{"pic":"images/l_1.png"}
],
[
{"pic":"images/d_1.png"},
{"pic":"images/d_1.png"},
{"pic":"images/d_1.png"},
{"pic":"images/d_1.png"},
{"pic":"images/d_1.png"},
{"pic":"images/d_1.png"}
],
[
{"pic":"images/h_1.png"},
{"pic":"images/h_1.png"},
{"pic":"images/h_1.png"},
{"pic":"images/h_1.png"},
{"pic":"images/h_1.png"},
{"pic":"images/h_1.png"}
]
]
這樣一個肯德基的MVC數據分離的效果就出來了。以上就是我對anjular的淺顯的理解，謝謝。
- 1. 淺談AngularJS模板
- 2. 淺談AngularJS中使用$resource
- 3. 淺談AngularJS的$interpolate服務 1
- 4. 淺談AngularJS中的$parse和$eval
- 5. 淺談Angularjs的一些優點
- 6. 淺談angular2與angularJS的區別
- 7. 淺談AngularJS的$filter服務和建立AngularJS的filter 1
- 8. angularjs雜談
- 9. 談談angularjs中$watch,$apply,$digest
- 10. 淺淺談Redux
- 更多相關文章...
- • NoSQL和傳統數據庫有什麼區別？NoSQL能取代傳統數據庫嗎？ - Redis教程
- • ionic 教程 - ionic 教程
- • 漫談MySQL的鎖機制
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
-
每一个你不满意的现在，都有一个你没有努力的曾经。