AngularJs的语法介绍
2016-06-06 00:46
549 查看
AngularJs的语法介绍
实例一：简单的表达式实例二：时间
<!doctype html>
<html ng-app="AngularDemo" ng-controller="AnagularCtrl" ng-init="AccountId=1;AccountName='Tom';Location='CHINA'">
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码),utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素-->
<title>AngularJs的语法介绍!</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
<link type="text/css" href="iconfont/iconfont.css" rel="stylesheet" />
<link type="text/css" href="css/matrix.css" rel="stylesheet" />
<!--css,js-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
font-family: "微软雅黑";
background: linear-gradient(90deg, #1d3746, #4D3648);
height: 2205px;
}
a {
text-decoration: none;
}
.wrapper {
width: 500px;
height: 500px;
margin: 100px auto;
}
#showButton {
display: inline-block;
padding: 8px 69px;
background: #C2A84A;
color: #fff;
font-size: 12px;
border-radius: 5px;
}
#showButton:hover {
background: #EDE176;
color: #000;
transition: all 0.3s linear;
}
#showButton2 {
display: inline-block;
padding: 8px 69px;
background: #C2A84A;
color: #fff;
font-size: 12px;
border-radius: 5px;
}
#showButton2:hover {
background: #EDE176;
color: #000;
transition: all 0.3s linear;
}
input[type="text"] {
background: #252525;
outline: none;
border-radius: 5px;
border: 1px solid #252525;
padding: 6px 18px;
}
ul li {
margin: 10px 0px;
color: #EDE176;
list-style: none;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li>直接输出在html标签中定义的ng-init的变量的值</li>
<li>{{Now}}</li>
<li>{{AccountId +','+AccountName+','+Location}}</li>
<li>{{AccountId}}</li>
<li>{{AccountName}}</li>
<li>{{Location}}</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/angular-1.0.1.min.js"></script>
<script type="text/javascript">
// 定义一个Angular的模块
var app = angular.module("AngularDemo",[]);
// 定义一个Angular的控制器
app.controller("AnagularCtrl",function($scope){
var now = new Date();
$scope.Now = now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
});
</script>
</body>
</html>
实例三：数组
<!doctype html>
<html ng-app="AngularDemo" ng-controller="AnagularCtrl" ng-init="AccountId=1;AccountName='Tom';Location='CHINA';Week=['Mon','Tue','Wen','Thu','Fri','Sat','Sun']">
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码),utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素-->
<title>AngularJs的语法介绍!</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
<link type="text/css" href="iconfont/iconfont.css" rel="stylesheet" />
<link type="text/css" href="css/matrix.css" rel="stylesheet" />
<!--css,js-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 15px;
font-family: "微软雅黑";
background: linear-gradient(90deg, #1d3746, #4D3648);
height: 2205px;
}
a {
text-decoration: none;
}
.wrapper {
width: 500px;
height: 500px;
margin: 100px auto;
}
#showButton {
display: inline-block;
padding: 8px 69px;
background: #C2A84A;
color: #fff;
font-size: 12px;
border-radius: 5px;
}
#showButton:hover {
background: #EDE176;
color: #000;
transition: all 0.3s linear;
}
#showButton2 {
display: inline-block;
padding: 8px 69px;
background: #C2A84A;
color: #fff;
font-size: 12px;
border-radius: 5px;
}
#showButton2:hover {
background: #EDE176;
color: #000;
transition: all 0.3s linear;
}
input[type="text"] {
background: #252525;
outline: none;
border-radius: 5px;
border: 1px solid #252525;
padding: 6px 18px;
}
ul li {
margin: 10px 0px;
color: #EDE176;
list-style: none;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li>直接输出在html标签中定义的ng-init的变量的值</li>
<li>{{Now}}</li>
<li>输出定义的数组</li>
<li style="color:#c30">{{Week[0]+','+Week[1]}}</li>
<li>{{AccountId +','+AccountName+','+Location}}</li>
<li>{{AccountId}}</li>
<li>{{AccountName}}</li>
<li>{{Location}}</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/angular-1.0.1.min.js"></script>
<script type="text/javascript">
// 定义一个Angular的模块
var app = angular.module("AngularDemo",[]);
// 定义一个Angular的控制器
app.controller("AnagularCtrl",function($scope){
var now = new Date();
$scope.Now = now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
});
</script>
</body>
</html>
实例四：对象
demo-v1.0.html
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码),utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素-->
<title>AngularJs的语法介绍!</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
<link type="text/css" href="iconfont/iconfont.css" rel="stylesheet" />
<link type="text/css" href="css/matrix.css" rel="stylesheet" />
<!--css,js-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 15px;
font-family: "微软雅黑";
background: linear-gradient(90deg, #1d3746, #4D3648);
height: 2205px;
}
a {
text-decoration: none;
}
.wrapper {
width: 500px;
height: 500px;
margin: 100px auto;
}
#showButton {
display: inline-block;
padding: 8px 69px;
background: #C2A84A;
color: #fff;
font-size: 12px;
border-radius: 5px;
}
#showButton:hover {
background: #EDE176;
color: #000;
transition: all 0.3s linear;
}
#showButton2 {
display: inline-block;
padding: 8px 69px;
background: #C2A84A;
color: #fff;
font-size: 12px;
border-radius: 5px;
}
#showButton2:hover {
background: #EDE176;
color: #000;
transition: all 0.3s linear;
}
input[type="text"] {
background: #252525;
outline: none;
border-radius: 5px;
border: 1px solid #252525;
padding: 6px 18px;
}
ul li {
margin: 10px 0px;
color: #EDE176;
list-style: none;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li>直接输出在html标签中定义的ng-init的变量的值</li>
<li>{{Now}}</li>
<li>输出定义的对象</li>
<li>{{ AccountInfo.AccountId }}</li>
<li>{{ AccountInfo.AccountName }}</li>
<li>{{ AccountInfo.Location }}</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/angular-1.0.1.min.js"></script>
<script type="text/javascript">
// 定义一个Angular的模块
var app = angular.module("AngularDemo",[]);
// 定义一个Angular的控制器
app.controller("AnagularCtrl",function($scope){
var now = new Date();
$scope.Now = now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS基础教程之简单介绍
- AngularJS中处理多个promise的方式
- AngularJS入门（用ng-repeat指令实现循环输出
- angularJS 中$attrs方法使用指南
- AngularJS实现textarea记录只能输入规定数量的字符并显示
- 深入浅析AngularJS和DataModel
- 简述AngularJS相关的一些编程思想
- 不能不知道的10个angularjs英文学习网站
- AngularJS中的$watch()，$digest()和$apply()区分
- Angularjs中的事件广播 ―全面解析$broadcast,$emit,$on
- AngularJS的一些基本样式初窥
- 简单讲解AngularJS的Routing路由的定义与使用
- 创建你的第一个AngularJS应用的方法
- Angularjs过滤器使用详解
- 详解AngularJS中的作用域
- Angular发布1.5正式版，专注于向Angular 2的过渡
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- AngularJS 2.0新特性有哪些
- AngualrJS中的Directive制作一个菜单