ANGULAR - 技术教程文章

AngularJS ng-model在ng-if里面无效【代码】

参考stackflow原文。问题:Here is the fiddle showing the problem. http://jsfiddle.net/Erk4V/1/It appears if I have an ng-model inside of an ng-if, the model does not work as expected.I am wondering if this is a bug or if I am misunderstanding the proper usage.<div ng-app ><div ng-controller="main">Test A: {{testa}}<br />Test B: {{testb}}<br />Test C: {{testc}}<br /><div>testa (without ng-if): <inpu...

AngularJs-指令和指令之间的交互(动感超人)【代码】【图】

前言:  上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法。本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的demo,我们可以借鉴学习。1,动感超人上面的三个按钮,代表三个超人,在此想问下,哪些想看超人的朋友们是不是有种被骗了的感觉?当我们的鼠标移动到哪个超人的身上的时候,就会输入这个超人所拥有的超能力(力量 + 敏捷...

用Trigger.io改进移动Angular.js应用【图】

用Trigger.io改进移动Angular.js应用作者:chszs,转载需注明。博客主页:http://blog.csdn.net/chszsTrigger.io Forge可以让我们使用最新、最好的Web技术来开发本地移动应用。本文展示了开发一个简单的Angular.js应用示例,并使用Forge模块增强此应用,包括:1)使用forge.prefs来增加离线能力和持久化能力2)使用forge.topbar来增加本地topbar和动作按钮3)使用forge.tabbar来实现视图间的导航本示例是做一个TODO列表。一、创建一...

【AngularJS】—— 8 自定义指令【代码】【图】

阅读目录 如何自定义指令: 如何使用指令: 指令的内嵌使用: 全部代码AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容。前面提到AngularJS的四大特性:  1 MVC  2 模块化  3 指令  4 双向数据绑定下面将会介绍如下的内容:  1 如何自定义指令  2 自定义指令的使用  3 自定义指令的内嵌使用回到顶部  如何自定义指令:  Angular是基于模块的框架,因此上来肯定要创建一个自...

angular $http 请求数据的时候加载loading【代码】【图】

1.目录结构2.页面加载时效果(加载的时候比较难截图,是页面上方出现一条进度条,然后我另加了一个Loading..的提示,请忽略那个table)3.页面加载完成后效果4.index.html<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title><!-- angular --><script src="libs/angular.min.js"></script><script src="libs/angular-animate.min.js"></script><!--loadingbar--><script src="libs/loading-bar.min.js"><...

angular的service服务eg:value,constant,factory,service【代码】

app = angular.module("app",[]); app.value("realname","liyang");//可以改变 app.value("User",{name:"liyang",pwd:"123456"}) //可以直接绑定一个js对象 app.constant("baidu","www.baidu.com");//不可以改变,这2个一般用于简单配置文件的使用 app.factory("data",function(){return "我就是结果";//当然这里也可以返回js对象}) app.service("serviceData",function(){this.name = "zhangsan"this.pwd = "654321" }) <!--上面这...

Angular教程-02-Angular项目目录及基本文件说明【代码】【图】

本教程基于Angular7,更新时间2018-11-05.1. 项目根目录如下:e2e文件夹:end to end,测试目录,主要用于集成测试。node_modules:项目的模块依赖目录。src:项目的源代码。.editorconfig:编辑器配置文件。.gitignore: git版本控制时忽略的文件(此文件中配置的文件不纳入版本控制)。.angular.json:angular配置文件。.package-lock.json:锁定项目依赖模块的版本号。.package.json:配置项目依赖模块。.README.md:项目说明文件...

AngularJS 控制器

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"content="width=device-width,initial-scale=1" /> <title></title> <meta charset="utf-8" /> <link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" /></head><body data-ng-app="myApp"data-ng-controller="m...

angularjs培训之重新理解双向绑定和事件详解【代码】【图】

双向绑定是angularjs亮点之一,在前面的《angularjs培训之helloworld》篇中大概介绍了下双向绑定,现在我们“旧事重提”,先看下下面的代码片段:view中: <input type=‘button‘ ng-click="set()" value="set Value"> <input type="text" ng-model=‘userName2‘>controller中对应的方法: $scope.set = function(){ $scope.userName2 = ‘Eason‘; } $scope.$watch(‘userName2‘,function(){ alert(‘ng-model us...

angular.element【代码】

angular.module(‘myApp‘,[]).controller(‘firstController‘,function ($scope) {$scope.status=false;$scope.changeStatus=function (event) {$scope.status=! $scope.status;//通过element转换成jquery对象angular.element(event.target).html(‘切换状态为:‘+$scope.status);};}); 原文:http://www.cnblogs.com/zhuj/p/7685025.html

基于AngularJS的过滤与排序【代码】【图】

前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能。本程序中可以了解到:  1 angularjs的过滤器  2 ng-repeat的使用方法  3 控制器的使用  4 数据的绑定  程序设计分析  首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了。  直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果:{{ persons | filter:query }}  通过使用filter实...

poj 2836 Rectangular Covering(状态压缩dp)【代码】【图】

Descriptionn points are given on the Cartesian plane. Now you have to use some rectangles whose sides are parallel to the axes to cover them. Every point must be covered. And a point can be covered by several rectangles. Each rectangle should cover at least two points including those that fall on its border. Rectangles should have integral dimensions. Degenerate cases (rectangles with zero area) a...

[Angular] Angular i18n Pluralization Support【代码】

// Component:this.coursesTotal = this.course,length<div i18n>{coursesTotal, plural, =0 {No course in available.}=1 {One course is available.}other {A total of {{coursesTotal}} courses are available.} } </div> 原文:https://www.cnblogs.com/Answer1215/p/10356360.html

Angularjs js方法参数动态传入【代码】

$scope.pageNumberCount = 10;<li ng-repeat="i in pageNumberCount"> <a ng-click="clickPagination(i)">{{i}}</a> <!--注意:这里的参数不能写成“{{i}}”--> </li>原文:http://my.oschina.net/moks/blog/530325

angularjs学习笔记--组件、$http、$q、module【代码】

1-组件 创建组件,使用angularjs模块的conponent()方法,component(name,options);使用编译器注册组件定义,表示应用程序中的一个独立的UI组件。组件定义通常仅由模板和控制器组成。name为组件名,options为组件定义对象,其属性包括:controller(应该与新创建的作用域相关联的控制器构造函数或作为字符串传递的注册控制器的名称)、controllerAs(用于在组件范围内引用控制器的标识符名称)、template(html模板作为一个字符串...

【AngularJs】---$sce 输出Html【代码】

【问题描述】angular js的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签angularJs输出html的时候,浏览器并不解析这些html标签我们用ng-bind-html这样的指令来绑定,浏览器中显示的还是html代码【解决办法---$sce】通过使用$ sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”咱们还可以这样用...

Angular实战记录【代码】

当ngModel双向绑定非基本数据类型值时子组件中ngModel绑定的值改变时,通过onChangeCallback 传回父组件时,有两种情况:基本数据类型:string/number 等变量,父组件中会跟着变化非基本数据类型:{}/[]/Date/... 父组件中不会检测到变化解决方法:创建一个新对象传回:this.onChangeCallback(new Date(this.date));(顺便完善父子组件间双向数据绑定的实现)子组件ts:import { Component,forwardRef} from ‘@angular/core‘; impo...

angular.element方法汇总

转载 addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中...

angular路由【代码】

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。 $routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数: 第一个参数是 URL 或者 URL 正则规则。 第二个参数是路由配置对象。$routeProvid...

.net core3.1+angular+is4 项目记录:部署篇【代码】

.net core3.1+angular+is4 项目记录:部署篇??项目本来年前就可以结束的,可是前几个月一直在忙别的事情所以就耽搁了。原本打算边做边写,后来感觉在做的过程中想怎么写容易分心,所以写完了再写,之后有空的话应该会补充几篇,如果没有的话。。就算了吧。毕竟毕业事情还是挺多的。文末给出源码。整体思路??整理代码(包含数据库字符串,代理头等),上传 github,准备阿里云服务器(安装 git,.net core sdk,nginx,数据库可选等...

--@angularJS--路由、模块、依赖注入

以下是演示angular路由切换的demo. 主页:index.html<!doctype html><html ng-app="bookStoreApp"><head> <meta charset="UTF-8"> <title>BookStore</title> <script src="framework/1.3.0.14/angular.js"></script> <script src="framework/1.3.0.14/angular-route.js"></script> <script src="framework/1.3.0.14/angular-animate.js"></script> <script src="js/app.js"></script> <script src="js/contro...

Angular Material的安装和使用【图】

一、安装 1.前期准备:npm(安装node即可),angular cli脚手架 2.自建项目ng new may-app //my-app项目名字ng g c project //组件名project 3.安装angular material和angular cdk//npm方法npm install --save @angular/material @angular/cdk//yarn方法yarn add @angular/material @angular/cdk 4.常用项animations(非必备)//npm方法npm install --save @angular/animations//yarn方法yarn add @ang...

Angular随笔第二课【代码】【图】

一. 列表表格以及其它迭代型元素ng-repeat 可能是最有用的angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝。不管在什么地方,只要你想创建一组事物的列表,你就可以使用这条指令。比方说:我们正在为老师们编写一套学生花名册系统,我们当然需要从服务器上获取学生信息,但是对于当前这个列子来说,我们还是把模型直接定义在javascript代码里面:var students =[{name: ‘Mary Contrary‘,id:‘1‘},{name: ‘J...

angular js 终极购物车(转)【代码】

转自CSDN:<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>购物车</title><script src="angularjs/angular.js"></script><style>.box{width: 100%;border-bottom: 1px solid silver;}.box1{width: 100%;margin-top: 5px;}.box1 button{width: 100px;height: 40px;background: crimson;color: white;text-align: center;line-height: 40px;float: right;border: 0;border-radius: 13px;}table{width: 100%;}t...

AngularJS Select(选择框)【代码】

1.  AngularJS 可以使用数组或对象创建一个下拉列表选项。使用 ng-options 指令来创建一个下拉列表,列表项通过对象和数组循环输出,代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular-1.3.15.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行--><select ng-init="sel...

angularjs1-过滤器【代码】

<!DOCTYPE html><html><body><header><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script src="angular.min.js"></script></header><div ng-app="myApp"><div ng-controller="firstController"><p>在输入框中尝试输入:</p><p>姓名:<input type="text" ng-model="firstName"></p>{{firstName | uppercase }}{{lastName}}{{price | currency}}<br><br><br><br>{{json | json }}<br><br><br>{{ 13043759...

AngularJs(三) deployd 服务的使用【代码】【图】

使用服务建立数据 在AngularJS(二)中,我搭建好了deployd服务,现在启动服务,创建正在的数据(开始是使用模拟数据),使用cmd命令      一、开启Mongodb数据。 贴图: 二:测试是否正常开启,使用mongo命令。在CMD中输入:        Mongodb默认建立的数据时test,说明mongodb已经开启。 三、 使用我们搭建好的deployd 服务建立数据,首先是开启...

Angularjs启动应用【代码】

要启动一个angular应用,可以使用ng-app指令,也可以调用bootstrap方法手动启动。 一个angular应用中,可以有多个angular.module。应该有且只有一个angular.module的名称与ng-app的值一致,否则就没有意义了。angular.module(‘M1‘,[]); angular.module(‘M2‘,[]); ...... angular.module(‘Mn‘,[]);angular.module(‘app‘,[‘M1‘,‘M2‘,...,‘Mn‘]); M1,M2,...,Mn可能是不同的业务模块,可以单独作为一个angular.module,最...

angular学习(二):Controller定义总结

上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到 逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识:$scope:作用域对象,仅仅是代表本Controller对象,本作用域的不论什么对象都用$scope来声明。$rootScope:代表整个页面作用域,能够在随意子$scope之间传递全局对象 $http:用来发送http请求的对象.设置headervar module =angular.module('index'); //设置httpheader module.config(functi...

将BootstrapJS和AngularJS结合使用以及为什么不用jQuery【图】

原文网址链接:http://ourjs.com/detail/54e18c51232227083e000034Bootstrap 和 Angular 都是人们大量使用的工具。在很多项目中,它们需要一起使用。为什么不呢?他们已经改变了CSS和JS的开发方式,让前端既成为令人难以置信的工具。但是,把它们放在一起使用还有一些问题,特别是当你试图在Angular的项目中引入Bootstrap JavaScript组件时,会是一个问题。当建立了Angular的项目,##你不应该添加完整的jQuery库##。 jQlite已经包...