从零学习Angularjs-编写第一个Angularjs以及ng-指令大全
1.Angularjs的加载方式
当网页加载完毕，AngularJS 自动开始执行； HTML 页面中 ng-xxx 的属性称之为指令（Directive）； ng-app 指令告诉 AngularJS， 元素是 AngularJS 应用程序管理的边界； {{ }} 双花括号里面的叫做数据绑定表达式，可以是任何有效的JavaScript值、变量或语句。而在页面上显示的是表达式计算后的结果值。
举个栗子：
<html ng-app>
<head>head>
<body>
{{"从零学习Angularjs-编写第一个Angularjs"}}
body>
html>2.Module.controller() 控制器
第二行代码创建了一个名为userCtrl的控制器，以及一个控制器函数
控制器函数接受一个名为$scope的参数
var app = angular.module(“myApp”, []); //myApp模块名 app是模块实例
app.controller(“userCtrl” ,function($scope){ //userCtrl是控制器的名字
$scope.name= “小明”; //$scope用来保存数据，定义方法
});3.ng-指令大全
（1）ng-model
ng-model 指令把文本框的值绑定到变量 name 上； {{ name }} 表达式就是把应用程序变量 name 绑定到某个dom元素的innerHTML。
请输入你的名字：<input type="text" id="username" ng-model="name">
你的名字是： <span>{{name}}span>（2）ng-bind指令
ng-bind 指令将指定变量或表达式的值显示在元素的innerHTML 如果给定的变量或表达式修改了，指定元素的 innerHTML 也会修改。
type="text" ng-model="text"> --将文本框的值绑定到text变量 你输入的值是:
"text"> --动态显示text变量的值（3）ng-init 指令
初始化应用时创建一个变量，并给变量赋值 ng-init 执行给定的表达式 建议用controller代替。
<div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}h1>（4）ng-click指令
Angular的点击事件处理器，给元素通过click事件绑定$scope对象的方法。
"text" ng-model="text">
$scope.show = function(){ alert("您输入的内容是：" + $scope.text); }（5）ng-repeat 指令
根据绑定数组成员的数量，复制被绑定的元素 在ng-repeat指令复制元素的过程中，还提供了几个专有变量：
$index 返回当前对象或属性的下标
$first 当前对象为集合中的第一个对象时返回true
$last 当前对象为集合中的最后一个对象时返回true
$middle 当前对象既不是集合中第一个对象又不是最后一个对象返回true
$even 集合中的偶数编号返回true
$odd 集合中的奇数编号返回true ng-repeat-start ng-repeat-end 重复生成多个顶层元素
（6）ng-class 指令
给元素添加CSS类:不能直接添加类名，需通过以下三种方式添加：
1. 直接绑定值为CSS类名的$scope对象属性：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link href="../../css/bootstrap.css" rel="stylesheet">
<style>
.red {
color: red;
}
style>
head>
<body ng-app="myApp">
<div ng-controller="listController">
<span ng-class="red1">小明span>
div>
<script src="../../script/angular.min.js">script>
<script>
var app = angular.module("myApp", []);
app.controller("listController", function($scope) {
$scope.red1='red';
});
script>
body>
html>2. 以字符串数组方式选择性添加CSS类 表达式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.style1 {
height: 200px;
width: 200px;
background: salmon;
}
.style2 {
background: violet;
}
style>
head>
<body>
<div ng-app ng-init="data={style1:true,style2:false}">
<div ng-class="{style1:data.style1,style2:data.style2}">div>
<input type="button" value="变化颜色" ng-click="data.style2 = !data.style2">
div>
<script src="../../script/angular.min.js">script>
<script>
var data = {
style1:true,
style2:false
}
script>
body>
html>3.通过key/value对象的方式添加多个CSS类
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link href="../../css/bootstrap.css" rel="stylesheet">
<style>
.red {
color: red;
}
.green {
color: greenyellow;
}
style>
head>
<body ng-app="myApp">
<div ng-controller="listController">
<ul>
<li ng-repeat = "item in datas" ng-class="{red:item.startsWith('张')">{{ item }}
li>
ul>
div>
<script src="../../script/angular.min.js">script>
<script>
var app = angular.module("myApp", []);
app.controller("listController", function($scope) {
$scope.datas = ["张三","李四","王五","赵六","张"];
});
script>
body>
html>（7）ng-style 指令
ng-style 指令为 HTML 元素添加 style 属性。 ng-style 属性值必须是对象，表达式返回的也是对象 对象由 CSS 属性和值注册，即 key：value 。
ng-style=” {color: 'white'}”（8）ng-show/ng-hide指令
ng-show 值为true或flase 显示或隐藏元素 ng-hide 值为true或flase 隐藏或显示元素。
（9）ng-if指令
从DOM中添加和移除元素 ng-if=”true”时保留元素 ng-if=“false”时移除元素。
（10）ng-swich指令
ng-switch-when =“” 值为指定value值的时候 显示元素。
ng-switch-default 没有匹配的value值时显示元素。
（11）ng-link/ng-src指令
绑定元素的link或src地址 AngularJS 设置图片地址的指令：ng-src AngularJS 代码执行前不显示图片。
（12）ng-include指令
该指令从服务器获取一段HTML片段，编译并处理该片段中包含的任何angular指令，并添加到DOM元素中。
<ng-include src=" 'a.html' " >ng-include>src: 指定要加载内容的URL src的值必须为表达式 onload: 指定一个在内容被加载时调用的表达式 autoscroll:指定内容在加载时是否滚动到这部分视图所在的区域。
（13）ng-cloak指令
使用一个CSS样式隐藏内联绑定表达式，(在文档第一次加载会短暂可见)。 ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。 AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生。 该指令没有参数。
<span ng-cloak>{{ 表达式 }}span>4.Module.directive自定义指令
指令是Angular最强大的特性，通过指令能扩展并增强HTML。 当内置指令无法满足需求时，可以创建自定义指令。 自定义指令是通过Module.directive方法创建的。 Module.directive() 方法接受两个参数，第一个是指令名，第二个是函数。 该函数用return语句返回另一个指令函数，使用该自定义指令，Angular就会调用这个函数。 指令函数接受三个参数，第一个scope，用于检查在视图中可用的数据。 第二个参数element是一个jqLite对象，jqLite是Angular提供一个剪裁版本的jQuery 第三个参数是attrs。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link href="../../css/bootstrap.css" rel="stylesheet">
<script src="../../script/angular.min.js">script>
<script>
var m= angular.module("my", [])
m.controller("ctr1", function ($scope) {
$scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
$scope.today = $scope.dayNames[new Date().getDay()];
//getDay星期是从0开始的，星期日的下标是0
});
m.controller("ctr2", function ($scope) {
$scope.dayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
$scope.tommorrow = $scope.dayNames[(new Date().getDay() + 1) % 7];
});
m.directive('highlight', function () {
return function (scope,element,attrs) {
if(scope.today == attrs['highlight']){
element.css("color",'red');
}else{
element.css("color",'green')
}
}
})
script>
head>
<body ng-app="my">
<div class="container">
<h2>今天是星期几？h2>
<p ng-controller="ctr1" highlight="星期二">今天是{{ today }}p>
<p ng-controller="ctr2" highlight="星期一">明天是{{ tommorrow }}p>
div>
body>
html>