AngularJS入门



AngularJs的简介


1.它是一个Js的框架;


2.它现在有两个版本,第二个版本和第一个版本区别很大更侧重于适应移动端;


3.它是一个MVVM框架,可以让你更专注于页面逻辑开发,用数据驱动表现;


4.它拥有路由、模块和控制器,更方便的开发单页应用SPA



最熟悉的实例:HelloWorld


1.传统的做法;


2.使用 AngularJs的做法


实例代码


<!doctype html>
<html ng-app >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 1
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  </style>
 
  </head>
 
  <body>
  
<b>AngularJs模式</b>
<ul>
<li>姓:<input type="text" ng-model="xing" /></li>
<li>名:<input type="text" ng-model="ming" /></li>
<li>Hello <b >{{xing || ''}} {{ming || ' ' }}</b></li>
<li><a href="#" >输出姓名</a></li>
</ul>
  
 
 
<b>传统模式</b>
<ul>
<li>姓:<input type="text" id="xingInput" /></li>
<li>名:<input type="text" id="mingInput" /></li>
<li>Hello <b id="nameView"></b></li>
<li><a href="#" id="showButton">输出姓名</a></li>
</ul>
 
 
<script src="scripts/angular-1.0.1.min.js"></script>
<script>
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;
return false;
}
 
</script>
 
  </body>
</html>


执行结果:


js1.png



作业


使用 AngularJs模式,为“输出姓名”按钮绑定事情。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

您有狂欢嘉年华礼包未领取

客服热线 400-862-8862

回到顶部