angular 项目回顾
从学习angular，到实际项目开发不到一周，完全是边写边学呀，都是为了项目，已使用angular 开发了两个项目了，有些技术当时只是会用，都没好好回顾一下，现在有时间回顾一下，项目中用到的一些指令，服务，路由，filter 等，
一点点记录一来
// 初始化 angular.bootstrap(dom,['appName']);
//html 转化
// 需传参 $sce
$scope.escape = function(html) {
return $sce.trustAsHtml(html);
};
// html
<div ng-bind-html="escape(data)"></div>
// http
$http({
method:'get', // post ....
url:'/Service/resume', // url
params: {id: uid}
}).success(function(data){
console.log(data)
})
// filter
.filter('getCity', function(){
return function(city){
return $.parseJSON(city).city;
}
});
//html
{{city | getCity}}
//标签切换
<span class="{{curShow=='register'?'current':''}}" ng-click="switchView('register')">个人注册</span>
<span class="{{curShow=='login'?'current':''}}" ng-click="switchView('login')">个人登录</span>
<div class="{{curShow!='register'?'hide':''}}">
// register
</div>
<div class="{{curShow!='login'?'hide':''}}">
//login
</div>
//初始化
$scope.curShow = 'register';
$scope.switchView = function(view) {
$scope.curShow = view;
}
//ng-click="switchView('login')"
<div class="jd">
<label " checked="checked" id="company">企业</label>
<label " id="personl">个人</label>
</div>
//ｒａｄｉｏ 切换
<div class="jd">
<div ng-show="isCheckboxSelected('1')">
<label for="leader"><input type="radio" name="guanxi" id="leader">主管</label>
<label for="hr"><input type="radio" name="guanxi" id="hr">HR</label>
</div>
<div ng-show="isCheckboxSelected('2')">
<label for="workmate"><input type="radio" name="guanxi" id="workmate">同事</label>
<label for="students"><input type="radio" name="guanxi" id="students">同学</label>
<label for="friend"><input type="radio" name="guanxi" id="friend">朋友</label>
</div>
</div>
$scope.checkboxSelection = ';
$scope.isCheckboxSelected = function(index) {
return index === $scope.checkboxSelection;
};
// ｆａｃｔｏｒｙ
var app = angular.module('factory',[]);
app.factory('testFactory', function () {
// return {
// lable: function(){
// return [
// {'id' : 1, 'name':'Ted', 'total': 5.996},
// {'id' : 2, 'name':'Michelle', 'total': 10.996},
// {'id' : 3, 'name':'Zend', 'total': 10.99},
// {'id' : 4, 'name':'Tina', 'total': 15.996}
// ];
// }
// }
// * edit new methods
var data = [
{, 'name':'Ted', 'total': 5.996},
{, 'name':'Michelle', 'total': 10.996},
{, 'name':'Zend', 'total': 10.99},
{, 'name':'Tina', 'total': 15.996}
];
var factory = {};
factory.lable = function(){
return data;
}
return factory;
});
app.controller('TestController',function($scope,testFactory){
$scope.customers = testFactory.lable();
})
// 代码详见，ｇｉｔｈｕｂ
// https://github.com/llqfront/angular/tree/master/angular
// service.js
var app = angular.module('factory',[]);
app.factory('testFactory', function ($http) {
var factory = {};
factory.lable = function(){
return $http.get('/js/test.json');
}
return factory;
});
// controller.js
app.controller('TestController',function($scope,testFactory){
function init(){
testFactory.lable().success(function(data){
$scope.customers = data;
})
}
init();
})
//service、provider、factory写法
var app = angular.module('appName', []);
app.service('testService',function(){
this.lable = 'this is service';
});
app.factory('testFactory', function () {
return{
lable: function(){
return 'this is factory';
}
}
});
app.provider('testProvider', function(){
this.$get = function(){
return 'this is provider';
}
});
<body ng-controller='outputCtrl'>
<p>{{ output1 }}</p>
<p>{{ output2 }}</p>
<p>{{ output3 }}</p>
</body>
var app = angular.module('appName');
app.controller('outputCtrl', function($scope,testService, testFactory, testProvider){
$scope.output1 = testService.lable;
$scope.output2 = testFactory.lable();
$scope.output3 = testProvider;
});
require('lib/angular-route');//引入 route
var app = angular.module('testApp',['ngRoute','factory','ctrl']);// ngRoute
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/view/index.html', // 模板路径
controller: 'TestController' // 模板 中的 controller
})
.when('/book', {
templateUrl: '/view/book.html',
controller: 'BookController'
})
.when('/test', {
templateUrl: '/view/test.html',
controller: 'txController'
})
.otherwise({
redirectTo:'/'
});
});
今天呢在这增加一条，很多人看官网，或找资料，也包括我自己就是一个显示隐藏的功能怎么就实现不了呢
angular 显示 隐藏 ng-show ng-hide
笔者在这写几个例子你就会明白了，非repeat 内的 可以这样理解
//html
<p class="show-olive-btn" ng-click="showDetail(olive)">btn</p>
<div class="test" ng-show="olive.oliveDetail">
test
</div>
// controller
$scope.olive = {};
$scope.showDetail = function(olive){
olive.oliveDetail = ! olive.oliveDetail;
}
// 测试代码 html
{{olive}}<br/>
{{olive.oliveDetail}}
当你放上这两行就可以看出
默认olive.oliveDetail 是没有值，也相当于默认为false
当点击时 值为true false 切换
相当于改变{"oliveDetail":false}{"oliveDetail":true}
试一下就能明白了
有人说，单个的好实现如果在repeat 中如何实现呀
笔者也写一个例子
<tr ng-repeat="olive in customers | filter:searchText">
<td>
<p class="show-olive-btn" ng-click="showDetail(olive)">btn</p>
{{olive}} <!-- {"id":1,"name":"Ted","total":5.996,"oliveDetail":true/false} -->
{{olive.oliveDetail}}<!-- true/false -->
<div class="test" ng-show="olive.oliveDetail">
test
</div>
</td>
</tr>
//controller
$scope.showDetail = function(olive){
olive.oliveDetail = ! olive.oliveDetail;
}
写法其实是一样的只是 这次的olive 变成了 ng-repeat="olive in customers" 中单项了
如果还不懂，写出来试一下就知道了
tack by $index
watch
...
待续....
angular 项目回顾的更多相关文章
- 个人从源码理解angular项目在JIT模式下的启动过程
通常一个angular项目会有一个个模块(Module)来管理各自的业务,并且必须有一个根模块(AppModule)作为应用的入口模块,整个应用都围绕AppModule展开.可以这么说,AppModu ...
- 把angular项目整合到.net mvc中
之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...
- Angular20 nginx安装，angular项目部署
1 nginx安装(Windows版本) 1.1 下载安装包 到官网下载Windows版本的nginx安装包 技巧01:下载好的压缩包解压即可,无需安装 1.2 启动nginx 进入到解压目录,点击 ...
- Angular4--提速--提升Angular项目的首页打开速度（包含微信登录优化）
Angular项目的首页打开速度很慢,有时候会有几秒的加载时间.如果在手机端访问的话,怕是要等待十多秒,这对用户体验很差.下面参考http://www.cnblogs.com/feiyu159/p/8 ...
- Angular4---部署---将Angular项目部署到IIS上
---恢复内容开始--- Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网址:https://www.microsoft.com/en-us/download/de ...
- 网站开发进阶(二十一)Angular项目信息错位显示问题解决
Angular项目信息错位显示问题解决 绪 最近在项目开发过程中遇到这样一个棘手的问题:查询出所有订单信息后,点击选择某一个订单,查询出的结果是上一次查询所得的结果.而且会出现点击两次才可以显示订单详 ...
- [转]Angular4---部署---将Angular项目部署到IIS上
本文转自:https://www.cnblogs.com/kingkangstudy/p/7699710.html Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网 ...
- [转]Angular项目目录结构详解
本文转自:https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873 版权声明:本文为博主原创文章,转载请注明地址.如果文中有什么纰漏 ...
- angularjs探秘<三> 控制器controller及angular项目结构
先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
随机推荐
- 内核源码分析之进程调度机制（基于3.16-rc4）
进程调度所使用到的数据结构: 1.就绪队列 内核为每一个cpu创建一个进程就绪队列,该队列上的进程均由该cpu执行,代码如下(kernel/sched/core.c). DEFINE_PER_CPU_ ...
- 【Hadoop代码笔记】Hadoop作业提交之TaskTracker 启动task
一.概要描述 在上篇博文描述了TaskTracker从Jobtracker如何从JobTracker获取到要执行的Task.在从JobTracker获取到LaunchTaskAction后,执行add ...
- 记录一次Android交叉编译ffmpeg排查错误
Android版本手机直播引擎中,引用了libvlc开源库.项目接过来,发现编译脚本中使用了很多用户名下的绝对路径.项目相关人离职,导致这个脚本实际上已经废掉.而且不知道相关路径下有没有其他文件和第三 ...
- ResolverService跨子网的广播问题
ResolverService在广播请求时,需要借助McastTransport,而McastTransport利用java.net.MulticastSocket进行收发,java.net.Mult ...
- 基于 Red5 的流媒体服务器的搭建和应用
http://www.ibm.com/developerworks/cn/opensource/os-cn-Red5/ Red5 是一个采用 Java 开发的开源免费 Flash 流媒体服务器.Red ...
- PLSQL Developer 常用设置及快捷键
1.登录后自动选中My Objects(已验证可用) 默认情况下,PLSQL Developer登录后,Brower里会选择all Objects,如果你登录的用户是DBA, 要展开tables目录, ...
- mysql从一个表中拷贝数据到另一个表中sql语句
这一段在找新的工作,今天面试时,要做一套题,其中遇到这么一句话,从一个表中拷贝所有的数据到另一个表中的sql是什么? 原来我很少用到,也没注意过这个问题,面试后我上网查查,回来自己亲手写了写,测试了下 ...
- HDU 4489 The King’s Ups and Downs （DP+数学计数）
题意:给你n个身高高低不同的士兵.问你把他们按照波浪状排列(高低高或低高低)有多少方法数. 析:这是一个DP题是很明显的,因为你暴力的话,一定会超时,应该在第15个时,就过不去了,所以这是一个DP计数 ...
- MFC通过对话框窗口句柄获得对话框对象指针
C***Dialog* pWnd= (C***Dialog*)FromHandle(hWnd); //由句柄得到对话框的对象指针 pWnd->xxx( ); ...
- 编译小结(6)认识Automake
我前面说了很多如何用gcc或 Makefile怎么编译的东东,但在Linux下装过软件的都应当见过,很多源码安装的包是用Automake 来编译的.输入下"./configur ...