完整代码：https://github.com/scotch-io/laravel-angular-comment-app 目前，Laravel和Angular均已经成为了Web发展世界里非常著名的工具。Laravel以给PHP社区引入的伟大内容著称，Angular以其惊人的前端工具及简单著称。组合这两大框架似乎是合乎逻辑的下一步。 在我们的使用环境下，我们将使用Laravel作为后端的RESTful API，Angular作为前端，以创建一个简单的单页的评论应用。 下面是一个简单的例子，展示了如何开始使用这两种...
今天我们来看看怎样使用Angular的ngShow 和ngHide 指令来完成它们听起来应该完成的，显示和隐藏！ 它们应该做的事 ngShow 和ngHide 允许我们显示或隐藏不同的元素。这有助于创建Angular应用时因为我们的单页程序会有许多的移动部件随着应用状态的改变而来来去去。 这些指令的最伟大的部分就是我们不必使用CSS或者JS来操作显示还是隐藏。这些都是由老练的Angular来完成。 用法 想使用ngShow 或ngHide, 只需将指令添加到你想要显示...
今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单。这项技术可以用在你想要简化用户操作的大表单上。 我们看到这项技术已经应用在了许多的网页上。比如购物车，注册表单，入职流程以及许多多步表单，让用户更容易在线填写表单。 下面我们将构建它：使用UI Router，它能内嵌状态，为每个状态显示不同的view,我们能让多步表单变得相当的容易。 让我们言归正传，开始创建我们的最棒的表...
AngularJS 1.2 通过引入基于纯CSS class的切换和动画，在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view，让我们来看一下，一个引入众多的不同切换的可伸缩方法，以及指定的每个页面如何切入和切出。 演示: http://embed.plnkr.co/PqhvmW/preview 首先，标记： <div class="page-container"><div ng-view class="page-view" ng-class="pageAnimationClass"> </div></div>既然ng-view使用进入/离开动画...
AngularJS 默认将会使用一个 # 号来对URL进行路由. 例如: http://example.com/ http://example.com/#/about http://example.com/#/contact 要获得干净的URL并将井号从URL中移除是很容易的. 完成两件事情就行了. 配置 $locationProvider 设置我们的相对连接的起点路径$location 服务 在Angular中, $location服务会解析地址栏中的URL，并对你的应用程序作出改变，反之亦然. 我强烈推荐通读官方的 Angular $locati...
这篇文章展示了有关XSS（跨站脚本）的不同方案以及怎样使用AngularJS中SCE（$sceProvider),sanitize service这些特性来正确处理XSS。如果我遗漏了什么重要的地方请直接评论/建议。同时，错别字请见谅。 以下几点内容将是我接下来要讲述的重点： 全部转码HTML 安全插入HTML的同时忽略类似“script"这样的标签。如果不加以注意，这将一样存在风险同时也会丑化页面，尤其是在有”img“标签的时候。 依赖并插入纯HTML；这也有...
简介 在这个例子中，我引用了包括AngularJS在内的一些JavaScript库，实现了一个很简单的名片生成器。 尽管在这个小应用中，AngularJS库相较于其他JavaScript库来说做的事不多，然而，这个小而强大的AngularJS却是该应用的全部灵感之源。 背景 在该应用中，我们需要做些简单工作。首先，我们需要用CSS设计名片。然后，我们需要让用户实时的输入和编辑数据，这个地方AngularJS就不可或缺了。再然后，我们需要将名片的HTML div容器转化...
Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定义过滤器，幸运的是，你找到了这篇博文。 下面显示的是自定义过滤器长什么样子(请注意myfilter): 我们的自定义过滤器叫做 "myfilter", 它有由 :隔开的4个参数. 这是一个将会用到的样本输入:$scope.friends = [{name:John, phone:555-1276}, {name:Annie, phone:800-BIG-MARY}, {name:Mike, phone:555-4321}, {name:Adam, phone:555-5678}, {name:David,...
当我们构建AngularJS应用时，通过浏览器（如Chrome，Firefox和IE）的JavaScript控制台访问应用中隐藏的数据和服务总会有些困难。下面是一些简单的技巧可以帮助我们通过Javascript控制台来查看或者控制正在运行的Angular应用，使得应用可以比较容易进行测试，修改，甚至实时的修改我们的Angular应用： 1： 访问作用域 通过一行简单的JS程序访问页面中任何作用域（甚至是隔离的作用域！）： > angular.element(targetNode).scope() ...
按以下步骤来创建AngularJS应用 第1步：加载框架 作为一个纯粹的JavaScript框架，它可以使用<script>标签来添加。 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script>第2步：使用ng-app指令定义AngularJS应用 <div ng-app=""> ... </div>第3步：用 ng-model指令定义的模式名称 <p>Enter your Name: <input type="text" ng-model="name"></p>第4步：用ng-bind指令将上述模型中的值绑定...
HTML不支持嵌入在HTML页面中的HTML页面。实现这一功能通过使用以下方式： 使用Ajax - 让一台服务器来调用获取相应的HTML页面，并将其设置在HTML控件的innerHTML。 使用服务器端包含 - JSP，PHP等Web端服务器技术可以在包括动态页面中的HTML页面。使用AngularJS，我们可以用ng-include指令在一个HTML页面嵌入另一个HTML页面。 <div ng-app="" ng-controller="studentController"><div ng-include="main.html"></div><div ng-...
AngularJS提供$http控制，可以作为一项服务从服务器读取数据。服务器可以使一个数据库调用来获取记录。 AngularJS需要JSON格式的数据。一旦数据准备好，$http可以用以下面的方式从服务器得到数据。 function studentController($scope,$http) { var url="data.txt";$http.get(url).success( function(response) {$scope.students = response; }); }在这里，data.txt中包含的学生记录。 $http服务使Ajax调用和设置针对其学生的属性。...
1.起因 自己一直做winform，有幸从某个大神手里接了一个node.js,express,angularJS等集众多开源框架的一个项目，赶鸭子上架，于是一边学习，一边用自己以往的思中去整理，重构代码； 2.问题 在某几个环境下，需要用BootStrap的模态框，咱是学win的么。。 自然而然的想到将boosStrp的模态框整成一个通用的东西，四处调用 。。。 于是用patial引用对话框文件，对话框本身用anglurJS进行了服务器相关的通讯 。 后来发现，当只用一个的...
代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://localhost:81/js/angular.min.js"> </script> <body ng-app="app" ng-controller="c"> <div dir ng-repeat="item in items" ng-model="m"> {{item}} + {{m}} <br> </div> </body> <script> var app = angular.module("app", [...
这里给大家分享的是一个angularJS 中$attrs方法的使用示例：代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title> 无标题文档 </title> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://localhost:81/js/angular.min.js"> </script> </head> <body ng-app="Demo"> <div a> ...