Angular复习2

最新推荐文章于 2023-03-15 10:46:31 发布
最新推荐文章于 2023-03-15 10:46:31 发布
阅读量167 收藏
点赞数
分类专栏： 学习心得
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44423801/article/details/118531640
版权

01-使用provider函数创建服务

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/angular.js"></script>
</head>

<body ng-app="app">
    <div ng-controller="MainController">
        {{name}}
    </div>
    <script>
        //创建provider分为三个步骤
        var app = angular.module('app', [])
        //1创建一个函数，并且在函数中返回$get()函数对象
        var myFunction = function () {
            var name = "张三"
            return {
                $get: function () {
                    return {
                        //这里的函数才返回真正的数据
                        msg: name
                    }
                },
                changName: function (newName) {
                    name = newName
                }
            }

        }
        //2.用模块名provider来创建服务,并在第1个参数中为服务命名
        //第2个参数是提供功能的函数
        app.provider('myService', myFunction)
        //3.用模块名config来添加配置信息，使用服务名+provider，然后就可以调用相关函数
        app.config(function (myServiceProvider) {
            myServiceProvider.changName('李四')
        })
        //使用自定义服务，只需要在控制器的function参数里进行注入声明即可
        app.controller('MainController', function ($scope, myService) {
            $scope.name = myService.msg
        })
    </script>
</body>

</html>

02-使用factory函数创建服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/angular.js"></script>
</head>
<body ng-app="app">
     <div ng-controller="MainController">
       {{name}}
     </div>
    <script>
        var app=angular.module('app',[])
        //创建factory服务，并在服务的参数中定义服务名，和服务器提供的功能函数
        app.factory('myService',function(){
            return{
              name:'张三',
              changeName:function(newName){
               this.name=newName
              }
            }
        })
        app.controller('MainController',function($scope,myService){
            myService.changeName('李四')
            $scope.name=myService.name
        })
    </script>
</body>
</html>

03-service函数创建服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/angular.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="MainController">
        <input type="text" ng-model="msg">
        <input type="button" value="按钮" ng-click="say()">
    </div>
    <script>
        var app=angular.module('app',[])
        //创建service服务，service服务必须创建一个构造函数，构造函数中定义对象或功能函数
        var myFunction=function(){
            this.msg='Hello world'
            this.say=function(){
              alert(this.msg)
            }
        }
        app.service('MyService',myFunction)
        app.controller('MainController',function($scope,MyService){
          $scope.msg=MyService.msg
          $scope.say=MyService.say
        })
    </script>
</body>
</html>

04-$location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/angular.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="MainController">
        <p>$location.absUrl信息：完整的url地址</p>
        <p>{{absUrl}}</p>
        <hr>
        <p>$location.host信息：url主机信息</p>
        <p>{{host}}</p>
        <hr>
        <p>$location.port信息：端口号</p>
        <p>{{port}}</p>
        <hr>
        <p>$location.hash信息：hash地址</p>
        <p>{{hash}}</p>
        <hr>
        <p>$location.path信息：哈希地址中的子地址</p>
        <p>{{path}}</p>
        <hr>
    </div>
    <script>
          var app = angular.module('app', [])
        //  使用$location，需要在控制器的参数中进行注入声明
        app.controller('MainController', function($scope, $location){
            $scope.absUrl = $location.absUrl()
            $scope.host = $location.host()
            $scope.port = $location.port()
            //  在url的后面添加hash值‘123’
            $scope.hash = $location.hash(123).hash()
            //  在url的后面添加子路径
            $scope.path = $location.path('/about').path()
        })
    </script>
</body>
</html>

05-$watch监听$location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/angular.js"></script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="MainController">
            <a href="#!/all">全部</a>
            <a href="#!/invite">邀请中</a>
            <a href="#!/accept">已接受</a>
            <a href="#!/refuse">已拒绝</a>
        </div>
    </div>
    <script>
        var app=angular.module('app',[])
        //对$location 进行注入声明
        app.controller('MainController',function($scope,$location){
            //将$loaction挂载在$scope中，目的是为了使用$watch的监听
            $scope.location=$location
            //$watch监听$location的path()
            $scope.$watch('location.path()',function(newVal,ordVal){
                console.log(newVal)
            })
        })
    </script>
</body>
</html>

06-$routeParams

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/angular.js"></script>
    <!-- 1引入angular-route -->
    <script src="lib/angular-route.js"></script>
</head>

