美文网首页
前端-06-AngularJs

前端-06-AngularJs

作者: 西海岸虎皮猫大人 | 来源:发表于2020-09-10 14:36 被阅读0次

    1.概述

    完美实现mvvm mvw模式
    模块化结构

    <!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.js"></script>
</head>
<body>
<h1>输入的内容是: {{ msg }}</h1>
<input type="text" ng-model="msg" placeholder="请输入内容">
<script>
    /*
    * google出品
    * mvw设计模式,模块化,双向数据绑定,依赖注入
    * 克服html天生不足
    * 原生js无论是onchange或者onkeyup都无法实现数据实时绑定
    */
</script>
</body>
</html>

    2.语法基础

    <!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>angularjs语法基础</title>
    <script src="js/angular.js"></script>
</head>
<body ng-init="msg='hello world'">
<h1>输入的内容是: {{ msg }}</h1>
<input type="text" ng-model="msg" placeholder="请输入内容">
内容: <span ng-bind="msg"></span>
<script>
    // 1.边界指令 ng-app
    // 告知框架在哪个范围内生效,习惯写在html标签内

    // 2.呈现指令 {{}}
    // 可以写ng语法规则的变量 字符串 表达式
    // 禁止赋值

    // 3.信息指令 ng-model
    // 绑定input或textarea

    // 4.绑定指令 ng-bind
    // 配合ng-model使用,非输入性便签内容显示

    // 5.初始化指令 ng-init
    // 不常用,对边界内部数据模型(ng变量)初始化
    // 习惯放在body上
</script>
</body>
</html>

    3.控制器

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title ng-bind="pageTitle"></title>
    <script src="js/angular.js"></script>
</head>
<body>
<h1 ng-bind="msg"></h1>
<span>{{ msg }}</span>
<ul>
    <!--track 重复元素处理-->
    <li ng-repeat="pname in names track by $index">{{ pname }}</li>
</ul>
<div ng-repeat="info in bookInfos track by $index">
    <p>{{ info.name }}</p>
    <p>{{ info.author }}</p>
</div>
<script>
    // 1.angular.module()方法
    // 生成页面数据模型
    // 目前不涉及注入,空置即可
    // 等价document的作用,页面模型的抽象
    var app = angular.module('app', []);
    console.log(app);

    // 2.声明控制器 ng-controller
    // 声明页面哪一个元素为控制器
    // 操作数据和视图
    // 声明了控制器必须写脚本

    // 3.控制器方法 controller()
    // 生成页面控制器
    // 控制器将脚本分为模块
    app.controller('mainController', ['$scope', function ($scope) {
        // 设置标题
        $scope.pageTitle = 'angular控制器';
        $scope.msg = 'hello angular';

        // 遍历数据
        $scope.names = ['zhangsan', 'lisi', 'wangwu', 'zhangsan'];
        // 遍历复杂数据
        $scope.bookInfos = [
            {name: 'js入门', author: 'vincent'},
            {name: 'angular入门', author: 'lili'}
        ];
    }]);

    // 4.遍历指令 ng-repeat
    // 页面开发尽量不用循环结构
</script>
</body>
</html>

    4.事件监听

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title ng-bind="mainTitle"></title>
    <script src="js/angular.js"></script>
</head>
<body>
<!--<button ng-click="func()">点击</button>-->

<p ng-show="showFlag">{{ msg }}</p>
<button ng-click="clickHandler()">点击</button>
<ul>
    <li ng-click="li_click($index)" ng-repeat="li_info in li_infos track by $index">{{li_info}}</li>
</ul>
<script>
    var app = angular.module('app', []);
    // 1.事件监听 ng-事件名
    // 回调在controller中通过$scope实现
/*    app.controller('mainController', ['$scope', function ($scope) {
        $scope.mainTitle = '事件监听';
        $scope.func = function () {
            console.log('click');
        };
    }]);*/


    
    app.controller('mainController', ['$scope', function ($scope) {
        $scope.mainTitle = '事件监听';
        // 默认显示
        $scope.showFlag = true;
        $scope.msg = 'test msg';
        $scope.clickHandler = function () {
            console.log('clickHandler');
            // 点击隐藏
            $scope.showFlag = !$scope.showFlag;
        };
        $scope.li_infos = ['宝马', '奔驰', '保时捷'];
        $scope.li_click = function (index) {
            console.log('点击内容是:' + $scope.li_infos[index]);
        }
    }]);

