时间戳

首页 > 技术文章 > AngularJs基本使用

AngularJs基本使用

LandMine 2016-05-13 09:21 原文

使用前准备

引包

由于需要渲染页面，所以最好在body之前引入angular包

<script src="js/angular.js"></script>

声明模块

用js声明一个模块

var app = angular.module("app",[]);

用ng-app指令声明模块的使用范围

<body ng-app="app">

声明控制器

为模块声明一个控制器

app.controller("myTest",function($scope){}

用ng-controller指令使用相应控制器

<div ng-controller="myTest">

简单的使用

数据相关

  • 数据绑定：在标签添加`ng-bind=""`指令   <input type="text" ng-model="name"/>
  • 表单控件双向绑定:在标签添加`ng-model=""`指令   <div ng-bind="name"></div>
  • 插值表达式:使用双大括号{{}}   {{name}}

样式相关

  • 绑定css：在标签添加`ng-class`指令   <div ng-class="{a:true,b:true}"></div>
  • 绑定内联样式:在标签绑定内联样式`ng-style`指令    <div ng-style="{'background-color': '#66ccff','width':'100px','height':'100px'}"></div>

事件绑定相关

  • 单击事件：在标签添加`ng-click`指令   <button ng-clcik=''>click me</button>
  • 双击事件：在标签添加`ng-dbclick`指令   <button ng-dbclcik=''>click me</button>
  • 获得焦点事件：在标签添加`ng-focus`指令   <input type="text" ng-focus="">
  • 失去焦点事件：在标签添加`ng-blur`指令   <input type="text" ng-blur="">
  • 数据改変事件：在标签添加`ng-change`以及`ng-model`指令   <input type="text" ng-change="" ng-model="change" value="change">

流程控制相关

  • 如果：在标签添加`ng-if`指令   <div ng-if="true">如果判断</div>
  • 选项：在标签添加`ng-switch`指令   <div ng-switch="a"><div ng-switch-when="a"> switch to a</div><div ng-switch-default> switch default!</div></div>

功能相关

  • 只读：在标签添加`ng-readonly`指令   <input type="text" ng-readonly="true" value="readonly test">
  • 不可用：在标签添加`ng-disable`指令   <input type="text" ng-disable="true" value="disable test">
  • 隐藏：在标签添加`ng-hide`指令   <input type="text" ng-hide="true" value="hide test">

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
<style>
.a {
width: 100px;
height: 100px;
}
.b {
background-color: #66ccff;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="myTest">
<!-- 插值表达式 -->
{{name}} 
<!-- 数据绑定 -->
<div ng-bind="name"></div><br/> 
<!-- 表单控件双向绑定 -->
<input type="text" ng-model="name"/><br/> 
<!-- 绑定css -->
<div ng-class="{a:true,b:true}"></div><br/>
<!-- 绑定内联样式 -->
<div ng-style="{'background-color': '#66ccff','width':'100px','height':'100px'}"></div><br/>
<!-- 单击事件 -->
<button ng-click="handle('click')">click me</button><br/>
<!-- 双击事件 -->
<button ng-dblclick="handle('dbclick')">click me</button><br/>
<!-- 获得焦点事件 -->
<input type="text" ng-focus="handle('focus')"><br/>
<!-- 失去焦点 -->
<input type="text" ng-blur="handle('blur')"><br/>
<!-- 数据发送改変事件 -->
<input type="text" ng-change="handle('ng-change')" ng-model="change" value="change"><br/>
<!-- if流程 -->
<input type="checkbox" ng-model="ngIf"><div ng-if="ngIf">如果判断</div><br/>
<!-- switch流程 -->
a:<input type="radio" value="a" ng-model="ngRadio">
b:<input type="radio" value="b" ng-model="ngRadio">
c:<input type="radio" value="c" ng-model="ngRadio">
d:<input type="radio" value="d" ng-model="ngRadio">
<div ng-switch="ngRadio">
<div ng-switch-when="a"> switch to a</div>
<div ng-switch-when="b"> switch to b</div>
<div ng-switch-when="c"> switch to c</div>
<div ng-switch-default> switch default!</div>
</div><br/>
<!-- readonly属性 -->
<input type="checkbox" ng-model="readonly">
<input type="text" ng-readonly="readonly" value="readonly test"><br/>
<!-- disable属性 -->
<input type="checkbox" ng-model="disable">
<input type="text" ng-disable="disable" value="disable test"><br/>
<!-- hide属性 -->
<input type="checkbox" ng-model="hide">
<input type="text" ng-hide="hide" value="hide test"><br/>
</div>
</body>
<script>
var app = angular.module("app",[]);
app.controller("myTest",function($scope){
$scope.handle = function(str){
alert(str);
}
});
</script>
</html>

 

推荐阅读