AngularJS学习指南

迎接访问个人站点:http://www.jackcode.online/index.php/archives/37

1、解释:

angularJS是经过抬高自定义属性和办法,从而可以已毕HTML增加的MVVM框架,仅须求在JS中定义对应属性,然后通过指令将数据双向绑定在HTML上,不再须要繁琐的DOM操作,模型中数量发生变化时,框架底层将会扫面变化,并且一路到视图上。

贰 、在页面中加载AngularJS库文件

<script src=”http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt;

 

三 、指令介绍

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>

 

  

 

  

  

 

相关文章