</script>
</body>
</html>

    5.评论案例

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>评论案例</title>
    <script src="js/angular.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<br><br><br>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
            <!--评论模块-->
            <div class="input-group">
                <input type="text" class="form-control" ng-model="cmt">
                <span class="input-group-btn">
                    <button class="btn btn-primary" ng-click="submitComment(cmt)">评论</button>
                </span>
            </div>
            <!--评论标题-->
            <!--有评论显示,无评论不显示-->
            <h1 ng-show="commentArr.length>0"></h1>
            <!--评论内容-->
            <ul class="list-group">
                <li class="list-group-item" ng-repeat="comment in commentArr track by $index">
                    <span>{{ comment }}</span>
                    <!--禁止调转-->
                    <a href="javascript:;" class="btn btn-link" ng-click="deleteComment($index)">删除</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    var app = angular.module('app', []);
    app.controller('mainController', ['$scope', function ($scope) {
        $scope.commentArr = ['评论1', '评论2', '评论3'];
        $scope.submitComment = function (cmt) {
            $scope.commentArr.push(cmt);
            $scope.cmt = '';
        };
        $scope.deleteComment = function (index) {
            $scope.commentArr.splice(index, 1);
        };
    }]);
</script>
</body>
</html>

    6.模块化

    /js/apps/controllers/mainController.js

    app.controller('mainController', ['$scope', function ($scope) {
    $scope.mainTitle= '模块化思想';
}]);

    js/apps/controllers/commentController.js

    // 评论控制器
app.controller('commentController', ['$scope', function ($scope) {
    $scope.commentArr = ['评论1', '评论2', '评论3'];
    $scope.submitComment = function (cmt) {
        $scope.commentArr.push(cmt);
        $scope.cmt = '';
    };
    $scope.deleteComment = function (index) {
        $scope.commentArr.splice(index, 1);
    };
}]);

    js/apps/controllers/namelistController.js

    // 姓名列表控制器
app.controller('namelistController', ['$scope', function ($scope) {
    $scope.liInfos = ['lili', 'lucy', 'vincent'];
}]);

    js/apps/app.js

    var app = angular.module('app', []);

    index.html

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title ng-bind="mainTitle">模块化思想</title>
    <!--
    写在相同模块中不利于协同开发 -> 划分模块
    对初学者不友好
     -->
    <link rel="stylesheet" href="css/libs/bootstrap.min.css">
    <script src="js/libs/angular.js"></script>
    <script src="js/apps/app.js"></script>
    <script src="js/apps/controllers/commentController.js"></script>
    <script src="js/apps/controllers/namelistController.js"></script>
    <script src="js/apps/controllers/mainController.js"></script>
</head>
<body>
<br><br><br>
<div class="container" ng-controller="commentController">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
            <!--评论模块-->
            <div class="input-group">
                <input type="text" class="form-control" ng-model="cmt">
                <span class="input-group-btn">
                    <button class="btn btn-primary" ng-click="submitComment(cmt)">评论</button>
                </span>
            </div>
            <!--评论标题-->
            <!--有评论显示,无评论不显示-->
            <h1 ng-show="commentArr.length>0"></h1>
            <!--评论内容-->
            <ul class="list-group">
                <li class="list-group-item" ng-repeat="comment in commentArr track by $index">
                    <span>{{ comment }}</span>
                    <!--禁止调转-->
                    <a href="javascript:;" class="btn btn-link" ng-click="deleteComment($index)">删除</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--展示姓名-->
<ul ng-controller="namelistController">
    <li ng-repeat="liInfo in liInfos track by $index">{{liInfo}}</li>
</ul>

</body>
</html>

    7.路由

    应用只有一个页面,在不切换页面加载不同页面效果
    index.html

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script src="js/libs/angular.js"></script>
    <script src="js/libs/angular-route.min.js"></script>
    <link rel="stylesheet" href="css/libs/bootstrap.min.css">
</head>
<body>
<ul>
    <li><a href="#showname">姓名列表展示</a></li>
    <li><a href="#showinfo">信息</a></li>
</ul>

<div style="width: 300px; height: 300px; border: 1px solid;" ng-view></div>
<script>
    // router功能依赖于angular-route.min.js
    // ng-view指令, 标注不同页面的容器
    // router功能依赖于a便签href属性
    // 通过app页面数据模型构建, config语法构建,
    // when() 加载哪一页面
    // otherwise() 默认加载哪个页面

    var app = angular.module('app', ['ngRoute']);
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/showname', {
                templateUrl: 'showname.html',
                controller: 'namelistController'
            })
            .when('/showinfo',{
                templateUrl: 'showinfo.html',
                controller: 'showInfoController'
            })
            .otherwise({
                redirectTo: '/showname'
            });
    }]);


    app.controller('mainController', ['$scope', function ($scope) {
    }]);

    // 姓名列表控制器
    app.controller('namelistController', ['$scope', function ($scope) {
        $scope.liInfos = ['lili', 'lucy', 'vincent'];
    }]);

    app.controller('showInfoController', ['$scope', function ($scope){
        $scope.infos = [
            { username:'frank', password:'123456' },
            { username:'zoe', password:'654321' }
        ];
    }]);
