李亚杰
李亚杰

AngularJs学习教程

AngularJs

AngularJs学习教程_第1张图片

  • 目录
    • AngularJs实战一 购物车
    • 细讲ng-repeat指令
    • ng-show和ng-hide
    • ng-class指令
    • ng-src和ng-href
    • 应用控制器中的职责
    • watch来监控数据模型的变化
    • 创建服务
    • 自定义过滤器
    • 使用路由和$location切换视图

AngularJs实战一 购物车

  • 本示例用的是angularjs v1.5

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
</head>
<body ng-app='shopcar'>
<div ng-controller='shopcarCtrl'>
    <h1>Your Order</h1>
    <div ng-repeat='item in items'>
        <span>{{item.title}}</span>
        <input ng-model='item.quantity' />
        <span ng-bind='item.price | currency'></span>
        <span ng-bind='item.price * item.quantity | currency'></span>
        <button ng-click='remove($index)'>Remove</button>
        <span ng-bind='$index'></span>
    </div>
</div>
<script type="text/javascript" src="js/angularjs-v1.5.0.js"></script>
<script>
    var app = angular.module('shopcar',[])
    app.controller('shopcarCtrl',function($scope){
        $scope.items = [
        {title:'苹果',quantity:'2',price:'3.1'},
        {title:'香蕉',quantity:'3',price:'2.1'},
        {title:'橘子',quantity:'4',price:'1.1'}
        ]
        $scope.remove = function(index){
            $scope.items.splice(index,1)
        }
    })
</script>
</body>
</html>
  • 分析
    1. <body ng-app='shopcar'> ng-app属性(angularjs中是指令)就是告诉Angular页面中的哪一部分是需要接受angularjs来管理解析的,我们放到了body标签上就说明,body内是受angular来管理的
    2. <div ng-controller='shopcarCtrl'> ng-controller 属性就是用来控制
      之间的所有的内容,这个就是 angularjs中的控制器,说白了就是一个 javascript方法
    3. <div ng-repeat='item in items'> 就是遍历,把这个标签下的所有的内容都遍历,这个标签就是当前这个div
    4. <span>{{item.title}}</span> 通过{{ }} 把item.title的值绑定到span标签的innerHTML,如下的<span ng-bind='item.title'></span>也是这个意思,但是ng-bind的好处是再网速慢的情况下不会把{{item.title}}显示出来
    5. <input ng-model='item.quantity' /> 把输入框和item.quantity的值之间创建数据绑定关系
    6. <span>{{item.price | currency}}</span> 其中currency就是angular内置的一个过滤器,让item.price以美元的形式显示
    7. <button ng-click='remove($index)'></button> ng-click则是给button添加一个点击事件,点击的时候久会调用remove方法,\(index就是ng-repeat再遍历的时候的索引,从0开始,\)index也就是元素的索引

细讲ng-repeat指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
</head>
<body ng-app='angularrepeat'>
    <div ng-controller='studentsc'>
        <ul>
            <li ng-repeat='stu in students'>
                <a href="#" ng-click='showinfo($index)'>{{stu.name}}</a>
                <span>
                是否是第一个:{{$first}} 是否是最后一个:{{$last}} 是否是中间的一个{{$middle}} 是否是偶数位:{{$odd}} 是否是奇数位:{{$even}}
                </span>
            </li>
        </ul>
        <span ng-bind='stuinfo'></span>
        <button ng-click='insertDom()'>Add Stu</button>
    </div>

    <script type="text/javascript" src="js/angularjs-v1.5.0.js"></script>
    <script type="text/javascript">
        var app = angular.module('angularrepeat',[])
        app.controller('studentsc',function($scope){
            $scope.students = [
                {name:'liyajie1',age:12,id:1},
                {name:'liyajie2',age:13,id:2},
                {name:'liyajie3',age:14,id:3}
            ]
            $scope.showinfo = function(index){
                var s = $scope.students[index]
                $scope.stuinfo = s.name+'---'+s.age+'---'+s.id;
            }
            $scope.insertDom = function(){
                $scope.students.splice(1,0,{name:'liyajie4',age:14,id:4})
            }
        })
    </script>
