<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>入门</title><script src="node_modules/angular/angular.js"></script><style>.bgc-red {background-color: red;}</style>
</head>
<body ng-app="s1.app"><button class="{{currentBtn == 1 ? ‘bgc-red‘:‘‘}}" ng-click="setCurrent(1)">按钮1</button>
<button class="{{currentBtn == 2 ? ‘bgc-red‘:‘‘}}" ng-click="setCurrent(2)">按钮2</butt...
angular和vue双向数据绑定的原理(重点是vue的双向绑定)我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值.访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用gette...
指令之--自定义HTML元素和属性 angularjs支持我们拓展自定义的HTML元素。比如,我们想自定义一个自己的元素:<my-dom></my-dom>如下:var app=angular.module("myApp",[]);app.controller(‘mycontroler‘,function($scope){});app.directive("myDom",function(){return {restrict:‘E‘,template:‘<a href="www.baidu.com"> click to baidu</a>‘}})<!doctype html><html><head><script src="http://code.angularjs.org/angul...
Collapse折叠控件使用uib-collapse指令 1<!DOCTYPE html> 2<html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5<link href="/Content/bootstrap.css" rel="stylesheet"/> 6<title></title> 7 8<script src="/Scripts/angular.js"></script> 9<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>10<script>1112 ...
篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别.angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者.网上已经有很多介绍怎么使用指令的文章以及相关书...
模板引用变量需求:1、当用户在组件AppComponent(举例)的input 框输入时要求在页面上同步显示用户输入值。2、将用户输入的值传递到事件中,被获取进行一系列操作。 第一种方法:DOM 事件携带DOM 事件携带可能对组件有用的信息,所有标准 DOM 事件对象都有一个target属性, 引用触发该事件的元素在事件中传递$event事件对象,然后通过 $event.target.value可以获取该值。类型化事件对象揭露了重要的一点,即反对把整个 DOM 事件传到...
Angular服务1.创建服务:ng g service services/storage2.注入服务在根目录的app.module.ts里引入服务。并且在providers:[]里写入服务模块在要用这个服务的ts文件里引入服务在constructor构造函数里实例化服务使用this.storage访问服务Http请求3.注册Http Jsonp 服务在根目录的app.module.ts里注入模块:HttpModule JsonpModule在imports 里写入模块3.1在其他模块里使用http 和 jsonp 模块要在模块的顶部import http jsonp 模...
sublime能够支持AngularJS开发那绝对是一件很爽的事情。下面我一步步讲解如何为sublime安装AngularJS插件。1、添加控制包站点根据你安装sublime 版本不同,在控制台写入不同的代码 :控制台打开方法:View > Show Console 或者 快捷键 ctrl+` Sublime Text 3:import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = s...
1. 安装echarts包、ngx-echarts包
npm install echarts --save
npm install ngx-echarts --save
2. angular.json中引入echarts.js文件
"scripts": [ "node_modules/echarts/dist/echarts.js" ]
3. 根模块中导入NgxEchartsModule模块
import {NgxEchartsModule} from ‘ngx-echarts‘;imports: [ NgxEchartsModule ]
4. 组件中使用echarts图表(1). HTML - test.component.html
<div echarts [options]="chartOption" ></div>
(2)....
ng-repeat是angular的一个指令,用来循环生成某些东西。常用的是拿到数据循环生成样式展示在视图中。<!--orderStatuses表示$scope传递的数据$scope.orderStatuses=data;data是json对象格式--><select name="aaa" id="aaa" ng-model="$scope绑定的变量"></select><option ng-repeat="status in orderStatuses" value="{{status.key}}">{{status.value}}</option><!--有三种ng-repeat方式,根据数据格式来使用哪种方式--><tr ng-rep...
可以认为provider有三个部分: 第一部分是私有变量和私有函数,这些变量和函数会在以后被修改。 第二部分是在app.config函数里可以访问的变量和函数,所以,他们可以在其他地方使用之前被修改。注意,这些变量和函数一定要添加到this上面才行。 第三部分是在控制器里可以访问的变量和函数,通过$get函数返回。 当使用 provider创建服务的时候,唯一可以让控制器访问的属性和方法是在$get()函数里返回的属性和方法。【参考...
使用 patchValue() 方法会比使用 setValue() 方法更好! 1、patchValue()// angular2/packages/forms/src/model.tsexport class FormGroup extends AbstractControl {...patchValue(value: {[key: string]: any},{onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {Object.keys(value).forEach(name => {if (this.controls[name]) {this.controls[name].patchValue(value[name], {onlySelf: true, em...
参考:http://jishu.zol.com.cn/201057.html1)避免UI闪烁 Angular的自动数据绑定功能是亮点,然而,他的另一面是:在Angular初始化之前,页面中可能会给用户呈现出没有解析的表达式。当DOM准备就绪,Angular计算并替换相应的值。这样就会导致出现一个丑陋的闪烁效果。<p>{{ phone.snippet }}</p>改为<p ng-bind="phone.snippet"></p>2)依赖注入module.service(‘myservice‘, function($http, $q) {
// This breaks when minifi...
While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state. // reducer.ts
export const SECOND = "SECOND";
export const HOUR = "HOUR";export const clock = (state = new Date(), {type, payload})=> {const date = new Date(state.getTime());switch(type){case SECOND:date.setSeconds(date.getSeconds() + payload);return d...
一、事件绑定1. 创建doOnClick函数 2. 网页中绑定doOnClick方法 3. 效果图 二、 属性绑定1. 定义imgUrl的网址 2. 定义img src属性 另外一种写法 3. html 属性绑定在网页中绑定size 4. css html 属性绑定html绑定 5. css增加属性原先已经有a 和b属性,之后增加c属性 6. ngClass管理多个csshtml code<div [ngClass]="divClass">HI</div>
7. 样式属性 带有单位(px)的样式<div [style.font-size.px]="isDev?‘100‘:‘50‘">是否是...