AngularJs入门实例

最新推荐文章于 2020-12-20 17:18:06 发布

mqy1023

最新推荐文章于 2020-12-20 17:18:06 发布

阅读量2.2k

点赞数 1

分类专栏： Javascript 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/mqy1023/article/details/51540503

版权

Javascript 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了AngularJS的核心思想、内置指令的使用方法、自定义指令、控制器间的会话、作用域及控制器间的数据共享等关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《一》、四大核心思想

1、MVC
2、模块化和依赖注入
3、双向绑定
4、语义化标签(指令)

《二》、使用ng内置指令

1、ng-app 指令定义了AngularJs应用程序
2、ng-controller 定义了控制器，用于控制 AngularJS 应用
3、ng-init 指令为 AngularJS 应用程序定义了初始值。
4、ng-model 指令把元素值(比如输入域的值)绑定到应用程序
5、ng-bind 指令把应用程序数据绑定到HTML视图
6、ng-repeat 指令实现循环输出(特有属性：$index、$first、$last)
7、ng-hide 指令实现元素显示和隐藏，Dom不会移除
8、ng-if 指令实现逻辑判断，Dom会移除
9、ng-show 属性返回 true 的情况下显示
ng-src、ng-checked、ng-href、ng-class、ng-selected、ng-change、ng-submit、ng-disabled…

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>AngularJs指令Demo</title>
</head>

<body style="padding:20px;" ng-app="todoList">

<input type="text" ng-model="data.msg"/>
<div ng-show="1==1" class="{{data.msg}}">我是一个{{data.msg}}</div>
<!-- 双向binding绑定 -->
<div ng-bind="'用户名:'+data.msg"></div>
<hr>
<!-- controller的作用域 -->
<div ng-controller="myFirstCtrl">
    名1: <input type="text" ng-model="firstName" ng-init="firstName='John'"><br>
    姓1: <input type="text" ng-model="lastName" ng-init="lastName='Doe'"><br>
    <br>
    姓名: {{firstName + " " + lastName}}

    <div ng-controller="mySecondCtrl">
        名2: <input type="text" ng-model="firstName"><br>
        姓2: <input type="text" ng-model="lastName"><br>
        <br>
        姓名: {{firstName + " " + lastName}}
    </div>
</div>
<hr>

<div ng-controller="TaskCtrl">
    <div class="input-group">
        <input type="text" class="form-control" ng-model="task">
   <span class="input-group-btn">
      <button class="btn btn-default" ng-click="add()">提交</button>
   </span>
    </div>
    <!-- 控制"任务列表"的显示和隐藏的两种方法 -->
    <h4 ng-if="tasks.length>0">任务列表</h4>
    <!--<h4 ng-hide="tasks.length==0">任务列表</h4>-->
    <ul class="list-group">
        <!-- track by $index 通过下标管理数组，即数组内容可以一样-->
        <li class="list-group-item" ng-repeat="item in tasks track by $index">{{item}}
            <a ng-click="tasks.splice($index,1)">删除</a>
        </li>
    </ul>
</div>
</body>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
    angular.module('todoList', [])
            .controller('myFirstCtrl', function ($scope) {//AngularJS 控制器控制应用:
//                $scope.firstName = "John";
//                $scope.lastName = "Doe";
            })
            .controller('mySecondCtrl', function ($scope) {//AngularJS 控制器控制应用:
                $scope.firstName = "Tom";
                $scope.lastName = "MO";
            })
            .controller('TaskCtrl', function ($scope) {
                $scope.task = "";
                $scope.tasks = [];
                $scope.add = function () {
                    $scope.tasks.push($scope.task);
                }
            });
</script>
</html>

《三》、使用Directive自定义HTML组件

1、匹配模式：元素名(E)、属性(A)、类名(C)、注释(M)

     a、元素名：<runoob-directive></runoob-directive>
     b、属性：<div runoob-directive></div>
     c、类名：<div class="runoob-directive"></div>
     d、注释：<!-- directive: runoob-directive -->

2、使用驼峰法来命名一个指令，runoobDirective；但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp">

<runoob-directive></runoob-directive>
<div runoob-directive></div>
<div class="runoob-directive"></div>
<!-- directive: runoob-directive -->

<script src="js/angular.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() {
        return {
            restrict : "EACM", //不写的话，默认A
            replace : true,  //替换掉自定义runoobDirective标签
            template : "<h1>自定义指令!</h1>"  //如：templateUrl: 'hello.html'
        };
    });
</script>
<p><strong>注意:</strong> 需在该实例添加<strong>replace</strong> 属性，否则注释不可见</p>
<p><strong>注意:</strong> 设置 <b>restrict</b> 的值为 "EACM" 中某个/某几个调用对应指令。</p>
</body>
</html>

《四》、Directive与Controller之间的会话

1、link函数一般用来操作DOM、绑定事件监听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/foundation.min.css"/>
    <title>Directive与Controller之间的会话</title>
