Angular.js-2入門

時間  2019-11-11
標籤 angular.js angular 入門 欄目 AngularJS 简体版
原文   原文鏈接

1.angular與MVC

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程