angularjs入门整理
之前发过一篇博文,从mobile angular ui的demo和其官网初识整个angularjs的大体使用,但是没很好学习,只是通过一些技术博文初步认识,陷入很多坑。所以现在在中文官网正式整理下知识点巩固
- 模板内置指令
引导程序 ng-app
设置变量 ng-model
获取变量 {{}}
遍历 ng-repeat=”row in rows”
搜索功能 ng-repeat=”row in rows | filter:查询变量名”
排序功能 ng-repeat=”row in rows | orderBy:排序变量名”
图片 ng-src=“{{}}”
- angularjs内置方法
- 定义项目:jsGen = angular.module("jsGen", ["ngLocale", "ngRoute", "ngAnimate", "ngResource", "ngCookies", "ui.validate", "genTemplates", "angularFileUpload"]);
- 初始化:jsGen.run(["app", "$q", "$rootScope", "$location", "$timeout", "$filter", "getFile", "JSONKit", "toast", "timing", "cache", "restAPI", "sanitize", "mdParse", "mdEditor", "CryptoJS", "promiseGet", "myConf", "anchorScroll", "isVisible", "applyFn", "param", "store", "i18n-zh",
- 定义常量:jsGen.constant("app", {url:’’,version:Date.now()}
- 配置路由:jsGen.config(["$routeProvider", "$locationProvider",]);配置httpProvider:jsGen.config(["$httpProvider", "app"]) ;
- 接口服务:jsGen.factory("restAPI", ["$resource",]);工厂模式:jsGen.factory("i18n-zh", ["$locale"]);缓存:jsGen.factory("cache", ["$cacheFactory"]);
- 过滤:jsGen.filter("placeholder", ["JSONKit"])
- 定义指令(绑定事件):jsGen.directive("genTabClick", function() {});
- 定义控制器:jsGen.controller("indexCtrl", ["app", "$scope", "$routeParams", "getList"])
angularjs之控制器controller
- AngularJS一个内置服务$http
myapp.controller(’控制器名’function($scope,$http){
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';//排序默认变量
}) - 事件处理器
<button class="btn btn-default" ng-click="testClick('aa')">点击事件</button>
/**
* 点击事件 注意.run()下只有$rootScope注入
*/
$rootScope.testClick = function(param) {
alert(param);
}
angularjs之服务service
'use strict'; //定义angular模块(只有定义了才能在app.js中作为依赖包引入)
//依赖ngResource包
var services = angular.module('services', ['ngResource']); //.factory()工厂模式,具体还没深入了解学习,暂时跟着demo写
services.factory(
'newsService',
['$resource', '$routeParams', 'API',//控制器访问句柄
function($resource, $routeParams, API){
return $resource(
API.url + '/news/:action/:id', //定义数据请求url
{},
{
getList: {method:'GET', params:{action:'lists'},isArray:true}//新闻模型方法
});
}]
);
angularjs之过滤器filter
myapp.controller('过滤器名', function(){ //返回过滤方法
return function(input) { //返回过滤结果
return input ? '\u2713' : '\u2718';
}
});
- angularjs内置过滤方法
* {{ "lower cap string" | uppercase }}{{ {foo: "bar", baz: 23} | json }}
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"yyyy-MM-dd HH:mm:ss" }}
{{'abc'|uppercase}}
结果:
angularjs入门整理的更多相关文章
- Asp.Net Core WebAPI入门整理(三)跨域处理
一.Core WebAPI中的跨域处理 1.在使用WebAPI项目的时候基本上都会用到跨域处理 2.Core WebAPI的项目中自带了跨域Cors的处理,不需要单独添加程序包 3.使用方法简单 ...
- 《AngularJS学习整理》系列分享专栏
<AngularJS学习整理>系列分享专栏 <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...
- AngularJS - 入门小Demo
AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- AngularJS入门心得3——HTML的左右手指令
在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- (一)Angularjs - 入门
AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...
- AngularJS入门教程:日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
随机推荐
- Mysql导出导入乱码问题解决
MySQL从4.1版本开始才提出字符集的概念,所以对于MySQL4.0及其以下的版本,他们的字符集都是Latin1的,所以有时候需要对mysql的字符集进行一下转换,MySQL版本的升级.降级,特别是 ...
- iOS实用技能扩展-集成支付宝
前奏 现在随着移动开发的快速发展,移动支付变得越来越流行与必不可少.最近做了一个关于支付宝支付功能的应用,在使用支付宝的过程中,遇到一些不必要的弯路,因此,写了这篇文章总结一下关于iOS中如何开发使用 ...
- SSL安全解决方案(转)
http://blog.csdn.net/photnman/article/details/388853 背景及部分安全知识在高度保证应用程序安全的过程中我们不免会考虑到如下的安全需求,然后根据这些安 ...
- Android NDK 【错误】The method loadLibrary(String) is undefined for the type Settings.Syste
[错误]The method loadLibrary(String) is undefined for the type Settings.System [解决方法] 不要加入包import andr ...
- Getting started with new I/O (NIO)--reference
The new input/output (NIO) library, introduced with JDK 1.4, provides high-speed, block-oriented I/O ...
- use_virtual_func_without_pointer_left
#include <oistream> using namespace std; class A { public: void foo() { func(); } virtual void ...
- Js判断对象是否为空,Js判断字符串是否为空
Js判断对象是否为空,Js判断字符串是否为空,JS检查字符串是否为空字符串 >>>>>>>>>>>>>>>&g ...
- css3新增加的选择器
css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...
- [原创]ie6,7中td和img之间有间隙
情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...
- Windows Socket五种I/O模型
转载:http://www.cnblogs.com/tianzhiliang/archive/2010/08/31/1813637.html 如果你想在Windows平台上构建服务器应用,那么I/O模 ...