</head>
<body style="padding: 20px;" ng-app="app">
<div ng-controller="AppCtrl">
    <div enterattr="delData()">I'm here!</div>

    <hello></hello>
    <food apple orange>所有水果</food>
    <food orange>苹果</food>
</div>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('AppCtrl', function ($scope) {
        $scope.loadMoreData = function () {
            alert("正在加载数据...");
        }
        $scope.delData = function () {
            alert("正在删除数据...");
        }
    });
    app.directive('enterattr', function () {
        return function (scope, element, attrs) {
            element.bind('mouseenter', function () { //绑定鼠标经过事件
                element.addClass('alert-box'); //添加属性
                scope.$apply(attrs.enterattr);//获取并执行属性值——delData()函数
            })
        }
    });
    app.directive('hello', function () {
        return {
            restrict: 'E',
            template: '<div><input ng-model="txt" ></div><div>{{txt}}</div>',
            link: function (scope, element) {
                scope.$watch('txt', function (newVal) { //监听txt的值
                    if (newVal === 'error') {
                        element.addClass('alert-box');
                    }
                })
            }
        }
    });
    app.directive('food', function () {
        return {
            restrict: 'E',
            scope: {}, //每个指令都有一个自己独立的scope
            controller: function ($scope) {
                $scope.foods = [];
                this.addApple = function () {
                    $scope.foods.push('apple');
                }
                this.addOrange = function () {
                    $scope.foods.push('orange');
                }
            },
            link: function (scope, element, attrs) {
                element.bind('mouseenter', function () {
                    console.log(scope.foods);
                });
            }
        }
    });
    app.directive('apple', function () {
        return {
            require: 'food', //引入上面的自定义food组件
            link: function (scope, element, attrs, foodCtrl) { //foodCtrl是上面的food的controller控制器
                element.bind('mouseenter', function () {
                    foodCtrl.addApple();
                });
            }
        }
    });
    app.directive('orange', function () {
        return {
            require: 'food', //引入上面的自定义food组件
            link: function (scope, element, attrs, foodCtrl) { //foodCtrl是上面的food的controller控制器
                element.bind('mouseenter', function () {
                    foodCtrl.addOrange();
                });
            }
        }
    });
</script>
</body>
</html>

有个小bug，第一次划过“苹果”并没添加成功，知道原因的望留言指点，感激不尽

《五》、scope作用域

1、$scope 中变量和方法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/foundation.min.css"/>
    <title>登录</title>
</head>
<body style="padding:20px;" ng-app="app">
<div ng-controller="MyCtrl">
    <!-- 使用$scope中的方法 -->
    <input type="text" ng-model="msg">
    <h3>{{myReverse()}}</h3>

    <input type="text" ng-model="user.name">
    <input type="text" ng-model="user.pwd">
    <div class="button" ng-click="login()">登录</div>
    <div class="alert-box" ng-show="errormsg.length>0">{{errormsg}}</div>
</div>

</body>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
    angular.module('app', [])
            .controller('MyCtrl', function ($scope) {
                $scope.msg = "";
                $scope.user = {name:'', pwd: ''};//name和pwd两个属性；$scope.user.name和$scope.user.pwd
                $scope.errormsg = "";
                $scope.myReverse = function () { //自定义反转函数
                    return $scope.msg.split("").reverse().join("");
                }
                $scope.login = function() {
                    if($scope.user.name === 'admin' && $scope.user.pwd === '12345') {
                        console.log($scope.user);
                        alert("登录成功");
                    } else {
                        $scope.errormsg = "用户名或密码输入错误!";
                    }
                }
            })
</script>
</html>

《六》、Controller之间共享数据

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。以下5个核心组件用来作为依赖注入：value、constant、factory、service、provider
value和constant来设置全局变量。service依赖注入，利用service把需要共享的数据注入给需要的controller。

<body style="padding: 20px;" ng-app="myApp">
<div ng-controller="myCtrl">
    <input ng-model="msg">
    <h3>{{content}}</h3>
    <h3>{{website}}</h3>
    <h3>{{data.fmsg}}</h3>
    <h3>{{uname}}</h3>
</div>

<script src="js/angular.min.js"></script>
</body>

<script>
    var app = angular.module('myApp', []);//AngularJS 模块定义应用:
    app.value('realname', 'tom') //value的值可以被修改
            .constant('http', 'www.baidu.com')//constant不可修改
            .factory('Data', function() {
                return {
                    fmsg: '你好啊',
                    setMsg: function() {
                        this.fmsg = '我不好';
                    }
                }
            })
            .service('User', function() {//service只实例化一次，任意注入service都使用同一个实例
                this.firstName = "上官";
                this.lastName = "飞燕";
                this.getName = function() {
                    return this.firstName + this.lastName;
                }
            })
            .controller('myCtrl', function ($scope, realname, http, Data, User) {//AngularJS 控制器控制应用:
                $scope.msg = "您好";
                $scope.content = realname;
                $scope.website = http;
                $scope.data = Data;
//                Data.setMsg();
                $scope.uname = User.getName();
            });
</script>
</html>