</body>
</html>
  • 分析如上代码
    • 上面的功能主要是把学生的信息都给显示出来,点击学生名字的时候下面显示对应的详细信息,点击Add Stu按钮的时候新增一个学生liyajie4
    • $index:当前元素索引 number
    • $first 是否是第一个 boolean
    • $last 是否是最后一个 boolean
    • $middle 是否是中间的一个 boolean,如果数组是偶数个元素,则中间两个
    • $even 是否是奇数位 boolean
    • $odd 是否是偶数位 boolean
    • $index是从0开始,其他的是从1开始算

ng-show和ng-hide指令

说明

  • ng-show 为true的时候显示,false的时候隐藏
  • ng-hide 则和ng-show相反

  • 示例代码如下

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏</title>
<style type="text/css">
.menu-disabled-true{
    color:gray;
}
</style>
</head>
<body ng-app='showandhide'>
<div ng-controller='showhidectrl'>
    <button ng-click='toggleMenu()'>显示或隐藏</button>
    <ul ng-show='menustate'>
        <li class="menu-disabled-{{isDisabled}}" ng-click="stun()">Stun</li>
        <li ng-click="dis()">Dis</li>
        <li ng-click="erase()">Erase</li>
    </ul>
</div>
<script type="text/javascript" src="js/angularjs-v1.5.0.js"></script>
<script>
    var app = angular.module('showandhide',[])
    app.controller('showhidectrl',function($scope){
        $scope.menustate = true;
        $scope.toggleMenu = function(){
            $scope.menustate = !$scope.menustate
        }
        $scope.isDisabled = false
        $scope.stun = function(){
            $scope.isDisabled = true;
        }

    })
</script>
</body>
</html>

    相对来说这个指令没什么困难

ng-class样式指令

通过上面ng-show的示例代码中也看到了,通过改变class的名字来控制文字的样式,这样是很灵活的,但是当需要再模板和javascript中使用时它就会变得无法维护,进而无法正确创建css,正式因为这个AngularJs给我们提供了ng-class和ng-style指令,如下是两个例子

1. 在页面最上方切换错误和警告消息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-class 在页面头部显示错误或警告信息</title>
    <style type="text/css">
    body,div{
        padding: 0;
        margin: 0;
    }
    button{
        width:80px;
        padding: 5px 10px;
        border:none;
        border-radius:5px;
        background-color:#0094ff;
    }
        .error{
            height:50px;
            text-align:center;
            background-color:#ff0000;
        }
        .warning{
            text-align:center;
            height:50px;
            background-color:#FF8000;
        }
    </style>
</head>
<body ng-app='ngclass'>
    <div ng-controller='ngctrl'>
        <div ng-class='{error:isError,warning:isWarning}'>{{msg}}</div>
        <button ng-click='showerror()'>Error</button>
        <button ng-click='showwarn()'>Warning</button>
    </div>
    <script type="text/javascript" src="js/angularjs-v1.5.0.js"></script>
    <script>
        var app = angular.module('ngclass',[])
        app.controller('ngctrl',function($scope){
            $scope.showerror = function(){
                $scope.isError = true;
                $scope.isWarning = false;
                $scope.msg = '这是错误消息';
            }
            $scope.showwarn = function(){
                $scope.isError = false;
                $scope.isWarning = true;
                $scope.msg = '这是警告消息';
            }
        })
    </script>
</body>
</html>

2. 选中行后变颜色

...

  • 转自：【李亚杰技术小栈】
  • 更多教程请到：李亚杰技术小栈

