<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){
        $scope.bBtn = true;
    }]);
</script>
</head>

<body>
<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">  //是否选中，不选中会改变bBtn的值会改变下面的隐藏显示。
    <div ng-show="bBtn">aaaaaaaaaaaa</div>   //隐藏显示，占布局。
    <div ng-if="bBtn">aaaaaaaaaaaa</div>     //隐藏显示，不占布局。
    <div ng-switch on="bBtn">                //切换
        <p ng-switch-default>默认的效果</p>
        <p ng-switch-when="false">切换的效果</p>
    </div>
    
    <details ng-open="bBtn">                //details是描述性的标签 
        <summary>Copyright 2011.</summary>
        <p>All pages and graphics on this web site are the property of W3School.</p>
    </details> 
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.text = 'hello';
    $scope.arr = [['a','b'],['c','d']];
}]);
</script>
</head>

<body>
<div ng-controller="Aaa" ng-init="text='hello'">
    {{ text }}
</div>
<div ng-controller="Aaa">
    <div ng-repeat="arrOuter in arr" ng-init="outerIndex = $index">   //遍历时输出索引
        <div ng-repeat="arrInner in arrOuter" ng-init="innerIndex = $index">   //遍历时输出索引
            <p>{{arrInner}}:{{outerIndex}}{{innerIndex}}</p>
        </div>
    </div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.arr = [['a','b'],['c','d']];
}]);
</script>
</head>
<body>
<div ng-controller="Aaa" ng-include="'temp.html'">   包含其余页面
</div>
</body>
</html>


temp.html：
<ul>
    <li>111111</li>
    <li>222222</li>
    <li>333333</li>
</ul>
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.text = 'hello';
}]);


//面向对象的写法（在原型上扩展）防止写的太多。
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',FnAaa]);
function FnAaa($scope){//构造函数也可以看成是对象
}
FnAaa.prototype.num = '123';  //给对象添加属性
FnAaa.prototype.text = 'hello';
FnAaa.prototype.show = function(){
    return 'angularJS';
};
</script>
</head>
<body>

<div ng-controller="Aaa">    //ng-model="text"当输入框输入值的时候text变量会改变从而触发其余地方也改变，ng-model-options是说只有在光标移除输入框时才改变text变量的值。
    <input type="text" ng-model="text" ng-model-options="{updateOn : 'blur'}">
    <div>{{text}}</div>
</div>



<div ng-controller="FnAaa as a1">  //as是创建了一个对象。
    <div>{{a1.text}}:{{a1.show()}}</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.colors = [
        { name : 'red' },
        { name : 'yellow' },
        { name : 'blue' }
    ];
}]);

</script>
</head>

<body>
//ng-app="myApp"指定anguarjs解析的范围，
<div ng-app="myApp" ng-controller="Aaa">
    <a href="">{{myColor.name}}</a>
    //下拉菜单，ng-model="myColor"是选择之后的值给myColor，改变myColor会引起上面的值也改变（变量在一处变化整个页面都变化）。
    <select ng-options=" color.name for color in colors " ng-model="myColor">
    </select>
    <form novalidate>
        <input type="email">
    </form>
</div>
<a href="">bbbbbbb</a>
</body>
</html>

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.red{ background:red;}
.yellow{ background:yellow;}
</style>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.colors = [
        { name : 'red' },
        { name : 'yellow' },
        { name : 'blue' }
    ];
}]);

</script>
</head>

<body>
//ng-app="myApp"指定anguarjs解析的范围，
<div ng-app="myApp" ng-controller="Aaa">
    <a href="">{{myColor.name}}</a>
    //下拉菜单，ng-model="myColor"是选择之后的值给myColor，改变myColor会引起上面的值也改变（变量在一处变化整个页面都变化）。
    <select ng-options=" color.name for color in colors " ng-model="myColor">
    </select>
    <form novalidate>
        <input type="email">
    </form>
</div>
<a href="">bbbbbbb</a>
</body>
</html>