AngularJS学习指南
1、解释:
angularJS是通过添加自定义属性和方法,从而能够实现HTML扩展的MVVM框架,仅需要在JS中定义对应属性,然后通过指令将数据双向绑定在HTML上,不再需要繁琐的DOM操作,模型中数据发生变化时,框架底层将会扫面变化,并且同步到视图上。
2、在页面中加载AngularJS库文件
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
3、指令介绍
ng-app:在页面中圈定一个应用程序区域
ng-controller:在页面中圈定一个控制区域,方便在模型中设置,修改数据,与此区域对应及时同步,通过传递$scope,$rootScope参数添加,修改属性及方法。
ng-init:初始化控制区域变量
ng-show:控制视图区域显示
ng-hide:控制视图区域隐藏
ng-bind:绑定数据到视图元素上 优先于{{}}插值表达式
ng-repeat:在视图中循环展示数据 ((index,item) in data)
ng-model:绑定输入域数据,同步到模型中,可以实现检测检测,也可以验证数据
ng-click:绑定点击事件,时间在$scope中定义指定 绑定事件时不能缺少括号
4、过滤器
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
自定义过滤器:
app.filter('filterName', function() {});
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>angular</title> <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div class="container" ng-app="lesson" ng-controller="lessonCtrl"> <h1 style="text-align: center;">课件列表</h1> <div class="row" > <div class="col-xs-12"> <table class="table"> <caption>基本的表格布局</caption> <thead> <tr> <th>标题</th><th>大小</th><th>创建人</th><th>发布时间</th><th>知识点</th><th>类型</th><th>下载次数</th><th>状态</th><th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="(index,item) in data"> <td>{{item.title | uppercase}}</td> <td ng-bind="item.size"></td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.knowledge}}</td> <td>{{item.type | lessonType}}</td> <td>{{item.download}}</td> <td>{{item.status | lessonStatus}}</td> <td><a href="javascript:void(0);" ng-show="item.status == 1" ng-click="download(index)">下载</a><a href="javascript:void(0);" ng-show="item.status != 1" ng-click="publish(index)">发布</a></td> </tr> </tbody> </table> </div> </div> <h1 style="text-align: center;">添加课件</h1> <div class="row"> <div role="form"> <div class="form-group col-xs-12"> <label for="title">标题</label> <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题" ng-model="title"> </div> <div class="form-group col-xs-6"> <label for="size">大小</label> <input type="text" class="form-control" id="size" name="size" placeholder="请输入标题" ng-model="size"> </div> <div class="form-group col-xs-6"> <label for="name">创建人</label> <input type="text" class="form-control" id="name" name="name" placeholder="请输入标题" ng-model="name"> </div> <div class="form-group col-xs-12"> <label for="name">知识点个数</label> <input type="text" class="form-control" id="knowledge" name="knowledge" placeholder="请输入标题" ng-model="knowledge"> </div> <label class="col-xs-12">课件类型</label> <div class="form-group"> <label class="checkbox-inline"> <input type="radio" name="type" value="0" checked ng-model="type">文档 </label> <label class="checkbox-inline"> <input type="radio" name="type" value="1" ng-model="type">音视频 </label> <label class="checkbox-inline"> <input type="radio" name="type" value="2" ng-model="type">压缩包 </label> </div> <button type="submit" class="btn btn-default" ng-click="submit()">提交</button> </div> </div> </div> <script type="text/javascript"> var data = [ {id:1,title:'title1',size:'1.4M',name:'张三',date:'2017-06-30',knowledge:4,type:0,status:0,download:0}, {id:2,title:'title2',size:'1.8M',name:'张三',date:'2017-06-30',knowledge:0,type:1,status:0,download:0}, {id:3,title:'title3',size:'1.0M',name:'张三',date:'2017-06-30',knowledge:2,type:2,status:1,download:0}, {id:4,title:'title4',size:'4M',name:'张三',date:'2017-06-30',knowledge:14,type:2,status:0,download:0}, {id:5,title:'title5',size:'2.4M',name:'张三',date:'2017-06-30',knowledge:21,type:1,status:1,download:0}, {id:6,title:'title6',size:'4.4M',name:'张三',date:'2017-06-30',knowledge:5,type:0,status:2,download:0} ]; //定义应用程序 var app = angular.module('lesson',[]); //设置控制器 传递作用域$scope,根作用域$rootScope 当前页面URL服务$location HTTP请求服务$http 定时器服务$timeout/$interval myService app.controller('lessonCtrl',function($scope,$rootScope,$location,$http,$timeout,$interval,myService) { //通过$http服务获取数据 $http({ method: 'get', url:'' }).then(function(res) { //res:{} $scope.data = data; },function(res) { // }) $scope.title = ''; $scope.size = ''; $scope.name = ''; $scope.knowledge = 0; $scope.type = 0; //添加方法 $scope.publish = function(index){ this.data[index].status = 1; } $scope.download = function(index) { this.data[index].download += 1; } $scope.submit = function() { this.data.push({ id:this.data.length + 1, title:this.title.trim(), size: this.size, name:this.name.trim(), date:myService.formatDate(), knowledge:this.knowledge, type:this.type, status:0, download:0 }) } //使用自定义服务 console.log(myService.sayHello()); }) //自定义过滤器 app.filter('lessonType',function() { return function(type) { return ['文档','音视频','压缩包'][type]; } }) app.filter('lessonStatus',function() { return function(status) { return ['未发布','已发布','已撤回'][status]; } }) //自定义服务 app.service('myService',function() { var that = this; that.sayHello = function() { return 'Hello World!'; } that.addZero = function(num) { return parseInt(num) > 10 ? num : "0" + num; } that.formatDate = function() { var t = new Date(); return t.getFullYear() + "-" + this.addZero(t.getMonth() + 1) + "-" + this.addZero(t.getDate()); } }) </script> </body> </html>