</script>

</body>
</html>

    showinfo.html

    <div ng-controller="showInfoController">
    <div ng-repeat="info in infos track by $index">
        <h2>{{ info.username }}</h2>
        <p>{{ info.password }}</p>
    </div>
</div>

    showname.html

    <!--展示姓名-->
<ul ng-controller="namelistController">
    <li ng-repeat="liInfo in liInfos track by $index">{{liInfo}}</li>
</ul>

    8.网络服务

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>{{mainControllerTitle}}</title>
    <link rel="stylesheet" href="css/libs/bootstrap.min.css">
    <link rel="stylesheet" href="css/apps/index.css">


</head>
<body>
<img ng-src="{{ imgSrc }}" alt="">
<script src="js/libs/angular.js"></script>
<script>
    /*
    * 服务用于不同controller沟通
    * $http-网络服务
    * 系统服务都带$前缀,自定义服务都不带
    * angular框架请求来的imgsrc和a标签的href需要加ng前缀
    */
    var app = angular.module('app',[]);
    app.controller('mainController', ['$scope', '$http', function ($scope, $http) {
        $scope.mainControllerTitle = '服务概述与系统服务';
        // 测试get请求
/*        $http({
            // 习惯大写
            method: 'GET',
            url: 'index.php'
        }).success(function (data) {
            console.log(data);
            $scope.imgSrc = data.imgSrc;
        }).error(function (err) {
            console.log(err);
        });*/

        // 测试post请求
        $http({
            method: 'POST',
            url: 'index.php',
            // post请求需要加headers
            headers: {
                // 默认 multipart/form-data(表单数据方式)
                // application/json json方式,不生效
                'Content-Type': 'application/x-www-form-unlencoded'
            },
            data: 'username=frank&password=123'
        }).success(function (data) {
            // TODO 没返回数据
            console.log(data);
        }).error(function (err) {
            console.log(err);
        });;
    }]);
</script>
</body>
</html>

    9.过滤服务

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>{{mainControllerTitle}}</title>
    <link rel="stylesheet" href="css/libs/bootstrap.min.css">
    <link rel="stylesheet" href="css/apps/index.css">
</head>
<body>
<!--currency-->
<span>手机价格: </span>
<span>{{5799 | currency:'¥'}}</span>

<!--filter-->
<input type="text" ng-model="filter_input">
<ul>
    <!--TODO-->
    <li ng-repeat="pname in pnames track by $index | filter:filter_input">{{pname}}</li>
</ul>

<!--uppercase lowercase-->
<h2>{{'hello WORLD 你好世界' | uppercase}}</h2>
<h2>{{'hello WORLD 你好世界' | lowercase}}</h2>

<!--order by TODO-->
<ul>
    <li ng-repeat="info in infos | orderBy: 'username'">{{info.username + ',' +info.score}}</li>
</ul>

<!--加后缀-->
<p>{{famousPhase|surfix}}</p>
<script src="js/libs/angular.js"></script>
<script>
    /*
    * 过滤服务$filter,数据转换
    * 语法:{{任意内容 | 过滤器}}
    * 支持自定义服务
    * 1.currency 货币符号,将内容转换为货币,默认美元,支持定制
    * 2.filter 子集数组,从数组选项中筛选出符合要求的子集
    * 3.uppercase lowercase 大小写转换
    * 4.orderby 排序,根据表达式内容,一般用于复杂ng-repeat结构
    *
    * 自定义过滤服务
    * 通过filter方法扩展即可
    */
    var app = angular.module('app',[]);

    // 自定义过滤器
    app.filter('surfix', function () {
        return function (text) {
            return text.concat('--by Vincent');
        }
    });

    app.controller('mainController', ['$scope','$filter',  function ($scope, $filter) {
        $scope.mainControllerTitle = '过滤服务';
        $scope.filter_input = '';
        $scope.pnames = ['lili', 'lisa', 'lcisi', 'lcibai', 'lilei'];
        $scope.infos = [
            {
                username: 'zhangsan',
                score: '60'
            },
            {
                username: 'lisi',
                score: '10'
            },
            {
                username: 'wangwu',
                score: '100'
            }
        ];
        $scope.famousPhase = '吃饱不饿';
    }]);