你可能感兴趣的:(AngularJs学习教程)

  • 在Ubuntu上安装MEAN Stack的4个步骤 Kaede6 技术文章-Linux服务部署ubuntulinux运维
    在Ubuntu上安装MEANStack的4个步骤为：1.安装MEAN；2.安装MongoDB；3.安装NodeJS，Git和NPM；4.安装剩余的依赖项。什么是MEANStack？平均堆栈一直在很大程度上升高为基于稳健的基于JavaScript的开发堆栈。名称的意思是指其组件;MongoDB，ExpressJS，Angularjs和NodeJS。第1步：安装MEAN对于此安装，我们将在本指南中使用
  • 构建AngularJS动态Web应用的示例教程 你这人真狗
    本文还有配套的精品资源，点击获取简介：AngularJS是一个由Google支持的前端JavaScript框架，用于创建动态Web应用程序。本文将通过一个名为“angular-sample-app”的示例应用程序，详细介绍AngularJS的核心特性，包括双向数据绑定、控制器、指令系统、服务与依赖注入、表单处理、路由与导航、模板和局部存储以及其他高级特性。通过这个示例应用的深入剖析，开发者可以学习
  • Blender学习方法与技巧 自动化专业爱好者 网络
    以下是针对Blender零基础用户的学习教程推荐与高效学习方法总结，结合了多个优质资源整理而成，帮助快速入门：一、Blender学习方法与技巧制定学习计划与目标明确短期目标（如掌握基础操作）和长期目标（如独立完成场景建模），建议每天投入2-3小时系统学习。初期以熟悉界面、快捷键和基础工具为主，逐步过渡到建模、材质和渲染的综合应用。高效利用教程资源视频教程优先：视觉化学习更直观，推荐B站、YouTu
  • CSS3学习教程，从入门到精通，CSS3 列表样式语法知识点及案例代码（8） 知识分享小能手 前端开发网页开发编程语言如门css3学习前端csshtml5htmlJava开发
    CSS3列表样式语法知识点及案例代码一、列表样式类型1.list-style-type属性用于指定列表项标记的样式类型。语法格式：list-style-type:;取值说明：对于无序列表（），常见的取值有：disc：实心圆（默认值）。circle：空心圆。square：实心方块。none：无标记。对于有序列表（），常见的取值有：decimal：数字（默认值）。lower-roman：小写罗马数字。
  • CSS3学习教程，从入门到精通，CSS3 选择器权重问题语法知识点及案例代码（5） 知识分享小能手 网页开发编程语言如门前端开发css3学习前端html5htmljavacss
    CSS3选择器权重问题语法知识点及案例代码一、选择器权重概述在CSS中，当多个选择器同时匹配同一个元素时，浏览器会根据选择器的权重来决定哪个样式生效。权重高的选择器的样式会覆盖权重低的选择器的样式。二、选择器权重计算规则1.内联样式（InlineStyles）内联样式直接写在HTML元素的style属性中，权重为1000。2.ID选择器（IDSelectors）ID选择器以#开头，权重为100。3
  • CSS3学习教程，从入门到精通，CSS3 常用文本属性语法知识点及案例代码（6） 知识分享小能手 前端开发网页开发编程语言如门css3学习前端csshtml5javascriptweb开发
    CSS3常用文本属性语法知识点及案例代码一、文本颜色(color)语法:color:;取值:颜色名称:例如red,blue,green等十六进制颜色值:例如#ff0000,#00ff00,#0000ff等RGB颜色值:例如rgb(255,0,0),rgb(0,255,0),rgb(0,0,255)等RGBA颜色值:例如rgba(255,0,0,0.5),rgba(0,255,0,0.5),rgba
  • CSS3学习教程，从入门到精通， CSS3 样式引入语法知识点及案例代码（2） 知识分享小能手 前端开发网页开发编程语言如门css3学习前端html5html开发语言css
    CSS3样式引入语法知识点及案例代码一、CSS3样式引入方式CSS3样式可以通过以下几种方式引入到HTML文档中：1.内联样式(InlineStyles)语法：直接在HTML元素的style属性中编写CSS代码。优点：优先级最高，方便调试。缺点：不利于维护和复用，代码冗余。案例：这是一个段落。2.内部样式表(InternalStyleSheet)语法：在HTML文档的标签内使用标签定义CSS样式。
  • JAVA从万级QPS到亿级吞吐，如何用非阻塞模型突破传统架构的性能瓶颈 王大师王文峰 java架构开发语言
    本人详解作者：王文峰，参加过CSDN2020年度博客之星，《Java王大师王天师》公众号：JAVA开发王大师，专注于天道酬勤的Java开发问题中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯山峯转载说明：务必注明来源（注明：作者：王文峰哦）JAVA从万级QPS到亿级吞吐，如何用非阻塞模型突破传统架构的性能瓶颈学习教程（传送门）引言：当线程池成为瓶颈——某视频平台春节
  • N个utils(处理日期) 庖丁解java java
    解释一下为什么会在java学习教程中放js的代码.1,最直接的肯定是我有时候会写js,而一些经典的逻辑,又不想新开前端文章,索性就放一起.2,java的面向对象太完善了,这也是我写文章的原因,导致写java代码很难学习到面向过程的编程思想,正好,原生js的代码,很大程度上写起来用的思维方式,很雷同面向过程的思考方式.算个补全,对写java代码,理解java代码,大有裨益.(这不是作者胡乱找补,写j
  • Python史上最强工具书——《Python编程 从入门到实践》，允许白嫖 编程咕咕gu- Python教程pythonPython基础开发语言Python书籍
    今天给大家推荐一本超级适合自学的Python的工具书——《Python编程从入门到实践》。非常的适合零基础的小白来学习！备受业内人士推崇，豆瓣评分高达9.1！这本书分为两个部分：第一部分介绍了编程环境的搭建和Python编程所必须了解的基本概念；第二部分介绍了三个具体项目：分别是射击游戏、数据可视化、小型Web应用程序。部分内容截图：上面的学习教程资料已经是给大家整理打包完毕了，需要的可以直接带走
  • CSS3学习教程，从入门到精通， CSS3入门介绍的语法知识点及案例（1） 知识分享小能手 前端开发网页开发编程语言如门css3学习csshtml5前端javahtml
    CSS3入门介绍一、CSS3选择器1.1基本选择器/*元素选择器*/p{color:red;}/*类选择器*/.myClass{font-size:20px;}/*ID选择器*/#myId{background-color:yellow;}/*通用选择器*/*{margin:0;padding:0;}这是一个段落这是一个带有类的段落这是一个带有ID的段落1.2属性选择器/*属性选择器*/[href
  • vue3学习教程第二十六节（Hooks 封装注意事项） 刺客-Andy vue3vue.jsjavascript前端
    1、什么是HooksHooks最先提出的是React，在React16之后提出了所有以use开头定义的函数，用于复杂功能编写、函数组件中状态管理共用、副作用处理而抽离的共用的单一功能可复用的函数；2、Hooks与mixinsClass在应用中的差异在vue2中的mixinsClass主要有以下缺点：a、数据来源不清晰：在一个单文件组件中引入多个mixins或者class时候，想要追踪一个方法或者属
  • Html5学习教程，从入门到精通， HTML5超链接应用的详细语法知识点和案例代码（18） 知识分享小能手 网页开发前端开发编程语言如门html5学习前端htmljava后端css3
    HTML5超链接应用的详细语法知识点和案例代码超链接（Hyperlink），也称为跃点链接，是互联网和文档编辑中的一种重要概念。超链接的定义超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、动画、程序、电子邮件地址、文件，甚至是一个音视频文件。如果点击了这个链接，当前页面的位置就会跳转到被链接的目标位置。在文档编辑中，超链接可以链
  • Vue 技术博客：从零开始构建一个 Vue Markdown 编辑器 王大师王文峰 Java基础到框架vue.js编辑器前端
    本人详解作者：王文峰，参加过CSDN2020年度博客之星，《Java王大师王天师》公众号：JAVA开发王大师，专注于天道酬勤的Java开发问题中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯山峯转载说明：务必注明来源（注明：作者：王文峰哦）学习教程（传送门）Vue技术博客：从零开始构建一个VueMarkdown编辑器前言环境准备实现步骤1.引入组件与库2.模板设计3
  • Html5学习教程，从入门到精通，HTML 5 图像语法知识点语法知识点及案例代码（9） 知识分享小能手 前端开发网页开发编程语言如门htmlhtml5学习前端java编辑器开发语言
    HTML5图像语法知识点在HTML5中，图像是通过标签来嵌入的。以下是关于标签的详细知识点：基本语法：src：指定图像的URL或路径。alt：为图像提供替代文本，当图像无法显示时，浏览器会显示这个文本。可选属性：width和height：指定图像的宽度和高度（以像素为单位）。title：为图像提供额外的提示信息，当用户将鼠标悬停在图像上时会显示。loading：指定图像的加载方式，lazy表示延迟
  • Html5学习教程，从入门到精通，HTML 5 表格语法知识点 & 案例代码（10） 知识分享小能手 前端开发网页开发编程语言如门htmlhtml5学习java开发语言前端设计语言
    HTML5表格语法知识点&案例代码一、HTML表格基础HTML表格用于展示数据，由行和列组成。1.1基本结构:定义表格。:定义表格行。:定义表格单元格。:定义表格表头单元格，默认加粗居中。1.2案例代码简单表格学生成绩表姓名语文数学英语张三908588李四789280代码解释::定义表格，并设置边框宽度为1像素。:定义表格行。:定义表头单元格，显示为“姓名”、“语文”、“数学”、“英语”。:定义普
  • Html5学习教程，从入门到精通，HTML `＜div＞` 和 `＜span＞` 标签：语法知识点与案例代码（12） 知识分享小能手 前端开发网页开发编程语言如门htmlhtml5学习前端开发语言java前端框架
    HTML和标签：语法知识点与案例代码一、语法知识点1.标签定义:是一个块级元素，用于将文档内容划分为独立的、可样式化的部分。它本身没有特定的语义，主要用于布局和分组。特点:块级元素，默认占据一整行。可以包含其他块级元素和行内元素。常用于创建页面的布局结构，例如头部、导航栏、内容区域、侧边栏、底部等。属性:通用属性:例如id,class,style,title等。事件属性:例如onclick,onm
  • 清华内部DeepSeek学习资料曝光｜104页PPT带你从入门到专家 每日AI 人工智能学习pdf
    资料链接:https://pan.quark.cn/s/55b250244ca3近期，苹果/微软/字节跳动等企业纷纷将DeepSeek纳入核心技术栈。清华北大也相继发布DeepSeek相关学习教程。尤其是清华大学发布的《DeepSeek从入门到精通》发布当日就被众多网友顶上热搜。如今清华大学和北京大学相继出版了共8份DeepSeek核心内部学习资料，我已经帮大家搞到了！完整版资料领取链接已放在文章
  • ArcGIS学习教程视频含ArcMap/ArcCatalog（二狮兄）的简介和目录部分免费 weixin_37545874 arcgisgis
    ArcGIS学习教程视频含ArcMap/ArcCatalog（二狮兄）的简介和目录部分免费适用人群ArcGIS目前的应用范围非常广泛，包括但不限于从事地理景观、生态环境、规划设计相关的人员，如教师、科研人员、学生等等。课程概述课程分为上中下三部，已全部录制完毕，全部课程120节。在线观看地址见下面目录。课程特征1，没有多余的闲话。大家观看免费试学即可发现，没有纯口头ppt干讲，全部为软件技术实操。
  • 清华大学发布最新版DeepSeek学习教程，完整版pdf合集，速收藏。 大器晚成667 pdf人工智能深度学习学习AI写作
    资料链接：https://pan.quark.cn/s/bb6ebf0e9b4d前日，清华发布的《DeepSeek从入门到精通》长达104页，还没学完，清华大学又发布了几个重磅教程！清华大学《DeepSeek+DeepResearch：让科研像聊天一样简单》，《普通人如何抓住DeepSeek红利》，《DeepSeek如何赋能职场应用》等等，这些教程将学习的受众群体从新手小白扩展到了科研人员，职场人
  • Vue学习教程-16html标签元素绑定事件 番茄番茄君 vue.js学习前端
    文章目录前言一、表单数据绑定事件二、多媒体元素绑定1.图片img和视频元素video三、容器元素绑定事件前言在Vue中，你可以通过v-on指令（或在Vue2.x中简写为@）来绑定事件。这种方式允许你监听DOM事件，并在触发时执行一些JavaScript代码。常见的元素主要是表单数据元素、多媒体元素和容器元素。一、表单数据绑定事件常见的表单数据元素1.文本输入框元素3.多选框元素4.下拉框元素5.按
  • Html5学习教程，从入门到精通，HTML 5 链接语法知识点及案例代码（7） 知识分享小能手 前端开发编程语言如门网页开发htmlhtml5学习前端开发语言java后端开发web
    HTML5链接语法知识点及案例代码一、HTML链接基础1.1链接标签标签用于定义超链接，用户点击后可以跳转到其他页面或资源。语法：链接文本1.2链接属性href：指定链接的目标地址（URL）。target：指定链接的打开方式，常用值：_self：在当前窗口打开（默认）。_blank：在新窗口打开。_parent：在父框架中打开。_top：在整个窗口中打开。title：鼠标悬停时显示的提示文本。do
  • Html5学习教程，从入门到精通，HTML 5 段落语法知识点及案例代码（5） 知识分享小能手 前端开发网页开发编程语言如门htmlhtml5学习java开发语言java后端开发前端
    HTML5段落语法知识点及案例代码在HTML5中，段落是通过标签定义的。段落是网页内容的基本组成部分，用于组织和呈现文本内容。一、段落的基本语法1.标签标签用于定义段落。浏览器会自动在段落前后添加空白（margin）以分隔段落。语法：这是一个段落。2.段落中的文本段落中可以包含纯文本、换行、空格、特殊字符等。浏览器会忽略HTML代码中的多余空格和换行，只显示一个空格。3.段落中的换行如果需要在段落
  • Html5学习教程，从入门到精通，HTML5 元素语法知识点及案例代码（2） 知识分享小能手 前端开发网页开发编程语言如门html5学习前端开发语言htmljavaJava开发
    HTML5元素语法知识点及案例代码一、HTML5元素概述HTML5元素是构成网页的基本单位，每个元素都有特定的语义和功能。HTML5元素由开始标签、内容和结束标签组成，例如：这是一个段落。是开始标签这是一个段落。是内容是结束标签二、HTML5元素分类HTML5元素可以根据其功能和语义进行分类，主要分为以下几类：根元素::定义HTML文档的根元素。文档元数据::定义文档的头部信息，例如标题、样式表、
  • 【DeepSeek从入门到精通】清华大学出品300页DeepSeek教程，最新完整版。 AI小魔女 学习自然语言处理AIGCAI写作python
    DeepSeek资料链接：https://pan.quark.cn/s/862e3c3fcdbf今年，DeepSeek热度居高不下，从硅谷巨头到国内BAT，从MIT实验室到清华智算中心，DeepSeek正以王者之姿横扫AI圈！年后清华大学团队相继推出了DeepSeek相关的5份学习教程，帮助用户高效学习AI，从入门到精通，300页资料汇总！完整版资料已放在开头，大家自行领取。
  • 业务线接入前端异常监控sentry weixin_33711647
    1.前端异常处理的框架对比是否开源收费语言监控范围sentry是自己搭建服务器（免费）价格英文Angular、AngularJs、Backbone、Ember、JavaScript、React、Vue......fundebug否收费（708一年，本地版：12万一年）中文Angular、AngularJs、Backbone、Ember、JavaScript、React、Vue、微信小程序等等...
  • DeepSeek学习教程 从入门到精通pdf下载：快速上手 DeepSeek 不会编程的程序猿ᅟ 学习
    下载链接：DeepSeek从入门到精通(清华大学).pdf链接:https://pan.baidu.com/s/1Ym0-_x9CrFHFld9UiOdA5A提取码:2ebc一、DeepSeek简介DeepSeek是一款由中国团队开发的高性能大语言模型，具备强大的推理能力和对中文的深刻理解。它广泛应用于智能办公、教育辅助、编程开发、商业分析等领域，支持自然语言交互，用户无需复杂提示词即可获得高质量
  • Vue学习教程-14内置指令 番茄番茄君 vue.js学习前端
    文章目录前言一、v-text指令二、v-html指令三、v-cloak指令四、v-once指令五、v-pre指令六、其他指令前言Vue.js提供了许多内置指令（Directives），这些指令用于在模板中添加特殊功能。内置指令以v-前缀开始。v-text:更新元素的textContent更新元素的textContent。例如：v-html:更新元素的innerHTML更新元素的innerHTML。
  • AngularJS中文手册前半部分学习 CV战士plus angular.jsangular.js学习前端
    AngularJS简介AngularJS的中文参考手册AngularJS的使用AngularJS是一个JS框架，通过指令(ng-directives)扩展了HTML，且通过表达式绑定数据到HTML，用于开发单一页面应用程序（SPAs：SinglePageApplications）可以通过script标签添加到网页中(建议把脚本放在元素的底部。这会提高网页加载速度，因为HTML加载不受制于脚本加载。
  • Vue学习教程-11数组变化监测 番茄番茄君 vue.js学习javascript
    文章目录前言一、vue侦听响应数组变更方法二、使用Vue.set或者this.$set三、替换数组总结前言在Vue中，数组变化监测是其响应式系统的一个重要特性。Vue2.x版本中，当使用Vue.set或者this.$set，或者在初始化时就声明好数组的每个元素或者调用数组方法，可以确保数组的变更能够被Vue检测到并触发视图的更新。然而，在某些情况下，直接通过索引修改数组元素，例如array[ind
  • java观察者模式 3213213333332132 java设计模式游戏观察者模式
    观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。 在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。 这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。 老鹰会变成观察者，母鸡和小鸡是
  • TFS RESTful API 模拟上传测试 ronin47
           TFS RESTful API 模拟上传测试。 　　 细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http
  • PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式 dcj3sjt126com 设计模式PHP
    // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()
  • hibernate 171815164 Hibernate
    main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new
  • Ant实例分析 g21121 ant
            下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。           下面是build.xml的代码： <?xml version="1
  • [简单]工作记录_接口返回405原因 53873039oycg 工作
             最近调接口时候一直报错，错误信息是:       responseCode:405 responseMsg:Method Not Allowed        接口请求方式Post.
  • 关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别 程序员是怎么炼成的
       真正完成类的加载工作是通过调用 defineClass来实现的；  而启动类的加载过程是通过调用 loadClass来实现的；  就是类加载器分为加载和定义   protected Class<?> findClass(String name) throws ClassNotFoundExcept
  • JDBC学习笔记-JDBC详细的操作流程 aijuans jdbc
    所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。 下面我们就来仔细看一看每一个步骤： 其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接：   Html代码  St
  • rome创建rss antonyup_2006 tomcatcmsxmlstrutsOpera
    引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫 温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W
  • html表格和表单基础 百合不是茶 html表格表单meta锚点
    第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的 再看看自己什么都还不会,   html是一种标记语言,其实很简单都是固定的格式   _----------------------------------------表格和表单 表格是html的重要组成部分,表格用在body里面的 主要用法如下; <table> &
  • ibatis如何传入完整的sql语句 bijian1013 javasqlibatis
            ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。         解决办法： <
  • 精通Oracle10编程SQL(14)开发动态SQL bijian1013 oracle数据库plsql
    /* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name;
  • 【Linux命令】Linux工作中常用命令 bit1129 linux命令
    不断的总结工作中常用的Linux命令   1.查看端口被哪个进程占用   通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息   netstat -anp | grep 8085   察看进程ID对应的进程占用的端口号   netstat -anp | grep 进程ID &
  • 优秀网站和文档收集 白糖_ 网站
    集成 Flex, Spring, Hibernate 构建应用程序   性能测试工具-JMeter   Hmtl5-IOCN网站   Oracle精简版教程网站   鸟哥的linux私房菜   Jetty中文文档   50个jquery必备代码片段   swfobject.js检测flash版本号工具
  • angular.extend boyitech AngularJSangular.extendAngularJS API
    angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数:
  • java-谷歌面试题-设计方便提取中数的数据结构 bylijinnan java
    网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。 以下分别用排序数组和大小堆来实现。 使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插
  • ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本 Chen.H ajaxFileUploadie6ie7ie8ie9
    jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); }
  • [机器人制造原则]机器人的电池和存储器必须可以替换 comsci 制造
           机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持.....        另外,如果一
  • Oracle Multitable INSERT 的用法 daizj oracle
    转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法 语法：     Insert Into 表名 (字段1,字段2,字段3...）     Values (值1,
  • 专访黑客历史学家George Dyson datamachine on
    20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相 比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来
  • 小学6年级英语单词背诵第一课 dcj3sjt126com englishword
    always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住   usual 通常的 early 早的 begin 开始 month 月份   year 年 last 最后的 east 东方的 high 高的   far 远的 window 窗户 world 世界 than 比...更  
  • 在线IT教育和在线IT高端教育 dcj3sjt126com 教育
    codecademy  http://www.codecademy.com codeschool  https://www.codeschool.com teamtreehouse  http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.
  • Struts2 xml校验框架所定义的校验文件 蕃薯耀 Struts2 xml校验Struts2 xml校验框架Struts2校验
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa
  • mac下安装rar和unrar命令 hanqunfeng mac
    1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar
  • 三种将list转换为map的方法 jackyrong list
      在本文中，介绍三种将list转换为map的方法： 1） 传统方法 假设有某个类如下    class Movie { private Integer rank; private String description; public Movie(Integer rank, String des
  • 年轻程序员需要学习的5大经验 lampcy 工作PHP程序员
    在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加
  • 评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓 nannan408
    先来看南方网的一则报道： 再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。 　　粗暴手术让人发寒 　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。 　　12月5日，
  • 使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件 Everyday都不同 jspinput回车键绑定clickenter
    假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理：   function search() { //监听函数略...... }   为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search():   //回车绑定 $(".search").keydown(fun
  • EXT学习记录 tntxia ext
      1. 准备   （1） 官网：http://www.sencha.com/   里面有源代码和API文档下载。   EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。   （2）帮助文档：   想要查看EXT的官方文档的话，可以去这里h
  • mybatis3的mapper文件报Referenced file contains errors xingguangsixian mybatis
    最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他