AnguelarJS学习笔记

最新推荐文章于 2024-08-09 08:06:23 发布
最新推荐文章于 2024-08-09 08:06:23 发布
阅读量397 收藏 1
点赞数
文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hmyhicc/article/details/77336385
版权

观看极客学院Angular学习视频，做了如下笔记。
Angular菜鸟教程 ，AngularJS教程，AngularJS中文网中也有较详细教程，可以仔细阅读学习下。

一、入门

1. AngularJS简介

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过<script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

2. 第一个AngularJS web 应用
->引入angular.js文件使用ng-app指令声明AngularJS管理边界。
->AngularJS双向绑定简单使用
双大括号{{}}
->常用指令的演示
ng-model，ng-bind

<!DOCTYPE html>
<html lang="en" ng-app="todoList">//
<head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px" 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>
<ul class="list-group">
    <li class="list-group-item" ng-repeat="item in tasks track by $index">
        {{item}}
        <a ng-click="tasks.splice($index,1)">删除</a>
    </li>
</ul>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
    angular.module('todoList',[])//声明
            .controller('TaskCtrl',function($scope){//控制器
                $scope.task='';
                $scope.tasks=[];
                $scope.add=function(){
                    $scope.tasks.push($scope.task);
                }
            })
</script>
</body>
</html>

ng-app指令声明AngularJS的管理边界。

二、进阶（1）

1. MVC的设计与搭建

->Model（模型）表示应用程序核心（比如数据库记录列表）。
->View（视图）显示数据（数据库记录）。
->Controller（控制器）处理输入（写入数据库记录）。

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
View（视图）是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。
Controller（控制器）是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVC 分层有助于管理复杂的应用程序，因为您可以在一个时间内专门关注一个方面。例如，您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。
MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。

2. Binding指令实现双向数据绑定

ng-bind 和 {{}} 的使用
<h1>{{username}}</h1>
<h1 ng-bind="username"></h1>
<h1 ng-clock class="ng-clock">{{username}}</h1>
三种方法的结果是一样的。如果想{{}}不显示在页面中，可以使用第二种或第三种。第三种方法的原理是先锁定h1，然后等username结果出来再显示在h1中。

3. Controllers的使用

->定义controller
->在controller中声明变量
->使用ng-bind绑定数据并显示controller的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>controller</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="firstCtrl">
    <h1 ng-bind="meg"></h1>
</div>
<div ng-controller="nextCtrl">
    <h1 ng-bind="meg"></h1>
</div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myctrl.js"></script>
</html>
//myctrl.js
angular.module("app",[])
.controller("firstCtrl",function($scope){
    $scope.meg="hello angular";
})
.controller("nextCtrl",function($scope){
    $scope.meg="hello world";
});

4. 在$scope中变量和方法的使用

->在$scope上定义方法并在页面上进行绑定调用
->在$scope上定义变量并在方法上使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$scope</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="myCtrl">
    <input type="text" ng-model="user.uname">
    <input type="text" ng-model="user.psd">
    <botton class="btn" ng-click="login()">登录</botton>
    <div class="err" ng-show="errormsg.length>0" ng-bind="errormsg"></div>
</div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myctrl.js"></script>
</html>
//myctrl.js
angular.module('app',[])
.controller("myCtrl",function($scope){
    $scope.user={uname:'',psd:''};
    $scope.errormsg='';
    $scope.login=function(){
        if($scope.user.uname=='admin'&&$scope.user.psd=='123456'){
            alert('登录成功！');
        }else {
            $scope.errormsg='用户名或密码错误';
        }
    }
});

三、进阶（2）

1. 自定义Services服务

依赖注入是部件赋予的，不是硬组件内的编码的依赖设计模式。这从定位减轻组件的依赖，使依赖可配置。这有助于使组件可重复使用，维护和测试。
AngularJS提供了一个至高无上的依赖注入机制。它提供了一种可被注入彼此作为依赖以下核心组件。