</script>
</body>
</html>

    10.时间轴服务

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>{{mainControllerTitle}}</title>
    <link rel="stylesheet" href="css/libs/bootstrap.min.css">
    <link rel="stylesheet" href="css/apps/index.css">
</head>
<body>
<p>{{num}}</p>
<script src="js/libs/angular.js"></script>
<script>
    /*
    * 时间轴服务
    * 间隔 延迟 清除
    */
    var app = angular.module('app',[]);

    app.controller('mainController', ['$scope','$interval','$timeout',  function ($scope, $interval, $timeout) {
        $scope.mainControllerTitle = '时间轴服务';
        $scope.num = 0;
        // 测试间隔
        var timer = null;
        timer = $interval(function () {
            if($scope.num >= 10) {
                // 清除定时器
                $interval.cancel(timer);
            } else {
                $scope.num++;
            }
        }, 1000);
        // 测试延迟
        var timeout = null;
        timeout = $timeout(function () {
            alert('输出完毕');
        }, 2000);
    }]);

</script>
</body>
</html>

    11.监听服务

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>{{mainControllerTitle}}</title>
    <link rel="stylesheet" href="css/libs/bootstrap.min.css">
    <link rel="stylesheet" href="css/apps/index.css">
</head>
<body>
<input type="text" ng-model="myInput">
<script src="js/libs/angular.js"></script>
<script>
    /*
    * 监听服务 watch
    * 不需要注入,监听任何ng变量,并在值变化时回调
    */
    var app = angular.module('app',[]);

    app.controller('mainController', ['$scope',  function ($scope) {
        $scope.mainControllerTitle = '监听服务';
        // angular表达式或字符串 回调函数
        $scope.myInput = '';
        $scope.$watch('myInput', function () {
           console.log('监听到myInput发生变化:' + $scope.myInput);
        });
    }]);

</script>
</body>
</html>

    12.五种自定义服务

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>{{mainControllerTitle}}</title>
    <link rel="stylesheet" href="css/libs/bootstrap.min.css">
    <link rel="stylesheet" href="css/apps/index.css">
</head>
<body>
<!--{{msg}}-->
<div class="div1" ng-controller="controller1">
    <input type="text" ng-model="msg">
    <button ng-click="submit(msg)">保存</button>
</div>

<div class="div2" ng-controller="controller2">
    <p ng-bind="showMsg"></p>
    <button ng-click="download()">加载</button>
</div>
<script src="js/libs/angular.js"></script>
<script>
    /*
    * 自定义服务
    * 服务是对app数据模型的扩展,可以理解为服务即全局变量
    * 自定义服务需要手动编辑,需要注入后使用
    *
    * 五种方式
    * 1.value服务
    * value()方法扩展app数据模型,在controller之间数据交换
    * value服务就是一个全局变量
    *
    * 2.constant服务
    * 一旦定制完成,注入使用之前不能修改,多次定制只第一个生效
    *
    * 3.factory服务
    * 借鉴了工厂模式
    * factory()方法创建object结构并直接返回
    * 通过函数创建对象可以对对象操作扩充
    *
    * 4.service服务
    * 相当于本身已经构建了对象,服务内部通过this.操作
    * 1-4 注入之后才生效,注入前相当于不存在
    *
    * 5.provider服务
    * 占内存
    *
    * 目的都是提供一个全局变量,支持controller交流
    */
    var app = angular.module('app',[]);
    // 1.使用自定义服务传递变量
/*    app.value('VincentService', {
        pname: 'vincent'
    });

    app.controller('mainController', ['$scope', 'VincentService', function ($scope, VincentService) {
        $scope.mainControllerTitle = '自定义服务';
        $scope.msg = VincentService.pname;
    }]);*/

    // 2.contoller间传递变量
/*    app.controller('mainController', ['$scope', function ($scope) {
        $scope.mainControllerTitle = '自定义服务';

    }]);
    app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.msg = '';
        $scope.submit = function (tempMsg) {
            // 向全局变量存入msg
            globalObj.inputMsg = tempMsg;
            // 此种方式无法传递
//            $scope.showMsg = globalObj.inputMsg;
        }
    }]);

    app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.download = function () {
            // 从全局变量中读取
            $scope.showMsg = globalObj.inputMsg;
        }
    }]);

    app.value('globalObj', {
    });*/

    // 3.constant服务
