angular是什么？
查看angular简介请访问：点此处访问
怎么下载源文件
下载地址：点击下载
怎么讲？
我打算以实例为导向，讲解各个指令，最后合并所有，做出来一个简单的单页面应用
今天的实例是一个简单的登录功能
先看运行效果
接下来开始 准备结构
//页面头部设置
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<head>
<title>第一个angular页面</title>
//body 部分代码
<div>
<div >
<h1>登录</h1>
<form>
<p><input type="text" placeholder="用户名"/></p>
<p><input type="password" placeholder="密码"/></p>
<p><input type="button" value="登录" /></p>
</form>
<div class="text">
<p>你输入的用户名:</p>
<p>密码：</p>
</div>
</div>
样式
<style>
*{
padding:0px;
margin:0px;
font-size:10px;
font-family:Arial, 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB';
}
input{
font-size:1.4rem;
border:1px solid #ededed;
padding:5px 10px;
width:100%;
box-sizing:border-box;
}
form{
padding:20px 10px;
}
h1{
font-size:1.8rem;
text-align:center;
padding:30px;
color:#ff4354;
}
form p{
padding:5px 0px;
}
form input[type=button]{
padding:10px 0px;
border:1px solid #ff4354;
background-color: #ff4354;
color: #ffffff;
border-radius: 5px;
}
.text p{
font-size: 1.4rem;
padding: 5px 10px;
}
</style>
引入angularJS
<script src="angular-1.3.0.js"></script>
告诉angular他的作用域是什么
什么是作用域，就是告诉它，让它只在某个区域起作用
怎么告诉？用指令ng-app
<!--示例代码-->
<div ng-app="" ng-init="text='World'">
<div>angular运行的时候会编译这部分</div>
<div>Hello {{text}}</div>
</div>
<div class="ignore">
angular不会管这部分Hello {{text}}
</div>
<!--运行结果-->
<div ng-app="" ng-init="text='World'" class="ng-scope">
<div>angular运行的时候会编译这部分</div>
<div class="ng-binding">Hello World</div>
</div>
<div class="ignore">
angular不会管这部分Hello {{text}}
</div>
//说明：
1. ng-app功能： 告诉angular 它的作用域
2. ng-app作用域： 都知道div是双标签，很明显 ng-app 的作用域从节点开始到节点结束，.ignore 没在ng-app 里面所以angular 不管
3、ng-app 适用标签， html div p 等等都是可以的，因为我们有时候需要整个页面都被angular编译，有时候只是需要局部是
4、ng-init 功能 定义这个作用域里面初始时候的数据 例如例子中 初始的时候设置 *text='World'*，就是在作用域里面定义了一个变量text值得World
5、怎么调用变量？ 用插件表达式来调用，实例见上边代码 {{text}}，即双大括号里面写入变量名。
6、我想在变量前面加上某个字符串怎么办？你可以这么写 {{"嘿嘿"+text}}；这么写 {{1+2}} ; 这不就是js表达式吗？ Binggo ！！！
7、还有另外一种调用方式，不过这种调用方式依赖标签，如【即ng-bind 指令 的 =号后面写上要绑定的变量名】
<span ng-bind="text"></span>
那么我们现在告诉angular它的作用域
代码如下
<div ng-app="">
<div >
<h1>登录</h1>
<form>
<p><input type="text" placeholder="用户名"/></p>
<p><input type="password" placeholder="密码"/></p>
<p><input type="button" value="登录" /></p>
</form>
<div class="text">
<p>你输入的用户名:</p>
<p>密码：</p>
</div>
</div>
既然页面已经做好了，我们就来处理用户的输入，完成功能吧
代码如下：
<div ng-app="">
<div ng-controller="myFirstCtrl">
<h1>登录</h1>
<form>
<p><input type="text" ng-model="username" placeholder="用户名"/></p>
<p><input type="password" ng-model="userpwd" placeholder="密码"/></p>
<p><input type="button" ng-click="login()" value="登录" /></p>
</form>
<div class="text">
<p>你输入的用户名:{{username}}</p>
<p>密码：{{userpwd}}</p>
</div>
</div>
相关 JS
<script>
function myFirstCtrl($scope){
$scope.username="";
$scope.userpwd="";
$scope.login=function(){
if($scope.username==""||$scope.userpwd==""){
alert("信息未输入完整");
}else{
console.log("去登陆");
}
}
}
</script>
//说明
1、ng-controller 是做什么？ ng-controller 是控制的某个作用域部分的
2、他跟ng-app什么关系？ ng-app是控制整个app的，整个app可以由多个ng-controller组成
3、怎么创建一个控制器？ 写一个 function 即可 函数名就是控制器名
4、$scope是个什么鬼？ $scope是作用域对象
5、$scope做什么用？ 你还记得 ng-init中定义的 text 变量吗？它实际上就是定义在$scope底下，
这样控制器的作用域里面就可以通过插件表达式调用到它，
实际上就相当于 $scope.text="World";
6、$scope 下边可以写方法吗？ 当然可以，你直接就像平常写js哪样，直接给$scope这个对象属性赋值为函数即可
$scope.func=function(){
console.log("我是个函数");
}
7、定义函数我怎么调用啊？ 用事件绑定指令！ng-[我是事件名字]
实例：给元素增加单击事件
ng-click="func()"
8、ng-model 是啥？ 这个指令告诉Angular 等号后边的这个变量需要双向同步
9、什么是双向同步？ 我的理解是你再输入框里面输入的时候，
你输入什么angular就把这个值取到更新到$scope的对应属性上去；同样你再程序里面改动这个属性的时候也会直接反映到页面上。
OK大功告成！！！
网友评论