五种创建方法：
->值 - value
->工厂 - factory
->服务 - service
->提供者 - provider
->常量 - constant

  • 值是简单的JavaScript对象，并用它在配置阶段传递值到控制器。
  • 工厂是一个函数用于返回结果值。它根据需要创建一个值，当一个服务或控制器需要时。它通常使用一个工厂函数来计算和返回结果值
  • 服务是一个单独的JavaScript包含了一组函数对象来执行某些任务。服务正在使用 service() 函数，然后注射到控制器中。
  • 提供者使用AngularJS内部创建的服务，工厂等。在配置阶段(第一阶段AngularJS引导自身期间)。下面提及的脚本可以被用来创建，我们已经在前面创建了MathService。提供者是一个特殊的工厂方法使用get()方法来返回值/服务/工厂。
  • 常量用于通过配置的相应值，考虑到值不能在配置阶段传递使用。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>service服务</title>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="myCtrl">
    <h1>{{realname}}</h1>
    <h1>{{http}}</h1>
    <h1>{{data}}</h1>
    <h1>{{name}}</h1>
</div>
<script src="js/angular.min.js"></script>
<script src="js/serviceCtrl.js"></script>
</body>
</html>
//serviceCtrl.js
angular.module("app",[])
.value('realname','zhangsan')
.constant('http','http://www.baidu.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.msg;
    $scope.name=User.getName();
});

provider例子：

var mainApp = angular.module("mainApp", []);
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

2. Services的应用

如何在多个controller中共享数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>services服务</title>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="FCtrl">
    <input type="text" ng-model="data.msg">
    <h1>{{data.msg}}</h1>
</div>
<div ng-controller="SCtrl">
    <input type="text" ng-model="data.msg">
    <h1>{{data.msg}}</h1>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/services.js"></script>
</body>
</html>
//services.js
angular.module('app',[])
.factory('Data',function(){//共享数据
    return {
        msg:'我来自factory',
        shopcart:['1','2']
    }
})
.controller('FCtrl',function($scope,Data){
    $scope.data=Data;
})
.controller('SCtrl',function($scope,Data){
    $scope.data=Data;
});

3. 常用指令ng-repeat的使用

ng-repeat的使用
特有属性（$index,$first,$last）的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-app="app">
<ul ng-controller="addressList" class="list-group">
    <li class="list-group-item" ng-repeat="item in list">
        <h1 style="font-size: 14px;">{{$index+'.'+item.address+' '+$first+' '+$last}}</h1>
    </li>
</ul>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/repeat.js"></script>
</body>
</html>
//repeat.js
angular.module('app',[])
.controller('addressList',function($scope){
    $scope.list=[
        {id:'1',address:'万达B座101'},
        {id:'2',address:'万达B座201'},
        {id:'3',address:'万达B座301'},
        {id:'4',address:'万达B座401'}
    ]
});

运行结果：ng-repeat使用结果
$index：下标序号
$first：判断是否是第一条数据
$last：判断是否是最后一条数据

4. 常用指令的使用

指令ng-bind,ng-model,ng-show/hide,ng-if,ng-submit,ng-disabled 的使用。
指令ng-checked,ng-src,ng-href,ng-class,ng-selected,ng-change 的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用指令的使用</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .pic{display: block;margin: 30px 50px;width: 80px;height: 80px;}
    </style>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="checkForm">
    <form name="login" ng-submit="register(user)">
        <fieldset>
            <legend>基本信息</legend>
            <img ng-src="{{user.icon}}"  ng-class="{'pic':user.showIcon}" ng-if="user.isShowIcon">
            <input type="text" placeholder="用户名" required ng-model="user.name">
            <input type="password" placeholder="密码" required ng-model="user.psd"><br><br>
            职位：<select name="" id="">
                    <option value="">--请选择--</option>
                    <option value="1" ng-selected="user.job=='1'">java工程师</option>
                    <option value="2" ng-selected="user.job=='2'">.net工程师</option>
                  </select><br><br>
            性别：<input type="radio" name="sex" value="man" ng-checked="user.sex=='1'">&nbsp;男&nbsp;
            <input type="radio" name="sex" value="woman" ng-checked="user.sex=='2'">&nbsp;女
        </fieldset>
        <fieldset>
            <legend>爱好</legend>
            <div>
                <input type="checkbox" name="hobby" ng-checked="isChecked(1)">&nbsp;篮球&nbsp;
                <input type="checkbox" name="hobby" ng-checked="isChecked(2)">&nbsp;足球&nbsp;
                <input type="checkbox" name="hobby" ng-checked="isChecked(3)">&nbsp;羽毛球&nbsp;
            </div>
        </fieldset>
        <button class="btn submit" ng-disabled="login.$invalid">提交</button>
    </form>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ng.js"></script>