/*    app.controller('mainController', ['$scope', function ($scope) {
        $scope.mainControllerTitle = '自定义服务';
    }]);
    app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.msg = '';
        $scope.submit = function (tempMsg) {
            // 向全局变量存入msg
            globalObj.inputMsg = tempMsg;
            // 此种方式无法传递
//            $scope.showMsg = globalObj.inputMsg;
        }
    }]);

    app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.download = function () {
            globalObj.inputMsg = 'lilei';
            // 从全局变量中读取
            $scope.showMsg = globalObj.inputMsg;
        }
    }]);

    app.constant('globalObj', {
    });
    // 不能重复定制
    app.constant('globalObj', {
        inputMsg: 'hello world'
    });*/

    // 3.factory服务
/*    app.controller('mainController', ['$scope', function ($scope) {
        $scope.mainControllerTitle = '自定义服务';

    }]);
    app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.msg = '';
        $scope.submit = function (tempMsg) {
            // 向全局变量存入msg
            globalObj.inputMsg = tempMsg;
            // 此种方式无法传递
//            $scope.showMsg = globalObj.inputMsg;
        }
    }]);

    app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.download = function () {
            // 从全局变量中读取
            $scope.showMsg = globalObj.inputMsg;
        }
    }]);

    app.factory('globalObj', function (){
        var obj = {};
        // 可以变更对象(函数调用 计算等)
        obj.showMsg = 'hello world';
        return obj;
    });*/

    // 4.service服务
    /*app.controller('mainController', ['$scope', function ($scope) {
        $scope.mainControllerTitle = '自定义服务';

    }]);
    app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.msg = '';
        $scope.submit = function (tempMsg) {
            // 向全局变量存入msg
            globalObj.inputMsg = tempMsg;
            // 此种方式无法传递
//            $scope.showMsg = globalObj.inputMsg;
            globalObj.setSecret('修改秘密');
        }
    }]);

    app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.download = function () {
            // 从全局变量中读取
            $scope.showMsg = globalObj.inputMsg;
            console.log(globalObj.getSecret());
        }
    }]);

    app.service('globalObj', function (){
        // 可以认为是构造函数
        this.showMsg = 'hello world';
        // 私有条目
        var secret = '这是一个秘密';
        // 特权函数暴露私有条目
        this.getSecret = function () {
            return secret;
        }
        // 设置私有条目
        this.setSecret = function (tempSecret) {
            secret = tempSecret;
        }
    });*/

    // 5.provider服务
    app.controller('mainController', ['$scope', function ($scope) {
        $scope.mainControllerTitle = '自定义服务';

    }]);
    app.controller('controller1', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.msg = '';
        $scope.submit = function (tempMsg) {
        }
    }]);

    app.controller('controller2', ['$scope','globalObj', function ($scope, globalObj) {
        $scope.download = function () {
            // 从全局变量中读取
            $scope.showMsg = globalObj.inputMsg;
        }
    }]);

    // 不注入也会占内存
    app.provider('globalObj', function (){
        this.$get = function () {
            var obj = {};
            obj.inputMsg = 'hello world';
            return obj;
        }
    });


</script>
</body>
</html>

    13.自定义指令

    <!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>{{mainControllerTitle}}</title>
</head>
<body>
<!--<vincentbtn></vincentbtn>-->
<!--<div vincentbtn></div>-->
<!--<div class="vincentbtn"></div>-->
<!-- directive:vincentbtn -->
<script src="js/libs/angular.js"></script>
<script>
    /*
    * 自定义指令-实现组件复用
    * 指令可以理解为属性,使页面元素有了半身之外的特殊功能
    * 自定义指令更像创建了一个组件
    * 通过app.directive()创建
    * 1.restrict指令类型,何种形式唤醒,A-属性 E-元素 C-类名 M-注释
    * 指令名称必须小写
    * 如果是M类型,replace字段必须设置为true
    * 如果通过template加载,有且只有一个根节点
    * 2.template指令结构,指令在页面中能够显示的html结构
    * 如果从外部加载指令结构,需要写成templateUrl
    * 3.replace指令复写
    * 指令在当前页面存在时,是否当成子元素或者替换当前元素
    */
    var app = angular.module('app',[]);
    // 名称小写
    app.directive('vincentbtn', function () {
        return {
            restrict: 'AECM',
            template: '<div><button>vincent自定义按钮</button></div>',
            // 一般都是true
            replace: true
        }
    });

    app.controller('mainController', ['$scope',  function ($scope) {
        $scope.mainControllerTitle = '自定义指令';
    }]);

</script>
</body>
</html>

    相关文章

      网友评论

          本文标题：前端-06-AngularJs

          本文链接：https://www.haomeiwen.com/subject/tvfpektx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|前端-06-AngularJs|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！