需求来源之前使用jspm来打包项目 但是有个最大的缺点，就是只能把项目打包成一个大的js,当项目开发到后期会很大，网上找了很久也没找到合理的jspm打包方式。 所以开始调研可以打包angular项目成多个文件的工具. 调研过程过程中看了些 vue,react配合webpack按路由功能打包的demo，感觉webpack对于打包成多个文件比较擅长。 结果第一步 核心模块依赖加载 #core.module.js //核心模块import angular-route; //官方路由依赖 import ocl...
首先介绍一下实现的效果,就是单一表单能实现添加其他的,也能删除代码如下: <h5>动态添加表单</h5> <div class="form"> <div class="form-group form-group-sm" *ngFor="let i of login"> <label class="col-form-label">用户名</label> <input class="form-control" [(ngModel)]="i.username" value="{{i.username}}"> <label class="col-form-label">密码</label> <input class="form-control" [(ngModel)]="i.password" value="...
刚学习angularJS，于是练习写了一个类似于购物车的全选/取消全选的功能，主要实现的功能有： 1、勾选全选checkbox，列表数据全部被勾选，取消同理，用ng-model实现双向绑定； 2、选中列表中的所有checkbox，全选也会被勾选；（这里我想到的方法是给每一个对象增加checked字段，然后勾选触发echoChange（）函数，用了一个cc变量计算当前checked为true的个数，然后再判断被勾选个数与数组长度是否相等，相等则证明全部被勾选，于是全...
现在的项目，无论代销，几乎不会缺省的一个功能就是上传下载功能，今天谈一谈使用AngularJS+bootsrtap下的上传下载功能。 1.angularjs和flowjs angularjs我在其他的博客里面也讲到了它的其他的一些用处，只是没有做过系统的说明，在这里也不打算一一介绍。这个在一些官网上都有说明，我也会花一点时间去整理一下angularjs的知识点以及在使用到angularjs需要注意的或者我在项目中碰到的一些问题，会在其他博客中跟大家分享。这里我只...
具体代码如下所示： find.html <!DOCTYPE html> <html ng-app="find"> <head> <title>字符查找</title> <meta charset="utf-8"/> <script src="../Script/angular.min.js" type="text/javascript"></script> <link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" > <style type="text/css"> body{ font-size: 12px; } ul{ list-style-type: none; width: 408px; margin:0px; padd...
本文实例为大家分享了AngularJS实现表单验证功能的具体代码，供大家参考，具体内容如下 <!--实例解析ng-app 指令定义了 AngularJS 应用。ng-controller 指令定义了应用控制器。ng-model 指令绑定了两个 input 元素到模型的 user 对象。formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。reset() 方法设置了 user 对象等于 master 对象。ng-click 指令调用了 reset() 方法，且在点击按钮时调用。novalidate 属性在应...
需要用到的js angular.js（用angular.min.js会导致分页控件不显示） ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由，所以讲js以及css文件的应用都放在一个主html，请同学们在html页面中添加以上文件 在开始之前，我先简单介绍下分页的原理。 分页的实质其实就是一条sql语句， 比如查找第二页，即第16到第30条数据 在MySQL中是select * from table limit 15,15 order by ...
本文实例讲述了AngularJS实现的JSONP跨域访问数据传输功能。分享给大家供大家参考，具体如下： 大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿 JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报...
html :样式采用了sui框架的样式，请自行引入查看,AngularJS,自己引入， <div ng-controller="forGetPassword" ng-app="routingDemoApp"><form novalidate name="forget"><header class="bar bar-nav"><a href="javascript:history.go(-1);" rel="external nofollow" class="ui-header-btn ui-header-btn-sm"></a><h1 class=title>忘记密码</h1></header><div class="gorgetpassowrd"><ul><li><input type="number" placeholder="请...
本文实例讲述了AngularJS实现select的ng-options功能。分享给大家供大家参考，具体如下： controller .controller(MainController, function($scope, $http, $ionicModal, $timeout) {var post = {};$http.get("data/themeData.json").success(function(response) {$scope.themeData = response.themeData;});$ionicModal.fromTemplateUrl(templates/post.html, {scope: $scope}).then(function(modal) {$scope.modal = modal;});$...
以下是AngularJS中最重要的核心功能如下所述： ?数据绑定: 模型和视图组件之间的数据自动同步。 ?适用范围: 这些对象参考模型。它们充当控制器和视图之间的胶水。 ?控制器: 这些Javascript函数绑定到特定的范围。 ?服务: AngularJS配有多个内置服务，例如 $http 可作为一个XMLHttpRequest请求。这些单一对象在应用程序只实例化一次。 ?过滤器: 从一个数组的条目中选择一个子集，并返回一个新的数组。 ?指令: 指令是关于DOM元素标记...
本文实例讲述了AngularJS学习笔记之表单验证功能。分享给大家供大家参考，具体如下： 一、执行基本的表单验证 <!DOCTYPE html> <html ng-app=exampleApp><head><meta charset="UTF-8"><title>表单</title><script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="e...
本文实例讲述了AngularJS实现进度条功能的方法。分享给大家供大家参考，具体如下： 一、功能描述： ① 通过select标签，可以为进度条选择不同的样式（颜色） ② 进度条的进度通过文本框里面的值改变（也可以快捷的选择几个特定的值） ③ 通过checkbox按钮，控制进度条上的文字是否显示 二、代码实现： <!DOCTYPE html> <html lang="en" ng-app=app> <head><meta charset="UTF-8"><title>进度条</title><script src=../js/angular.m...
本文实例为大家分享了angular过滤器排序的具体代码，供大家参考，具体内容如下首先定义一个json文件： 然后写HTML文件： <div id="box"><!--第一个下拉框--><select ng-model="a"><option value="age">按照年龄排序</option><option value="code">按照编码排序</option><option value="name">按照姓名排序</option></select><!--升序还是降序--><select ng-model="b"><option value="">升序</option><option value="-">降序</opt...
AngularJS 使用基础知识 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul>你甚至可以指定输出的顺序： <li ng-repeat="person in persons | orderBy:name">第二 动态绑定之ng-model标签 任何有用户输入，只要是有值的html标签，都可以动态绑定js中的变量， 而且是动态绑定。 <input type="tex...