</body>
</html>
angular.module('app',[])
.controller('checkForm',function($scope){
    $scope.user={
        isShowIcon:true,
        showIcon:true,
        icon:'images/avatar.png',
        name:'',
        psd:'',
        sex:'1',
        job:'2',
        hobby:['1','2']
    };
    $scope.isChecked=function(n){
        var isok=false;
        for(var i=0;i<$scope.user.hobby.length;i++){
            if(n==$scope.user.hobby[i]){
                isok=true;
                break;
            }
        }
        return isok;
    };
    $scope.register=function(u){
        console.log(u);
    }
});

其中ng-submit="register(user)" 是表单提交时触发的事件，ng-disabled="login.$invalid"，其中login 是表单的name 值，此指令是指含有required 属性的输入框为空，所以此时的提交按钮为灰，不可提交的状态。

验证数据

以下可用于跟踪错误。

  • $dirty - 状态指示值已被改变
  • $invalid- 指示值的状态是无效的
  • $error- 指出确切的错误

四、内置服务$http 的使用

1. 使用$http 查询MySQL数据

  • $http发送请求
  • 查询MySQL数据库并返回数据

例子：

angular.module('app',[])
.config(function($httpProvider){

})
.controller('MyCtrl',function($scope,$http){
    $http.get('http://127.0.0.1:80/user/getUsers')
            .success(function(resp){
                 console.log(resp);//resp即为返回的数据
             })
})

$http.get() 可以改为 $http.post() ,这样请求时就可以带有参数。

2. $http 实现对数据的增删改

  • $http带参数发送请求
  • 对MySQL数据库增删改
angular.module('app',[])
.config(function($httpProvider){
})
.controller('myCtrl',function($scope,$http){
    $scope.id='';
      $scope.name='';
      $scope.adduser=function(){
          $http.post('http://127.0.0.1:80/user/adduser',{id:$scope.id,name:$scope.name})
                  .success(function(resp){
                      if(resp.success){
                          alert('添加成功');
                      }
                  })
      }
      $scope.deluser=function(){
          $http.post('http://127.0.0.1:80/user/deluser',{id:$scope.id})
                  .success(function(resp){
                      if(resp.success){
                          alert('删除成功');
                      }
                  })
      }
})

3. 用户角色权限实例

