在$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。 (1)$watch简介 在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。 AngularJS内部的watch实现了页面随model的及时更新。 $watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。 (2)watch方法用法 $watch(watchFn,watchAction,deepWatch)wat...
AngularJS利用路由传值，供大家参考，具体内容如下 1.导包<script src="angular.min.js"></script><script src="angular-route.js"></script>2.依赖注入ngRoute var myapp=angular.module("myapp",["ngRoute"]);3.配置路由 myapp.config(function ($routeProvider) {//页面选择$routeProvider.when("/home",{ // template:"<h2>这是主页面</h2>"templateUrl:"home.html"}).when("/about",{ // template:"<h2>这是关于我们的...
前端开发中经常会碰到图片上传的问题，网上的解决办法很多，可是有些图片上传的插件会有一些附属的插件，因此因为一个图片上传的问题可能额需要引入其他插件到项目中，久而久之项目会不伦不类，有时候插件之间也会有一些冲突，所以我们可以自己写一个图片上传的方法。 今天的demo是帮朋友做的一个移动端微信公众号项目，项目架构采用angular+ionic，因为对dom的操作jQuery会方便很多，但是jQuery比较厚重，所以最后选择用轻量级的z...
前言 前段时间谷歌发布了广受欢迎的Angular JavaScript框架的4.0版本，该版本致力于缩小生成代码的体积，以及保持框架的简化发布计划。 很久没写这种比较偏概念类的东西了，不过我觉得没有形成一个知识架构，学习效率会大打折扣。在这里把我的所理解的知识分享给大家，部分内容引用自官方文档。下面进入主题 Angular架构概览 先来看一下官方放出的架构图。架构概览 这个架构图展现了 Angular 应用中的 8 个主要构造块： 模块 (modu...
本文介绍了angular笔记路由之angular-router，分享给大家，具体如下：创建项目 ng new router --routing \\ 加routing参数 \\ 会新增一个app-routing.module.ts 文件路由的基本使用名称简介Routes路由的配置，保存着哪一个URL对应展示哪一个组件和在哪一个RouterOutler展示RouterOutler在HTML中标记路由内容呈现的占位符指令Router运行时执行的路由对象，可以通过navigate()和navigateByUrl()方法来导航到指定路由RouterLink在HTM...
Angular Js 的初步认识和使用 一： 1.模块化 定义模块和控制器 ng-app="myapp" controller="myctrl" 指定模型 ng-model="" 获取的属性值: ng-bind="属性名"或者{{属性名}} 2.初始化模块(在Script中进行) var myapp1 =angular.module("myapp",[]);3.定义模块的控制器,并依赖注入, $scope:可以操作模块作用域内的所有视图 myapp1.controller("myctrl",["$scope",function($scope){ $scope."属性名" // 也可以对$scope操作的视图进行赋...
背景： 最近在itoo页面调整的时候，发现页面表单或者是文本框没有做基本的判断操作，所以着手demo一篇，希望对大家有帮助！！ -------------------------------------------------------------------------------- 1.创建表单组件： ng g c login1 2.1单规则验证： <label>用户名：</label><input type="text" #userNameRef=ngModel [(ngModel)]=userName required><span [style.color]="userNameRef.valid ? black:red">{{us...
Angular2 Http 1. 使用Http 绝大部分应用程序都会和后台服务打交道，Http是浏览器和服务器之间通讯的主要协议，通过Http调用来访问远程服务器上相应的 Web API。 HttpModule 并不是 Angular 的核心模块，通过Angular包中一个名叫 @angular/http 的独立附属模块发布了出来。我们的应用将会依赖于Angular的 http 服务，它本身又依赖于其它支持类服务。来自 @angular/http 库中的 HttpModule 保存着这些 HTTP 相关服务提供商的全集。...
一、原Http使用总结 使用方法 1.在根模块或核心模块引入HttpModule即在AppModule或CoreModule中引入HttpModule：import { HttpModule } from @angular/http; @NgModule({import: [ HttpModule ]// ... }) AppModule {}2.在使用的地方注入Http服务import { Http } from @angular/http; // ... constructor(private http: Http ) {} ngOnInit() {this.http.get(`url`).subscribe((res) => { // 成功回调}, (err) => { // 失败回调});...
1.跨域 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同同源策略:请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.比如:我在本地上的域名是study.cn,请求另外一个域名一段数据,这个时候在浏览器上会报错,这个就是同源策略的保护,如果浏览...
目标： 1.更好的 SEO，方便搜索爬虫抓取页面内容 2.更快的内容到达时间(time-to-content) 影响： 1.用户：比原来更快的看到渲染的页面，提升用户体验 2.开发人员：某些代码可能需要特殊处理，才能在服务器渲染应用程序中运行（window，document, navigator等） 安装： 1.nodejs 建议6+ 2.angular建议4.1+ 理论实现：尽管这是一张来自vue官网服务器渲染的一张示意图，但是原理上和angular都是一样的，只是实现的代码不一致。 SSR 有...
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树，因此，了解组件之间如何通信，特别是父子组件之间，对编写Angular2应用程序具有十分重要的意义，通常来讲，组件之间的交互方式主要有如下几种： l 使用输入型绑定，把数据从父组件传到子组件 l 通过 setter 拦截输入属性值的变化 l 使用 ngOnChanges 拦截输入属性值的变化 l 父组件监听子组件的事件 l 父组件与子组件通过本地变量互动 l 父组件调用 View...
Angularjs中数据绑定的实例详解 这是一个最简单的angularjs的例子，关于数据绑定的，大家可以执行一下，看看效果 <html ng-app> <head> <title>angularjs-include</title> <script type="text/javascript" src="js/angular/angular.min.js"></script> </head> <body> <input type="text" ng-model="name" value="" /><br /> <div>Hello,{{name}}</div> </body> </html> 关于数据双向绑定，有时候不需要实时同步，比如当输入框失去焦...
AngularJS中filter的使用实例详解 一、格式化数字为货币格式。 <div>{{money|currency:"$"}}</div> <div>{{money|currency:"RMB"}}</div> script： app.controller("crl", function($scope, $filter) { $scope.money="4545"; }); 显示为 二、lowercase 格式化字符串为小写。 姓名为 {{ lastName | lowercase }} app.controller("crl", function($scope, $filter) { $scope.lastName ="AAA"; }); 显示为 aaa 三、uppercase 格...
Angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路由传参</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" type="text/css...