在angular中为我们提供了3种方案处理class:第一种:通过数据的双向绑定(一般是不推荐的)注意:当它的值为一个字符串时,它就会把用空格分开的字符串加到class中(不推荐,与常用class并无太大差别)$scope.className = "change1";<div class="{{className}}"></div>//或者像这样
function changeClass(){$scope.className = "change2";
}<div class="{{className}}"></div>第二种:通过对象数组function ctrl($scope) { $scope.is...
refer : https://angular.io/guide/animationshttps://github.com/angular/angular/blob/master/packages/animations/src/animation_metadata.ts https://github.com/angular/angular/commit/f1a9e3c (router) angular 的动画建立在一堆的方法上: 1. trigger 触发器, 用来和 dom 交互 <div [@triggerName]="state" ></div>trigger 负责定义各种 state 和它们之间变化来变化去 transitiontrigger(‘triggerA‘, [ state(‘A‘, st...
最近参加笔试被虐成狗了,感觉自己的算法太弱了。但是还是先花点事件将这个AngularJS学习完。今天学习filter一、内置过滤器 (1)过滤单个数据值<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>内置过滤器-过滤单个数据值</title></head><body ng-controller="tableCtrl"><h1>今天是:{{now|date:"dd MMMM yyyy"}}</h1><table width="100%"><tr><td>name</td><td>cat</td><td>price</td><t...
核心特性:MVC, 模块化, 自动化双向绑定数据,语义化标签,依赖注入
MVC 1970年smalltalkMVC核心理念:你应该把你管理数据的代码(model).应用逻辑代码(controller).向用户展示的代码(view)清晰的分离开
数据绑定:声明UI中某个部分需要映射到某个JS属性,然后让他们自己去同步依赖注入:(自动解析依赖关系)只是简单的获取他们所需要的东西,而不需要创建那些它们所以来的东西,遵循了(Law of Demeter)也叫最少知识原则,意味着,...
知识点一:onkeyup():按键弹起时触发onkeydown():按键按下的时候发生,文字输入之前发生onkeypress():事件会在键盘按键被按下并释放一个键时发生 知识点二:angularJs中的指令ng-app:是内置指令,可以出现在任何位置,并有两个作用,一个是启动AngularJS框架,另一个是告诉AngularJS框架从ng-app指令所在的开始标签到结束标签之间的所有DOM元素由AngularJS框架进行管理ng-init:该指令用于初始化作用域,ng-model:$scope<--->vie...
如果我没记错的话,spring里边有个service层。什么是服务呢?个人理解就是很多地方要用的,可以跨越控制器甚至是跨越模块的工具。AngularJS也为我们提供了服务这种机制,这让我们可以将一些不属于某个控制器独有的东西定义成一个服务,要用的时候直接拿过来就好。使用服务有什么好处呢?一是便于统一修改,二是调用者不用关心内部实现,三是便于测试。一、factory<!DOCTYPE html><html lang="en" ng-app=‘myApp‘><head><meta cha...
ng2 路由的概念和游览器类似, 和 ui-router 也类似, 下面会把具体功能逐一解释 1. html5 和 hash # ng2 默认模式是 html5, 在开发阶段我们喜欢使用 hash 模式, 这样可以不用部署服务器.要从 html5 转换成 hash 只要做一个小设定 : 原文:http://www.cnblogs.com/keatkeat/p/5810987.html
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一、What does it do? $location服务分析浏览器地址栏中的URL(基于window.location),让我们可以在应用中较为方便地使用URL里面的东东。在地址栏中更改URL,会响应到$location服务中,而在$location中修改URL,也会响应到地址栏中。 $location服务:暴露当前浏览器地址栏的URL,所以我们可以
注意和观察URL改变URL当用户做以下操作时,...
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<title>AngularJS</title> 5<!--学习地址--> 6<!--http://www.yiibai.com/angularjs/angularjs_includes.html--> 7<!--http://docs.angularjs.cn/api/ng/filter/filter--> 8<!--http://docs.angularjs.cn/api/ng--> 9<!--推荐使用工具 vs2015 或 WebStorm--> 10<!--加载框架--> 11<script src="/Scripts/tool/angularjs/Angular.js"></script> 12<script> 13// 注册控制器 14...
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。比如:ng-app 指令初始化一个 AngularJS 应用程序。注意ng-app一般为空,如果值不为空,就得加这样一句代码var app = angular.module(‘名字‘, []);ng-init 指令初始化应用程序数据。这个在之前已经说过了,下面讲一下之前没讲到的。ng-repeat指令与ng-options指令<!--一般ng-repeat通常用于ul与li这种列表和表格--><div ng-app="" ng-init="names=[
{name:‘Jani‘,country:‘N...
1、 下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中。 2、 制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代)。 3、 backmockup站点添加以下HTTP头Access-Control-Allow-Credentials:trueAccess-Control-Allow-Headers:origin,x-requested-with,content-typeAccess-Control-Allow-Methods: POST,GET,OPTIONSAcc...
本人学习JS和AngularJS时做的笔记。JavaScript:基础知识:定义变量:var(全局或函数作用域);let、const(块作用域、不提升变量);Tips:直接使用x=1会将x转换为全局变量,严格模式(“use strict”)报错;数据类型:Boolean、Number、String、Object、Null、Undefined;布尔值:false、null、undefined、0、NaN、””(空字符串)等价false,其余为true;比较:===(类型相同,值相同),==(会进行类型转换),对象比较引用...
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>var m1 = angular.module(‘myApp‘,[]);m1.config([‘$interpolateProvider‘,function($interpdateProvider){$interpdateProvider.startSymbol(‘@@‘);$interpdateProvider.endSymbol(‘@@‘);}]);m1.controller(‘may‘,[‘$sc...
ngClick适用标签:所有触发条件:单击#html
<div ng-controller="LearnCtrl"><div ng-click="click()">click me</div><button ng-click="click()">click me</button>
</div>#script
angular.module(‘learnModule‘, []).controller(‘LearnCtrl‘, function ($scope) {$scope.click = function () {alert(‘click‘);}});ngDblclick适用标签:所有触发条件:双击#html
<div ng-controller="LearnCtrl"><div ng-dblclick="dblclick...
AngularJS双向数据绑定ng-model与ng-bind指令这两个指令是实现双向数据绑定的最主要的指令,区别如下:ng-bind has one-way data binding ($scope –> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into html where val is a variable name.ng-model is intended to be put inside of form elements and has two-way data binding ($scope –> view and view –> $scope) e.g. .总结来...