hmyhicc
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
AR学习笔记（四）：相关文献查阅
Sakurazzy的博客
11-03 897
AR学习笔记（四）：相关文献查阅导览正文Digital Smile Design A Tool for Treatment Planning and Communication in Esthetic Dentistry 之前自己做出来的效果并不好，下面找一找文献，借鉴一下人家的方法，做一个记录 相关的软件:ivosmlie 隐适美 好像国内相关的文章并不多，又花点了功夫读英文文献，数字微笑设计（DSD）比较符合我的题目 导览 Digital Smile Design A Tool for Treat
AR.js与A-Frame手势识别：沉浸式体验的未来之钥
gitblog_00093的博客
06-11 400
AR.js与A-Frame手势识别：沉浸式体验的未来之钥 arjs-gesturesRotate and zoom with touch gestures on any Image tracking or Marker Based AR.js scene项目地址:https://gitcode.com/gh_mirrors/ar/arjs-gestures 在数字时代的新篇章中，增强现实（AR）...
AR.js（摄像头前置）
07-07
现在手机大部分都是前后双摄，做AR的话，肯定是要后置摄像头的啦，但是AR.js在谷歌浏览器中，会打开后置，而现在QQ中则会打开前置摄像头。现在让我们开看看我们如何控制使用控制使用手机的前后摄像头。
【AR.js】初步认识与官方示例的使用
o0o
01-08 6311
说在前面 测试浏览器：Microsoft Edge(PC版本 97.0.1072.55)/Firefox(Android) github库：AR.js AR系列文章：这里 go版本：go version go1.17.3 windows/amd64 其他：本文的关注点在于官方用例。 关于AR.js 这里 他们有三种实现：基于标记、基于特征点、以及基于地理位置；前面两种差不大多。 优点：只要有支持webrtc以及webgl的浏览器就可以使用，不管是pc还是移动设备，十分便利。 基于图像(特征点)
探索未来科技：AR.js，增强现实的力量
gitblog_00063的博客
03-21 636
探索未来科技：AR.js，增强现实的力量 AR.jsImage tracking, Location Based AR, Marker tracking. All on the Web.项目地址:https://gitcode.com/gh_mirrors/arj/AR.js 简介 是一个开源的、高效的增强现实（AR）库，专为Web应用设计。通过将AR体验集成到网页中，它将传统的数字交互提升到了...
学习笔记学习笔记学习笔记
01-29
学习笔记学习笔记学习笔记
Java学习笔记学习笔记
10-24
Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习笔记Java学习...
java学习笔记.zip
11-16
java学习笔记java学习笔记.zipjava学习笔记.zipjava学习笔记.zipjava学习笔记.zipjava学习笔记.zipjava学习笔记.zipjava学习笔记.zipjava学习笔记.zipjava学习笔记.zipjava学习笔记.zipjava学习笔记.zipjava学习笔记...
Swift学习笔记含项目代码.zip
02-18
Swift学习笔记含项目代码.zipSwift学习笔记含项目代码.zipSwift学习笔记含项目代码.zipSwift学习笔记含项目代码.zipSwift学习笔记含项目代码.zipSwift学习笔记含项目代码.zipSwift学习笔记含项目代码.zipSwift学习...
WebARDemo:基于AR.js开发的WebAR演示
05-12
WebARDemo 1.基于AR.js开发的WebAR演示 2，PDF文件夹中的ARcode 3.如果您需要沟通，可以与我联系。 我的电子邮件地址是 。
ar.js demo
03-11
（ar.js +three.js 高效WebAR） AR技术（增强现实技术Augmented Reality，简称 AR），AR技术在Native中已经兴起了，并且市场上有许多成功的APP，但是对于JavaScript怎么来玩转AR呢？下面我来简单的给大家做了基于ar.js的WebAR小例子。
AR.js | 图像跟踪，特征识别触发事件
Nora Taki的博客
06-04 4962
文章目录图像跟踪（Image Tracking） 图像跟踪（Image Tracking） AR.js中提供了图像跟踪（Image Tracking）、基于定位（Location Based）、基于标记（Marker Based） 三种模式。其中图像跟踪模式是通过设备摄像头，扫描图片、绘画、照片等内容，从而定位场景的模式。 其中用到了 自然特征点跟踪（Nature Feature Tracking、NFT） 技术， ...
怎么在Web上构建增强现实体验
benhuyu_yohu的博客
12-20 476
AR.js是一个使用HTML、JavaScript和CSS等Web技术创建AR应用的框架。它建立在WebAR标准之上，支持在支持WebAR的设备上运行，无需用户安装任何应用程序。AR.js提供了一个简单而强大的平台，可用于在实际环境中放置虚拟物体、图案识别和互动体验。
用AR.js做图片追踪的webAR Demo
qq_28864105的博客
08-11 3235
用AR.js做图片追踪的webAR DemoDemo效果Demo项目地址部署使用页面代码替换想要追踪的图片(1)web版（推荐使用）(2)node版替换模型 Demo效果 可在手机浏览器中打开摄像头，识别特定的图片。 识别成功后显示对应的模型，模型位置会跟踪图片所在的位置，可对模型进行旋转或缩放 提示：以下是本篇文章正文内容，下面案例可供参考 Demo项目地址 https://github.com/a86861636/webAR-demo 项目文件目录 部署使用 手机浏览器打开摄像头需要https
使用AR.js打造WebAR入门课程（二）——基于图像标记，自行替换图像及模型
qq_24127447的博客
04-16 1604
在上一篇文章中只是简单地介绍了一下官方中基于图像标记的例子，并没有说到自己替换图像以及模型，这一篇文章主要就是简单讲一下怎么把自己的模型和图像替换上去。 上一篇文章地址：https://blog.csdn.net/qq_24127447/article/details/115718301 官方示例地址：https://github.com/AR-js-org/AR.js 首先先放一下官方示例的代码，然后我们根据代码来进行讲解。 <script src="https://cdn.jsdeliv
前端AR图像增强 + 图像追踪 + 模型渲染
weixin_49230250的博客
02-29 933
AR.js图像增强渲染3D模型 从而提高真实度AR识别想要达到效果。 图像追踪等方法
AR.js：开启网页增强现实的新纪元
最新发布
gitblog_01009的博客
08-09 297
AR.js：开启网页增强现实的新纪元 AR.jsImage tracking, Location Based AR, Marker tracking. All on the Web.项目地址:https://gitcode.com/gh_mirrors/arj/AR.js 项目介绍 AR.js 是一款轻量级的网页增强现实（Augmented Reality, AR）库，由 @jeromeetie...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值