Angular.js 中的特性,双向绑定.多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明:$scope.$watch(参数,function(newValue,oldValue){//逻辑处理 })上面我们就是创建了一个监听器. ‘参数 就是$scope对象下的一个对象(或者一个对象的属性),注意...
AngularJS是什么？AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强。 何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍...
这是我后台SpringMVC控制器接收isform参数的方法，只是简单的打出它的值：@RequestMapping(method = RequestMethod.POST)@ResponseBodypublic Map save(@RequestParam(value = "isform", required = false) String isform) {System.out.println("isform value: " + isform);return null;}前台页面发送一个post提交表单的请求发现后台没有取到值后边我想到的第一种方案是在控制器方法参数里加requestbody来接收json参数，改成如下：...
写此文的背景：在学习使用angular的$http.post()提交数据时，后台接收不到参数值，于是查阅了相关资料，寻找解决办法。写此文的目的：通过上面提到的文章中的解决之道，结合自己的经验，总结了如下发现。前端：html，jquery，angular后端：java，springmvc一、平常使用的post提交和接收方式前端使用jquery提交数据。$.ajax({url:/carlt/loginForm,method: POST, data:{"name":"jquery","password":"pwd"},dataType:json,success:f...
在我们平常的开发中，有时候会需要获取一下check框选中的值，以及check框选中行的所有信息。这个时候有一个小技巧那就是我们可以把要获取的信息全部放到check框的值里面，这样我们可以获取check框选中值的时候也就相当于获取了当前行的信息。代码如下:全选全不选：var bischecked=$('#cboxchecked').is(':checked'); var fruit=$('input[name="orders"]'); fruit.prop('checked',bischecked); 这里为什么要用prop而不用attr,这是因...
在AngularJS中，有时候需要监视Scope中的某个变量，因为变量的改变会影响一些界面元素的显示。有时，也希望通过jQuery调用Scope的某个方法。 比如以下场景：jQ ButtonToggle jQ button state Counter: {{counter}}以上，我们希望： ● Scope中的jQBtnState变量值如果为false让id为jQBtn的按钮禁用 ● 点击id为jQBtn的按钮调用Scope中的某个方法让Scope中的变量counter自增1 我们可能会这样写：$('#jQBtn').on("click", function(){...
AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数，用来向视图的作用域（$scope）添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。 当我们在创建新的控制器时，angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分，都有父级作用域的存在，顶级就是ng-app所在的层级，它的父级作用域就是$rootScope。 每个$scope的$root指向$rootSco...
路由守卫守卫，顾名思义，必须满足一定的条件得到许可方可通行，否则拒绝访问或者重定向。Angular中路由守卫可以借此处理一些权限问题，通常应用中存储了用户登录和用户权限信息，遇到路由导航时会进行验证是否可以跳转。 4种守卫类型按照触发顺序依次为：canload（加载）、canActivate（进入）、canActivateChild（进入子路由）和canDeactivate（离开）。一个所有守卫都是通过的守卫类： import { Injectable } from @angular/cor...
本篇是内部培训交流会的摘要总结。 培训PPT和示例代码已托管至我的github仓库： https://github.com/dashnowords/blogs/tree/master/Demo/rebuild-angularjs-controller 一. 结构拆分 小型项目 通过子路由实现拆分分层，父级控制器控制共享模块，提供公共能力，子级分管自己的模块，父子级之间通过消息机制进行通讯。中型项目 通过组合视图实现模块划分，组合视图共享同一个路由地址，分管不同的模块，组合视图之间需要通过父级控制...
在 app.module.ts 中引入 HttpClientModule 并注入 import {HttpClientModule} from @angular/common/http; imports: [BrowserModule,HttpClientModule ]Angular get 请求数据在用到的地方引入 HttpClient 并在构造函数声明 import {HttpClient} from "@angular/common/http"; constructor(public http:HttpClient) { }get 请求数据 var api = "http://a.itying.com/api/productlist"; this.http.get(api).subscribe(response => {...
在项目中常常会使用 ngFor指令，之前只会使用它，具体如何实现的却不得而知。终于这几天有时间"研究"了下它是如何实现的，顺便自己写个简单的 ngFor指令：repeat 说到指令就不得不提一下TemplateRef和ViewContainerRef TemplateRef 可以理解为dom渲染模板，指令通过TemplateRef的模板来创建dom元素 ViewContainerRef 可以理解为TemplateRef的容器，在调用ViewContainerRef上的createEmbeddedView时，传入TemplateRef和context就能创...
一、引言 之前在Angular4使用过百度地图，记录一下踩过的坑 二、实现 1.安装 npm install angular2-baidu-map 2.在app.module.ts配置 ak key在http://lbsyun.baidu.com/apiconsole/key中创建 import { BrowserModule } from @angular/platform-browser import { NgModule } from @angular/core import { AppComponent } from ./app.component import { BaiduMapModule } from angular2-baidu-map @NgModule({declarations: [AppCom...
在业务系统中，通常需要对用户的密码进行加密，再时行http的请求。加强系统登录的安全验证。 常用的加密方式有MD5, Base64, CryptoJS的 AES DES等。下面介绍我常用的几种加密方法的使用： MD5加密1. 安装模块 ts-md5$ npm install ts-md5 --save 2. 使用md5进行加密import { Md5 } from ts-md5; // ...// 密码 password: string = "12345";// 加密方法 - md5加密 decode() {const passwordMd5 = Md5.hashStr(this.password).toStri...
Angular4输入属性 输入属性通常用于父组件向子组件传递信息 举个栗子：我们在父组件向子组件传递股票代码，这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传递进来的值 order.component.ts ...@Input()stockCode: string@Input()amount: string...order.component.html <p>这里是子组件</p><p>股票代码为{{stockCode}}</p><p>股票总数为{{amount}}</p> 然后我们需要在父组件(app.component)中向子...
使用bootstrap自带的提示控件，省去了不少事情 <div class="s2" ng-init="InitTooltip()"><input type="text" ng-pattern="/^(http|https|ftp)\://[a-zA-Z0-9\.\,\?\\\/\+&%\$\#\=~:_\-\s@]+$/" class="inputwords" id="txtExamination" name="txtExamination" ng-model="csInfo.ExamUrl" placeholder="测验地址"><span data-toggle="tooltip" data-placement="top" data-html="true" title="1、点击《新建测验》按钮 <br/> 2、测验...