VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript >

  • JavaScript教程之Angular.js-2入门

MVC即Model View Controller，是模型(model)-视图(view)-控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
M 模型对应数据库
V 视图对应HTML页面
C 控制器处理用户交互
复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<style>
    body {
        padding: 10px;
    }
</style>
<body ng-app="app">
    <div ng-controller="MyCtrl">
        <input type="text" ng-model="msg"/>
        <h1>{{msg}}</h1>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script>
    angular.module('app',[])//module创建一个angular模块
            .controller('MyCtrl',function($scope){//controller相当于简单的MVC，MyCtrl相当于C,$scope相当于M
               $scope.msg="angular";//每一个模型，通过双向绑定，把模型绑定到V上即HTML页面
            })
            .controller('MyCtrl1',function($scope){})//可以创建更多
            .controller('MyCtrl2',function($scope){})
            .controller('MyCtrl3',function($scope){});
</script>
</html>
复制代码

2.binding双向绑定

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="">
    <div>
        <input type="text" ng-model="uname"/>
        <h1 ng-bind="uname">{{}}</h1><!--显示输入框内容-->
        <h1 ng-clock class="ng-clock">{{uname}}</h1><!--显示输入框内容-->
        <!--{{}}内可放置任何表达式-->
        <div ng-bind="'用户名:'+uname"></div><!--显示：用户名:button-->
        <div class="{{uname}}">{{uname}}</div><!--显示button标签-->
    </div>
</body>
<script src="js/angular.min.js"></script>
</html>
复制代码

3.controller的使用

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding: 10px" ng-app="app">
    <div ng-controller="FirstCtrl">
        <!--<h1>{{msg}}</h1>同ng-bind且可省去{{}}-->
        <h1 ng-bind="msg"></h1>
        <input type="text" ng-model="msg"/>
    </div>
    <div ng-controller="NextCtrl">
        <!--<h1>{{msg}}</h1>-->
        <h1 ng-bind="msg"></h1>
        <input type="text" ng-model="msg"/>
    </div>
<!--ng-controller明确其作用域边界-->
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
    .controller('FirstCtrl',function($scope){
        $scope.msg="hello angular";
    })
    .controller('NextCtrl',function($scope){
        $scope.msg="hello 极客";
    });

</script>
</html>
复制代码

4.scope的变量与方法

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="app">
<p>在scope上定义方法并在页面上进行绑定调用</p>
<p>在scope上定义变量并在方法中使用</p>
<div ng-controller="MyCtrl">
    <!--<input type="text" ng-model="msg"/>-->
    <!--<h1>{{reverse()}}</h1>-->
    <!--在页面上绑定调用scope中定义的方法-->
    <input type="text" ng-model="user.uname"/>
    <input type="text" ng-model="user.pwd"/>
    <div class="button" ng-click="login()">登录</div>
    <div ng-show="errormsg.length>0" class="alert-box">{{errormsg}}</div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
    .controller('MyCtrl',function($scope){
        $scope.msg="";
        $scope.user={uname:'',pwd:''};
        $scope.errormsg="";
        $scope.reverse=function(){//在scope上定义方法
            return $scope.msg.split("").reverse().join("")
        };
        $scope.login=function(){
            if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
                alert("登陆成功");
            }else{
                $scope.errormsg="用户名或密码错误";
            }
        }
    });

</script>
</html>
复制代码

5.定义service服务

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
    <div ng-controller="MyCtrl">
        <h1>{{realname}}</h1>
        <h1>{{http}}</h1>
        <h1>{{data.msg}}</h1>
        <h1>{{uname}}</h1>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
    //service多种表现形式，四种创建模式value（值可改变） constant(常量不可改变) factory service provider（高级）
    .value('realname','zhaoliu')
    .value('realname','wangwu')
    .constant('http','www.baidu.com')
    .constant('http','www.sohu.com')
    .factory('Data',function(){
        return {
            msg:'你好吗',
            setMsg:function(){
                this.msg="我不好";
            }
        }
    })
    .service('User',function(){
        this.firstname="上官";
        this.lastname="小子";
        this.getName=function(){
            return this.firstname+this.lastname;
        }
    })
    .controller('MyCtrl',function($scope,realname,http,Data,User){
        $scope.realname=realname;
        $scope.http=http;
        $scope.data=Data;
        Data.setMsg();
        $scope.uname=User.getName();
    });

</script>
</html>
复制代码

6.在controller中使用service服务

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
    <p>service:如何在多个controller中共享数据</p>
    <div ng-controller="FCtrl">
        <input type="text" ng-model="data.msg"/>
        <h2>{{data.msg}}</h2>
    </div>
    <div ng-controller="SCtrl">
        <input type="text" ng-model="data.msg"/>
        <h2>{{data.msg}}</h2>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
    .factory('Data',function(){
        return {
            msg:'我来自factory'
        }
    })
    .controller('FCtrl',function($scope,Data){
        $scope.data=Data;
    })
    .controller('SCtrl',function($scope,Data){
        $scope.data=Data;
    });
</script>
</html>
复制代码

6.常用指令可查看官方文档api


相关教程