浅谈angularJs
在家都知道，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="data: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="data: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="data: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="data: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="data:images/top.png"/> 回顶部</button>
</div>
</div>
</div>
<div class="container text-center">
<p> </p>
<img src="data:images/zw.gif" /><img src="data: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="data:images/top.png"/> 回顶部</button>
<div class="text-center">
<p> </p>
<img src="data:images/zw.gif" /><img src="data: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="data:images/breakfast_a.png" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#pic/1">
<img src="data:images/lunch_a.png" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#pic/2">
<img src="data:images/dinner_a.png" class="img-responsive">
</a>
</div>
<div class="col-xs-3">
<a href="#pic/3">
<img src="data: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的浅显的理解，谢谢。
浅谈angularJs的更多相关文章
- 浅谈AngularJS中的$parse和$eval
AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于Ang ...
- 浅谈AngularJS启动引导过程
我们都知道AngularJS默认会执行app.js来启动整个angular项目,但你知道angular具体执行过程吗? 一.自动引导启动框架 例如我们有如下代码,我们想要完成一个指令功能: <h ...
- 浅谈angularJS指令的属性
restrict – 这个属性用来指定指令在HTML中如何使用(指令的四种表示方式).我们使用 ‘AE’,这个指令可以被当作新的HTML元素或者属性来使用.如果要允许指令被当作class来使用,我们将 ...
- 浅谈AngularJS中的指令和指令间的相互通信
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 浅谈AngularJS的$parse服务
$parse 作用:将一个AngularJS表达式转换成一个函数 Usage$parse(expression) arguments expression:需要被编译的AngularJS语句 retu ...
- 浅谈Angularjs至Angular2后内置指令的变化
一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...
- 浅谈AngularJS中使用$resource
这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了. REST是Representational ...
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
随机推荐
- iOS-UITableView的使用
6.14.1 UITableViewDataSource协议方法初始化数据 //设置组与组之间的间距 self.tableView.sectionHeaderHeight=5;//f ...
- jenkins+sonar发送结果邮件的状态问题修复
在我的这篇博文中:使用jenkins+sonar进行代码扫描,并发送自定义邮件 邮件的配置为默认的$PROJECT_DEFAULT_SUBJECT 所以发送的邮件标题中的状态是jenkins构建的状态 ...
- CEIWEI CheckSum CRC校验精灵v2.1 CRC3/CRC4/CRC5/CRC6/CRC8CRC10/CRC11/CRC16/CRC24/CRC32/CRC40/CRC64/CRC82/Adler32
CEIWEI CheckSum CRC校验精灵 是一款通用的循环冗余校验码CRC(Cyclic Redundancy Check).MD5.SHA1.SHA2.SHA3.HAVAL.SHAKE.TIG ...
- redis 设置后台守护运行的两种方式
第一种:进入src目录,执行 nohup ./redis-server & 第二种:redis.conf==> daemonize=yes,启动redis-server后面加redis. ...
- 电脑磁盘分区助手：DiskGenius磁盘管理与数据恢复软件
百度搜索DiskGenius自行下载
- TCP 客户端编程
1.Qt中TCP客户端编程 对Qt编程而言,网络只是数据传输的通道: Qt提供了QTcpSocket类(封装了TCP协议细节): 将QTcpSocket的对象当做黑盒使用,进行数据首发. 1.1QTc ...
- Seq2Seq模型与注意力机制
Seq2Seq模型 基本原理 核心思想:将一个作为输入的序列映射为一个作为输出的序列 编码输入 解码输出 解码第一步,解码器进入编码器的最终状态,生成第一个输出 以后解码器读入上一步的输出,生成当前步 ...
- [转帖]8个优秀Docker容器监控工具，收藏了
8个优秀Docker容器监控工具,收藏了 Docker是目前使用最广泛的容器之一,但它并不总是像物理硬件一样可见.而使用docker容器监控工具有助于消除这种透明度的缺失.以下介绍8种优秀Docker ...
- IDEA使用 maven 搭建 SSM 框架
文章目录 pom 文件的编写 项目结构 SSM 配置文件的编写 web.xml 的配置 总结 公司有个小的内部使用的软件,让开发,自己选择使用 SSM :因为之前自己学过,本以为一切水到渠成,但是好久 ...
- ThreadLocal内存泄漏真因探究（转）
出处: 链接:https://www.jianshu.com/p/a1cd61fa22da ThreadLocal原理回顾 ThreadLocal的原理:每个Thread内部维护着一个ThreadLo ...