<body>
    <div ng-app="app">
        <div ng-controller="MainController">
            <a href="#!/index">index</a>
            <a href="#!/05">05</a>
            <a href="#!/about/2/lucy">lucy</a>
            <a href="#!/about/3/Karry">Karry</a>
        </div>
        <!--3 在HTML标签中绑定ng-view指令，负责子页面视图的渲染 -->
        <div ng-view></div>
    </div>
    <script>
        //2在主模块中依赖ngRoute模块
        var app = angular.module('app', ['ngRoute'])
        app.controller('MainController', function () {
            
        })
        //3使用模块名.config来配置路由实现，在function的参数里对$routeProvider服务进行注入声明
        app.config(function ($routeProvider) {
            //配置路由规则，参数1：待匹配的子路径，参数2是设置子页面视图和控制器的对象
            $routeProvider
                .when('/index', {
                    template: '<h2>{{name}}</h2>',         //设置视图模板，匹配成功后将渲染到页面的ng-view区域
                    controller: function ($scope) {        //设置控制器，将挂载的数据绑定在视图中
                        $scope.name = 'index'
                    }
                })
                .when('/05', {
                    templateUrl: './05-$watch监听$location.html'
                })
                .when('/about/:type/:name', {
                    template: '<h2>{{type}}:{{name}}</h2>',
                    controller: function ($scope, $routeParams) {    //注入声明，获取路由规则中参数
                        console.log($routeParams)
                        $scope.type = $routeParams.type
                        $scope.name = $routeParams.name
                    }
                })
                //没有匹配到规则时，一般设置跳转到主页
                .otherwise({
                    redirectTo:'/index'
                })
        })
        
    </script>
</body>

</html>

07-使用$http引用json文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/angular.js"></script>
</head>

<body>
    <div ng-app="app">
        <div ng-controller="MainController">
            {{msg}}
        </div>
    </div>
    <script>
        var app = angular.module('app', [])
        app.controller('MainController', function ($scope, $http) {
            //$http发送请求，获取服务端或者本地文件的数据
            $http({                             //在$http参数里写一个对象，在对象里设置请求的参数
                method: 'get',                  //如果仅读数据就用get，如果需要传参就用post
                url: 'data.json',             //读取的文件路径，实际开发中一般是服务器端口地址
               // params: { 'name': '张三' }      //传递参数对象
            }).then(function (okResult) {       //响应成功的回调函数，数据信息由参数带回
                $scope.msg=okResult.data.msg
            }), function (errResult) {          //响应失败的回调函数，错误信息由参数带回
                console.log(errResult.data)
                console.log(errResult.status)
            }
        })
    </script>
</body>

</html>

data.json

{
    "msg":"hello world"
}

实例案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/angular.js"></script>
    <script src="./lib/angular-route.js"></script>
</head>
<body>
    <div ng-app="app">
        <a href="#!/index">index</a>
        <a href="#!/first">05</a>
        <a href="#!/about/2/lucy">lucy</a>
        <a href="#!/about/3/banny">banny</a>
        <div ng-view></div>
    </div>
    <script>
        var app=angular.module('app',['ngRoute'])
        app.config(function($routeProvider){
            $routeProvider
                    .when('/index',{
                        template:'<h2>{{name}}</h2>',
                        controller:function($scope){
                            $scope.name='index'
                        }
                    })
                    .when('/first',{
                        templateUrl:'05-$watch监听$location.html'//跳转05页面
                    })
                    .when('/about/:id/:name',{
                        template:'<h2>{{params}}</h2>',
                        controller:function($scope,$routeParams){
                            $scope.params=$routeParams
                        }
                    })
                    .otherwise({
                        redirectTo:'/index'
                    })
        })
    </script>
</body>
</html>

邀请示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/angular/angular.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap/bootstrap.css">
    <!-- 引入ModelService.js文件，这样才能使用js文件中的模块和其他元素,
     而且必须放在angular.js的引入之后-->
    <script src="./js/ModulService.js"></script>
    <style>
        body {
            background-color: orange
        }

        .row {
            margin: 15px 0;
            /*上下15px 左右0px */
        }
    </style>
</head>

