Angularjs CURD 前言 基于一个手机端的项目使用了angularjs，硬着头皮去用，有很多的疑问还需要一一去验证，刚开始总是感觉找不到北，总是感觉有很多概念，而且似乎ng既夹杂MVC又夹杂MVVM的思想， 忙里偷闲敲了个简单的CURD demo。 当然顺着这个demo还可以延伸很多知识点，比如： 带分页查询、连接后台数据库、调用WebApi、分层使用Servcice、Factory。 效果图 <script type="text/javascript">var app=angular.module(my...
前提首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular <script src="../../bower_components/angular/angular.js"></script> <script src="../../bower_components/angular-route/angular-route.js"></script>这主要是因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现。 (function(window, angular, undefined) { use strict; ... ngRouteModule.dire...
angular提供了一个可以复制对象的api——copy(source,destination)，它会对source对象执行深拷贝。 使用时需要注意下面几点：如果只有一个参数（没有指定拷贝的对象），则返回一个拷贝对象如果指定了destination,则会深拷贝对象复制给destination如果source是null或者undefined，那么会直接返回source如果source就是desitination，那么会报错。下面看看使用样例：<html> <head><meta http-equiv="Content-Type" content="text/html...
使用情况1 首先，所有满足 a === 3 这种的对象，在angular.equals(a,b)中都会返回真 2 所有对象的类型，以及属性值都相同的，也会返回真 3 NaN和NaN也会返回真（在javascript中，返回的是假） 4 正则也会返回真（在javascirpt，/abc/ /abc/被认为是不相等的）样例<html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js">...
对于一般的使用者来说，AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中，这样就显得很不方便了。 绑定初始化通过绑定来进行angular的初始化，会把js代码侵入到html中，但是对于新手使用来说，还是足够了！ <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body ng-app="myApp...
效果图实例代码<!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0; list-style: none;font-size:12px;}.clearfix{overflow: hidden;display:block;clear:both}.clearfix:after{zoom:1}.relation{margin-top:7px;font:14px/38px "微软雅黑"; height: 38px; background: #f8f8f8; padding-left: 26px; color: #666;}.relation ...
下面给大家说下$modal拥有一个方法：open，该方法的属性介绍： templateUrl：模态窗口的地址template：用于显示html标签scope：一个作用域为模态的内容使用（事实上，$modal会创建一个当前作用域的子作用域）默认为$rootScopecontroller：为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需...
指令 directive(bsPopup, function ($parse) { return { require: ngModel, restrict: A, link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem).modal(hide); return; } if (newValue == 1) { $(elem).modal(show); return; } }); } } }); <button class="btn btn-xs btn-warning" data-target="#myModal" dat...
先说下缓存： 一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复，消耗时间。因此缓存适用于变化性不大的一些数据，缓存能够服务的请求越多，整体系统性能就能提升越多。 $cacheFactory介绍： $cacheFactory是一个为Angular服务生产缓存对象的服务。要创建一个缓存对象，可以使用$cacheFactory通过一个ID和capacity。其中，ID是一个缓存对象的名称，capacity则是描...
AngularJS ng-open 指令AngularJS 实例通过点击 checkbox 显示或隐藏 <details> 列表: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="">点击这里显示 details 列表: <input type="checkbox" ng-model="showDetails"><br> <br><details ng-open="showDetails"><summary>学的不仅是技术，更是梦想！</summary><...
AngularJS ng-controller 指令 AngularJS 实例为应用变量添加控制器: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl">Full Name: {{firstName + " " + lastName}}</div><script> var app = angular.module(myApp, []); app.controller(myCtrl, function($scope) {$scope.f...
AngularJS ng-copy 指令AngularJS 实例在输入框的文本被拷贝时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><input ng-copy="count = count + 1" ng-init="count=0" value="拷贝这个文本" /><p>文本被拷贝 {{count}} 次。</p><p>实例中变量 "count" 的值在输入框的文本被拷贝时会自动增加 1。...
AngularJS ng-app 指令AngularJS 实例 让 body 元素称为 AngularJS 应用的根元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><p>我的第一个表达式: {{ 5 + 5 }}</p></body> </html> 运行结果： 我的第一个表达式：10 定义和用法ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJ...
AngularJS ng-bind-html 指令AngularJS 实例绑定 <p> 内的 innerHTML 到变量 myText: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl"><p ng-bind-html="myText"></p...
AngularJS ng-blur 指令AngularJS 实例当输入框失去焦点(onblur)时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><input ng-blur="count = count + 1" ng-init="count=0" />{{count}}<p>实例中 "count" 变量记录了失去焦点的次数。</p></body> </html> 运行结果： 0 实例中 "count" 变量记录...