-
Angularjs实战
收藏Angularjs的基础教程太多,真正企业级开发会遇到的很多坑,所以把自己使用Angularjs开发遇到的坑,和怎么解决的方法写出来,供大家参考。
最近更新文章
Angularjs自定义指令计算浏览器高度
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>柳絮飞祭奠</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
...
Angularjs的directive封装ztree
一般我们做web开发都会用到树,恰好ztree为我们提供了多种风格的树插件。
接下来就看看怎么用Angularjs的directive封装ztree
<!DOCTYPE html>
<html ng-app="ceshiapp" ng-controller="ceshicontroller">
<head>
< ...
AngularJS实战之ngAnimate插件实现轮播
第一步:引入angular-animate.js
第二步:注入ngAnimate
var lxApp = angular.module("lxApp", [ 'ngAnimate' ]);
第三步:定义controller,设置好三张轮播图片
.z_login_bg1 {
position: absolute;
width: 100%;
height: 100% ...
AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式
一、使用$on、$emit和$broadcast进行controller通信
虽然AngularJS是不推荐使 ...
AngularJS监听数组变化
我们在使用angualr的监听时候,业务的需要我们会去监听一个数组的某一个值得变化,再写逻辑代码。然而我们在使用$scope.$watch(“”,function(){
})时候会发现不管用,这是由于$scope.$watch是有三个参数的,默认情况下是
$scope.$watch(“”,function(){
},false),只是去监听数组的地址是否发生变化,当我们要去监听数组的某一个值时候,需 ...
AngularJS的$location基本用法和注意事项
一、配置config
app.config([ '$locationProvider', function($locationProvider) {
$locationProvider.html5Mode({
//设置为html5Mode(模式),当为false时为Hashbang模式
enabled : true,
//是否需要加入base标签,这里设 ...
AngularJS 无限滚动加载数据控件 ngInfiniteScroll
在开发中我们可能会遇到滚动鼠标到浏览器底部实现数据的加载,js和jquery实现都不复杂都是既然AngularJS提供现成的我们怎么不用昵。
ng-infinite-scroll.js这个组件则可以实现:
ng-infinite-scroll.js:下载地址:http://sroze.github.io/ngInfiniteScroll/
使用:
<!DOCTYPE html>
< ...
AngularJS实战之ng-repeat的详细用法
一、基本语法
{{$index}}:获取元素的下标。
{{$first}}:判断当前元素是否是第一个元素,是则为true,否则:false;
{{$last}}:判断当前元素是否是最后一个元素,是则为true,否则:false;
{{$middle }}:判断当前元素是否是中间元素,,是则为true,否则:false;
{{ $odd}}:判断当前元素是否是奇数,,是则为true,否则:false; ...
AngularJS实战之filter的使用二
博文一中的filter是angular自带的filter,一般不会满足我们的使用。我们可以自定义filter。
一、自定义filter实现反转字符串
<div>{{ceshi|reverse}}</div>
app.filter('reverse', function() {
return function(text) {
return text.split( ...
AngularJS实战之filter的使用一
一、格式化数字为货币格式。
<div>{{money|currency:"$"}}</div>
<div>{{money|currency:"RMB"}}</div>
script:
app.controller("crl", function($scope, $filter) {
...
AngularJS实战之路由ui-view
1. 路由(ui-router)
1.1. 环境
1) angular.min.js
2) angular-ui-router-0.2.10.js
3) 确保确保包含ui.router为模块依赖关系.
4) var app=angular.module("app",['ui.router']);
1.1. 视图激活方式
1) $state.Go():优先级较高的便利方式
2) ...