<body ng-app="app">
    <div class="container" ng-controller="MainController">
        <!-- 标题栏 -->
        <div class="row text-center">
            <h1>邀请名单</h1>
        </div>
        <!-- 嘉宾信息输入框 -->
        <div class="row form-inline">
            <div class="input-group">
                <div class="input-group-addon">姓名</div>
                <input type="text" class="form-control" placeholder="请输入姓名" ng-model="info.name">
            </div>
            <div class="input-group">
                <div class="input-group-addon">电话</div>
                <input type="text" class="form-control" placeholder="请输入电话" ng-model="info.phone">
            </div>

            <button type="button" class="btn btn-success" ng-click="invite()">邀请</button>

        </div>

        <!-- 嘉宾状态筛选按钮组 -->
        <div class="row">
            <a href="#!/all" class="btn btn-success btn-sm">显示全部</a>
            <a href="#!/invite" class="btn btn-success btn-sm">显示邀请中</a>
            <a href="#!/accept" class="btn btn-success btn-sm">显示已接受</a>
            <a href="#!/refuse" class="btn btn-success btn-sm">显示已拒绝</a>
        </div>
        <!-- 嘉宾列表 -->
        <div class="row">

            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>嘉宾姓名</th>
                        <th>嘉宾电话</th>
                        <th>嘉宾状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="guest in guests">
                        <td>{{ $index + 1 }}</td>
                        <td>{{ guest.name }}</td>
                        <td>{{ guest.phone }}</td>
                        <td>{{ guest.state }}</td>
                        <td>
                            <!-- 当嘉宾状态为邀请中时才显示接收邀请、拒绝邀请按钮 -->
                            <span ng-if="guest.state == '邀请中'">
                                <button type="button" class="btn btn-success btn-xs" ng-click="guest.accept()">接收邀请</button>
                                <button type="button" class="btn btn-danger btn-xs" ng-click="guest.refuse()">拒绝邀请</button>
                            </span>
                            <button type="button" class="btn btn-default btn-xs" ng-click="remove(guest)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
    <script>
        //在主模块中依赖model模块，目的为了使用model模块定义的服务
        app = angular.module('app', ['model'])
        //  注入声明服务modelService，和$location
        app.controller('MainController', function ($scope, $location, modelService) {
            var state = Guest.ALL    // 默认显示全部嘉宾
            // 获取嘉宾列表，并挂载在$scope的属性中 
            $scope.guests = modelService.getList(state)
            $scope.location = $location
            //  监听$location中的子路径，对列表进行筛选
            $scope.$watch('location.path()', function (newVal) {
                switch (newVal) {
                    case '/all':
                        state = Guest.ALL
                        break;
                    case '/invite':
                        state = Guest.INVITE
                        break;
                    case '/accept':
                        state = Guest.ACCEPT
                        break;
                    case '/refuse':
                        state = Guest.REFUSE
                        break;
                }
                //  重新获取嘉宾列表，更新页面
                $scope.guests = modelService.getList(state)
            })
            //  挂载嘉宾信息，并与页面的输入框进行双向绑定
            $scope.info = { name: '', phone: '' }
            $scope.invite = function () {
                //添加嘉宾信息到列表中
                var msg = modelService.add($scope.info.name, $scope.info.phone)
                switch (msg.code) {
                    case 1:
                        alert('姓名或电话不能为空')
                        break;
                    case 2:
                        alert('嘉宾电话不能重复')
                        break;
                }
            }
            $scope.remove=function(guest){
                modelService.remove(guest)
                //  重新获取嘉宾列表，更新页面
                $scope.guests = modelService.getList(state)

            }
        })
    </script>
</body>

</html>

