您的位置：首页 > Web前端 > AngularJS

AngularJs-HelloWorld

2016-05-26 07:21 681 查看

AngularJs的简介和Hello World

AngularJs的简介

1、它是一个Js的框架
2、它现在有两个版本，第二个版本和第一个版本区别很大更侧重与适应移动端
3、它是一个MVVM框架，可以让你更专注于页面逻辑开发，用户数据驱动表现
4、它拥有路由、模块和控制器，更方便的开发单页应用SPA

Demo_v1.html

<!doctype html>
<html ng-app>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码),utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素-->
<title>AngularJS HelloWorld!</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;
}
.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;
}
</style>
</head>
<body>

<div class="wrapper">
<h1>AnagularJs模式</h1>
<ul>
<li>姓：<input type="text"  ng-model="xing"/></li>
<li>名：<input type="text"  ng-model="ming"/></li>
<li><b>{{xing || ''}} {{ming || ' ' }}</b></li>
<li><a href="#" id="showButton2">输出姓名</a></li>
</ul>
<h1>传统模式</h1>
<ul>
<li>姓：<input type="text" id="xingInput" /></li>
<li>名：<input type="text" id="mingInput" /></li>
<li><b id="nameView">Hello</b></li>
<li><a href="#" id="showButton">输出姓名</a></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">
var xing = document.getElementById("xingInput");
var ming = document.getElementById("mingInput");

var showButton = document.getElementById("showButton");
showButton.onclick = function(){
var name = xing.value + " " + ming.value;
var nameView = document.getElementById("nameView");
nameView.innerHTML = name;
// $("#nameView").text(name);
return false;
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs 框架

相关文章推荐

新的分享

章节导航