浅谈angularJs
2018-06-24 00:25:41来源：未知 阅读 ()
在家都知道，angular 可以实现双项数据绑定,其中它的占位符是{{}},他是是MVC数据分离，
首先要在<html>或<body>中建一个<body ng-app="">
<p>我的第一个表达式: {{ 5 + 5
}}</p>
</body>
ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。
所有 AngularJS 应用都必须要要一个根元素。
HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。
下面，我来具体用一个书画的实例来说明一下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>
然后要在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>
还要建一个联系我的子页面:<!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":"宣传视频"},
]
})
还要建一个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":"新闻资讯"},
]
})
还有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的浅显的理解，谢谢。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：【CSS】过渡、动画和变换
下一篇：img与父元素的间隙解决
- 浅谈Vue下的components模板 2019-11-27
- 从浏览器渲染原理，浅谈回流重绘与性能优化 2019-11-01
- 使用angularJS设置复选框的回显状态 2019-08-14
- #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST 2019-01-21
- 浅谈css中的盒模型（框模型） 2019-01-15
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
