AngularJs笔记

Controller构造

controller(name, constructor)

Param Type Details
name string/Object Object Controller name, or an object map of controllers where the keys are the names and the values are the constructors.
constructor Function Controller constructor function.

constructorcontroller的构建函数,我们需要依赖一些其它库来构建一个controller。这个时候angular就用到了一项技术,叫做依赖注入,dependency inject。

比如说我新建一个controller,需要从服务器上获取点数据,也就是ajax,angular.有个对应的库叫做$http。代码就这样写:

controller("myctrl",function($scope,$http){ 
.... 
})

这时候你就可以在构建函数内访问并$http了。如果根据业务扩展的需要,我还要获得并修改浏览器的url,这时候就需要$location:

controller("myctrl",function($scope,$location,$http){ 
.... 
})

$location$http的位置颠倒也没问题。也就是说如果你需要什么库,直接在构造函数的参数里把需要的东西写出来就行了,angular会自动获取那个库并传递给构造函数。有没有觉得很神奇?!
angular是怎么知道构造函数的参数是什么的?

(function($scope,$http,$location){}).toString()

运行这段代码你就懂了。toString可以将函数的源代码输出成字符串,通过解析这段字符串来得知他的参数以及名称。
但是这样会遇到一个问题,当我使用压缩工具来压缩源码之后,函数的参数名都会变,怎么办?
function($scope,$location,$http){}
压缩后成了
function(a,b,c){}
这时候就需要将构建函数替换为一个数组,数组最后一个元素为构建函数,其它为参数。

controller("myctrl",[ "$scope", "$location", "$http", function(a,b,c){

}])

现在知道
controller("myctrl",[ "$scope", function($scope){ ... }])的作用了吧.其实function里面的$scope这个变量名是可以任意的.

常用指令

加载指令-->编译指令compile-->链接指令link

ng-repeat

循环

循环对象:

  • {{ x.name + ', ' + x.country }}
ng-transclude

会保留指令内部内容, 可以让指令之间嵌套使用.

myApp.directive("hello", function(){
  return {
      restrict: "AE",
      transclude: true,
      template: "
Hello,自定义标签!
" } }); ----------
这是标签内部内容
------------- 显示如下: Hello,自定义标签! 这是标签内部内容
创建自定义的指令

内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令runoobDirective, 但在使用它时需要以 - 分割, runoob-directive.

模板有:
template, templataUrl, tamplateCache

restrict 值可以是以下几种:

  • E 作为元素名使用,默认, attribute
  • A 作为属性使用, element
  • C 作为类名使用, class
  • M 作为注释使用,此时要添加replace:true, comment
    例如:


    
    My AngularJS App



scope的绑定策略
指令 作用
@ 把当前属性作为字符串传递,还可以绑定来自外层的scope的值,在属性值插入{{}}即可
= 与父scope中 的属性进行双向绑定
& 传递一个来自父scope的函数,稍后调用.

AngularJS 过滤器

过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

事件传播

$emit('MyEvent'),向上传播
$broadcast('MyEvent'), 向下传播

bower.json 依赖 ~, ^,>等符号含义

  • ~version In the simplest terms, the tilde matches the most recent minor version (the middle number). ~1.2.3 will match all 1.2.x versions but will miss 1.3.0. "Approximately equivalent to version" See npm semver - Tilde Ranges & semver (7)
  • ^version The caret, on the other hand, is more relaxed. It will update you to the most recent major version (the first number). ^1.2.3 will match any 1.x.x release including 1.3.0, but will hold off on 2.0.0. "Compatible with version" See npm semver - Caret Ranges & semver (7)
  • version Must match version exactly
  • >version Must be greater than version
  • >=version etc
  • <=version 1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0
  • http://sometarballurl (this may be the URL of a tarball which will be downloaded and installed locally
  • * Matches any version

http://stackoverflow.com/questions/22343224/difference-between-tilde-and-caret-in-package-json

自定义过滤器 filter

ng-bind

使用ng-bind代替{{ }}取值,可避免因为加载过慢导致出现{{}}的情况.两种方法分情况使用,各有自己的单独作用范围.

hello, {{ name }}

hello,

AngularJs常用插件

angular-translate

用于国际化, 地址https://angular-translate.github.io/

angular-ui-router / ui-router

angular路由管理,地址https://ui-router.github.io/

ocLazyLoadProvider

延时加载, 地址https://oclazyload.readme.io/

angular-smart-table

支持表格排序,过滤,搜索,分页,总是很强大.
http://lorenzofox3.github.io/smart-table-website/

ngStorage

支持本地存储和session存储.地址https://github.com/gsklee/ngStorage

angular-breadcrumb

基于ui-router的导航插件.
地址[https://github.com/ncuillery/angular-breadcrumb)[https://github.com/ncuillery/angular-breadcrumb]

angular-toastr

弹出层通知.
https://github.com/Foxandxss/angular-toastr

  • 标签的属性, 如果使用驼峰法定义的话, 调用时要用全部写.

你可能感兴趣的:(AngularJs笔记)