Larrywjk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
springboot项目中的静态页面引入angularjs和bootstrapcss
劫的博客
03-15 447
这篇文章介绍在静态页面中使用angular.js和bootstrap.css进行页面内容加载和布局。 1.下载angular.min.js和bootstrap.min.css。 2.在项目的src/main/resources下建一个static文件夹。 3.把下载好的angular.min.js和bootstrap.min.css放到static文件夹下。注意：这里为了以后方便管理文件，可...
Pro Angular2,第二版，英文原版
03-07
### Pro Angular2, 第二版 英文原版 #### 书籍概述 《Pro Angular》第二版是一本专为希望深入了解Angular框架的开发者们编写的高级指南。本书由经验丰富的技术作者Adam Freeman撰写，旨在帮助读者掌握如何在现代Web...
AngularJS（四）——ng-controller（控制器）
diaoyu3131的博客
10-14 246
前言 上篇大概说了一下指令的应用格式以及创建自定义指令方法，本篇重点介绍一些ng-controller都有哪些小作用。 内容 通过修改控制器部分，修改显示界面。 Demo <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="first...
angular 语法的应用
weixin_30677073的博客
06-27 111
　　angular.js 一个js框架 ， 是三大主流框架之一：（ vue react angular ）； 　　原先的开发：前端和后台，利用 Ajax 进行交互， 　　但是框架却提出了一种开发模式：mvc　　这中模式应用也是极其广，微信小程序，三大框架，等； 　　mvc　　m代表：module 仓库　　v代表：view 视图层　　c代表：controller 控制器； 　　也就是说，...
angular学习笔记(三十一)-$location(1)
11-01 353
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的相关方法: 以 'http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例:...
Angular复习
最新发布
lianyachao的博客
03-15 120
注意：component.css 仅用于组件，src根目录下的style.css全局的样式。
Angular2详解
极客园地
08-05 1387
软件开发综合实训是Angular 2+的开发，通过一个实战项目复习一下Angular的使用和TypeScript的语法。 一、搭建脚手架 https://cli.angular.io/或者angular官网 1.安装Angular的CLI npm install -g @angular/cli 2.创建一个新项目 ng new my-app 3.启动服务 cd my-a...
angular20-复习2
qq_41632427的博客
07-09 71
面试
angular路由笔记_Angular复习笔记7-路由（下）
weixin_39867893的博客
12-18 163
Angular复习笔记7-路由(下)这是angular路由的第二篇，也是最后一篇。继续上一章的内容路由跳转Web应用中的页面跳转，指的是应用响应某个事件，从一个页面跳转到另一个页面的行为。对于使用Angular构建的单页应用而言，页面跳转实质上就是从一个配置项跳转到另一个配置项的行为。页面跳转流程如下图所示，当某个事件引发了跳转时，Angular会根据跳转时的参数生成一个UrlTree实例来和配置...
angular路由笔记_Angular复习笔记7-路由（上）
weixin_39738380的博客
12-18 198
Angular复习笔记7-路由(上)关于Angular路由的部分将分为上下两篇来介绍。这是第一篇。概述路由所要解决的核心问题是通过建立URL和页面的对应关系，使得不同的页面可以用不同的URL来表示。主流前端框架围绕这个问题给出了各自的路由实现，虽然语法和工作机制不尽相同，但理念却殊途同归。在Angular中，页面由组件构成，因此URL和页面的对应关系实质上就是URL和组件的对应关系。建立URL和组...
angular1 demo
09-07
AngularJS，通常被称为Angular1，是Google开发的一个前端JavaScript框架，用于构建动态Web应用程序。...对于初学者，这是一个很好的实践平台，对于有经验的开发者，它也是一个复习和验证AngularJS技能的好资源。
angular-exercise
05-30
**Angular Exercise 深度解析** Angular 是一个强大的前端开发框架，由Google维护，主要用于构建交互式...这个练习项目为初学者提供了一个很好的起点，同时也适合有一定经验的开发者用来复习和实践Angular的最佳实践。
flickr_angular
06-06
＃设置 npm install ＃跑步 gulp #about 这是伦敦一家名为 Potato 的机构为我设置的任务，当时我提到我的 github 帐户需要更多内容。 这是一个复习我的 npm、gulp、... 我希望我的下一个 Angular 项目进展得更快一点
angular-phonecat
07-10
"angular-phonecat"是AngularJS官方提供的一款教程应用，它旨在引导开发者逐步了解并掌握AngularJS框架的使用。...同时，对于有经验的开发者，"angular-phonecat"也能作为复习或深入理解AngularJS特性的参考案例。
前端过滤filter()
Larry的博客
01-24 6730
array.filter(function(currentValue, indedx, arr), thisValue) 二、参数描述 currentValue：必须。当前元素的值; index：可选。当前元素的索引值； arr：可选。当前元素属于的数组对象； thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"。 三、注意 filter用于对数组进行过滤。 它创建一个新数组，新数组中的元
人脸识别-特征脸方法
Larry的博客
03-30 3172
特征脸EigenFace的思想是把人脸从像素空间变换到另一个空间，在另一个空间中做相似性的计算。 EigenFace选择的空间变换方法是PCA，主成分分析。PCA也常被称为特征脸方法。是一种基于人脸特征提取的人脸识别核心技术。它广泛的被用于预处理中以消去样本特征维度之间的相关性。 EigenFace方法利用PCA得到人脸分布的主要成分，具体实现是对训练集中所有人脸图像的协方差矩阵进行本征值分解，得...
前端页面自适应
Larry的博客
12-09 2627
前端页面自适应参考网页 rem 单位（高度） 宽度100% 设置viewport进行缩放 <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小 html{ font-size:20px; } .btn { width: 6rem; height: 3r
人工智能-Anaconda使用和必要的安装库
Larry的博客
07-07 2290
Anaconda 鸢尾花数据 Python
Angular 2入门指南：构建Reddit应用
"ng2 book forum" 是一本关于Angular 2（ng2）的指南书籍，由Felipe Coury、Ari Lerner、Nate Murray和Carlos Taborda共同创作，出版日期范围在2015-2016年。本书的主要内容包括预览版本更新、报告bug的渠道、以及...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值