最近因为项目的比较大，需要加载的js文件较多，为了提高首屏页面的加载速度，需要对js文件进行按需加载，然后网上参考了一些资料，自己也深入研究一番之后，实现了按需加载控制器js文件及指令js文件的效果； 思路如下 1、借助ui-router里面的resolve属性来实现预加载 2、需要借助$controllerProvider动态去注册控制器，$compileProvider动态去注册指令 3、需要借助$q来帮助我们实现异步加载，具体步骤如下所示； 1、在我们定义的ap...
angular.js 自带jsonp，实现跨域，下面来实现搜索框的下拉列表，使用百度和360分别尝试一下 百度：url截取之后红色部分需替换 ：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=数据&cb=JSON_CALLBACK 360：https://sug.so.360.cn/suggest?callback=JSON_CALLBACK&word=数据 注意：需要在服务器环境下运行 思路：1 .声明 angular2 .控制器函数中调用$http服务，用来读取web服务器上的数据3 .绑定数据$scope.data=[] 用来...
一直想写个评论系统，看了下多说，网易,简书的评论，想了下自己该实现怎样的评论系统。 评论系统关键是嵌套层数以及数据库表设计。嵌套层数多，表结构复杂，呈现也麻烦，最后决定实现一个二级评论。系统由maven构建，springboot快速搭建spring环境。前台采用angularjs+bootstrap,后台使用springmvc+mybatis,数据库采用MySQL.前台请求后台API操作评论。目录结构数据库表设计##说说表或者文章表 create table saying ( saying_id IN...
Angularjs自定义指令实现三级联动效果，先上图代码<html lang="zh-CN" ng-app="myApp"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><script src="jquery.min.js"></script><script src="angular.js"></script><script src="bootstrap.min.js"></script><link rel="stylesheet" href="bootstrap.min.css" rel="extern...
angularjs与pagination插件可以完美实现前端的分页，筛选，搜索等功能，前提当然需要有后台开发配合，今天我们只说前端实现： 1、引入pagination插件，在angularjs引入之前先加载pagination插件；2、在定义controller的时候，需要注入pagination插件； 3、分页前端原理基本需要有个默认异步请求，当点击分页，再次请求数据并向后台发送当前页码，如果有搜索数据或者筛选数据功能，在发送请求的同时需要带上与后台开发共同定义的搜索...
前言：之前写个一个jQuery的分页显示插件，存在许多的bug，现在由于业务需要，学习的一点AngularJS，重新用angularjs实现了这个分页插件实现效果图： （效果图是加上了bootstrap的css文件）用法： angular-pagination.js代码： /*** angularjs分页控件* Created by CHEN on 2016/11/1.*/angular.module(myModule, []).directive(myPagination, function () {return {restrict: EA,replace: true,scope: {option: =pageOption},temp...
1、首先我们要引进angular.js和angular-route.js文件代码如下:<script type="text/javascript" src=lib/angular.min.js></script><script type="text/javascript" src=lib/angular-route.js></script> 2、然后我们要在html中创建锚点和容器（ng-view） <a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第一页 </a> <a href="#second" rel="external nofoll...
登录： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link rel="manifest" href="manifest.json" rel="external nofollow" > <!-- un-comment this code to enable service worker <script> if (serviceWorker in navigator) { navigator.serviceWorker.register(service-worker.js) .the...
前言 之前给大家介绍过一篇关于AngularJS中实现无限级联动菜单的文章，但没来得及和大家分享使用的示例，下面这篇文章就来给大家分享下几个使用的demo。 文中包括demo如下： 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo 注意：在阅读本文前请先移步上一篇文章：//www.gxlcms.com/article/78126.htm 1. 同步加载子选项在各联动菜单加载之前，我们已经通过某种方式（比如后端渲染、api依赖、de...
闲来没事，分享下项目中自己写的分页组件。来不及了，直接上车。 效果：输入框可任意输入，并会自动提交到该页 依赖项： fontawesome，bootstrap html: <ul class="page clearfix"><li ng-hide="currentPage <= 1"><a href="" ng-click=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" firstPage()"><i class="fa fa-step-backward"></i></a><a href="" ng-click=" rel="exte...
本例通过Angular框架来实现简单的表单验证 一、html结构 1、借助于bootstrap快速的编写了一个简单的表单 代码主要部分如下： <div class="container" style="margin-top: 30px;" ng-controller="myCtrl"><h1 style="text-align: center">用户表单提交</h1><form action="upload.js" class="form-horizontal" name="myForm"><div class="form-group"><label for="username" class="col-sm-3 control-label">用户名</label><div cl...
一、demo功能分析 1、通过service()创建数据并遍历渲染到页面 2、根据输入框的输入值进行字段查询 3、点击各列实现排序功能。 二、实现 1.1 数据定义与渲染 angular更偏向于是一个MVVM模式的框架，所以它的controller很薄，里面的业务逻辑也是少的，因此应该养成把逻辑写在service或者Factory等angular提供的可以自定义服务的方法中。此次demo通过angular的service方法来注册并定义商品数据。 angular.module("app",[]) .service...
一、页面搭建 1、html结构 采用BootStrap3来快速创建一个购物车表单样式。 主要功能： A：列表数据所示 B：增加删除端口 C：清空购物车 D：商品数量的增减 E：动态计算商品价格以及总价<!DOCTYPE html> <html lang="en" ng-app="app"> <head><meta charset="UTF-8"><title>购物车</title><link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"><script src="../vendor/angular.js"></script><script src="car...
本文实例讲述了AngularJS实现使用路由切换视图的方法。分享给大家供大家参考，具体如下： 下面是一个简单的学生信息管理实例。 注意：除了引用angular.js之外，还要引用angular-route.js。 1、创建index.html主视图 在index.html主视图中，我们将会把多个视图共有的东西都放在里面，例如菜单。在这个例子中，我们仅仅把应用的标题放在里面，然后再用ng-view指令来告诉Angular把视图显示在哪儿。 <!DOCTYPE html> <html xmlns="http...
00.混乱的前端界 Angular1.x确实是个学习成本很高的框架，刚开始实习那会儿，前端啥也不懂，工头说用Angular，我们这群小弟也只能硬着头皮学。在这之前，前端的东西大部分都用的jQuery，而Angular正好是和jQuery的思维是相反的，开发过程中遇到了不少坑。而Angular团队也放弃了1.x开始开发和React神似的2.0版本，唉，真是沧海桑田啊。 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学，但是相对于成熟的jQuery插件库，...