angular js的学习(1)

1)AngularJS三个最为精妙的组件就是数据绑定（Scope），指令（Directive）和依赖注入（Dependency Injection），表现得非常好。
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>(这是angula js的包)
scope:<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
2)repeat相当于js中的foreach循环遍历
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<li ng_repeat=" x in names">
  {{ x.name + ', ' + x.country }}
</li>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];

});
</script>
3)AngularJS 过滤器
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。(可进行输入筛选)
lowercase 格式化字符串为小写。
uppercase 格式化字符串为大写。
orderBy 根据某个表达式排列数组。(可以利用这个进行按字母顺序排序)
4)服务(跳转)
注意 $location 服务是作为一个参数传递到 controller 中，相当于js中window.location 
1.倒计时
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>
2.指定的时间间隔调用
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000);
});
</script>
5)HTTP
$http.get() 从web服务器上读取静态 JSON 数据。
<script>
function customersController($scope,$http) {
    var site = "http://www.w3cschool.cn";
    var page = "/statics/demosource/Customers_SQL.php";
    $http.get(site + page)
    .success(function(response) {$scope.names = response;});
}
</script
6）下拉列表框(ng-options)
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "W3Cschool", "Taobao"];
});
</script>
假如是这个对象
$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "W3CSchool", url : "http://www.w3cschool.cn"},
    {site : "Taobao", url : "http://www.taobao.com"}
];则用ng-repeat
使用的是ng-options
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>你选择的值是: {{selectedSite}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sites = {
    site01 : "Google",
    site02 : "W3CSchool",
    site03 : "Taobao"
};
});
</script>
区别：使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串(数组类型的格式)。
7)HTML DOM(这个可以用来做复选框，选上了就变灰了)
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">篮球</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>
</p>
<p>
讲解：ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）
<div ng-app="">
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
</div>
也可以用hide来显示隐藏
8)HTML事件
1.可以用来做点赞，每次点击加一。
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>
2.点击切换来回显示和隐藏用toggle()函数来实现
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>
9)表单验证(这自带表单验证)
<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'Loen Wang';
    $scope.email = 'loenwang@loen.wang';
});
</script>
10)单选框和复选框
ng-switch-when当条件成立时，可以显示和隐藏 HTML的内容。和ng-hide\ng-show和差不多