快捷搜索:  汽车  科技

angularjs怎样学习:育知同创HTML5开发学习干货分享

angularjs怎样学习:育知同创HTML5开发学习干货分享ng-model是一种语法糖,不使用此指令,也可以实现同样的效果给表单元素进行使用,负责数据的双向绑定,代替了表单元素中的value属性2. ng-controller 负责与JavaScript中的控制器进行关联3. ng-model

常用指令

  1. ng-app

    整个AngularJS项目的开始指令

    在使用RequireJS AngularJS中,不需要显示的添加添加ng-app指令,而是通过代码动态添加

angularjs怎样学习:育知同创HTML5开发学习干货分享(1)

2. ng-controller

负责与JavaScript中的控制器进行关联

angularjs怎样学习:育知同创HTML5开发学习干货分享(2)

3. ng-model

给表单元素进行使用,负责数据的双向绑定,代替了表单元素中的value属性

ng-model是一种语法糖,不使用此指令,也可以实现同样的效果

angularjs怎样学习:育知同创HTML5开发学习干货分享(3)

4. ng-style

给元素添加css样式

angularjs怎样学习:育知同创HTML5开发学习干货分享(4)

5. ng-class

6. ng-click

给元素绑定单击事件

angularjs怎样学习:育知同创HTML5开发学习干货分享(5)

7. ng-mouseover

8. ng-focus

9. ng-blur

10. ng-change

11. ng-repeat遍历数组或对象注意:如果数组中存在重复元素,则使用track by $index

angularjs怎样学习:育知同创HTML5开发学习干货分享(6)

12. ng-hrefa

标签的href属性替换成ng-href属性进行使用

angularjs怎样学习:育知同创HTML5开发学习干货分享(7)

13. ng-bind

表达式的指令形式,不会出现页面上渲染出大括号的问题

angularjs怎样学习:育知同创HTML5开发学习干货分享(8)

14. ng-cloak

解决页面渲染出大括号的问题

angularjs怎样学习:育知同创HTML5开发学习干货分享(9)

15. ng-init

初始化数据使用

angularjs怎样学习:育知同创HTML5开发学习干货分享(10)

16. ng-show

17. ng-hide

18. ng-if

19. ng-include

angularjs怎样学习:育知同创HTML5开发学习干货分享(11)

控制器

angularjs怎样学习:育知同创HTML5开发学习干货分享(12)

父子控制器作用域问题

  • 父控制器中的数据,子控制器可以直接使用

  • 如果子控制器和父控制器中变量冲突,优先使用自己的,使用$parent来访问父控制器中的数据

  • rootScope上面的数据,任何控制器都可以直接使用

传值方式(父传子、子传父)

angularjs怎样学习:育知同创HTML5开发学习干货分享(13)

内置服务

  1. $scope

    添加属性和方法,渲染到页面上

angularjs怎样学习:育知同创HTML5开发学习干货分享(14)

2. $filter在控制器中使用过滤器

angularjs怎样学习:育知同创HTML5开发学习干货分享(15)

3. $rootScope

根部的scope,添加到此处的值,任何控制器都可以访问

angularjs怎样学习:育知同创HTML5开发学习干货分享(16)

4. $http

网络请求服务

angularjs怎样学习:育知同创HTML5开发学习干货分享(17)

5. $interval

angularJS提供的定时器

angularjs怎样学习:育知同创HTML5开发学习干货分享(18)

6. $timeoutangularJS

提供的定时器

angularjs怎样学习:育知同创HTML5开发学习干货分享(19)

7. $location

获取有关地址的信息

angularjs怎样学习:育知同创HTML5开发学习干货分享(20)

过滤器

1. currency

价钱的显示

    2. number

    数字千位分隔符

    angularjs怎样学习:育知同创HTML5开发学习干货分享(21)

    3. orderBy

    按照某种方式排序

    angularjs怎样学习:育知同创HTML5开发学习干货分享(22)

    4. date

    时间格式化输出

    angularjs怎样学习:育知同创HTML5开发学习干货分享(23)

    5. limitTo

    angularjs怎样学习:育知同创HTML5开发学习干货分享(24)

    6. filter

    根据关键字,在数据中进行筛选

    angularjs怎样学习:育知同创HTML5开发学习干货分享(25)

    7. uppercase lowercase

    大小写转换

    angularjs怎样学习:育知同创HTML5开发学习干货分享(26)

    8. json

    格式化json显示

    angularjs怎样学习:育知同创HTML5开发学习干货分享(27)

    9. 自定义过滤器

    使用filter()方法,进行过滤器的自定义

    高阶函数,函数内部返回一个函数,内部函数返回结果

    angularjs怎样学习:育知同创HTML5开发学习干货分享(28)

    自定义过滤器的使用

    angularjs怎样学习:育知同创HTML5开发学习干货分享(29)

    自定义指令

    使用directive()方法,进行自定义指令

    angularjs怎样学习:育知同创HTML5开发学习干货分享(30)

    自定义指令的使用

    angularjs怎样学习:育知同创HTML5开发学习干货分享(31)

    服务相关

    service

    直接向this上面添加属性和方法即可

    angularjs怎样学习:育知同创HTML5开发学习干货分享(32)

    factory

    返回对象

    angularjs怎样学习:育知同创HTML5开发学习干货分享(33)

    value

    变量的共享

    angularjs怎样学习:育知同创HTML5开发学习干货分享(34)

    constant

    常量的共享

    可以注入到config中

    angularjs怎样学习:育知同创HTML5开发学习干货分享(35)

    provider

    provider是service factory value的内部实现

    provider提供的服务可以注入到config中

    angularjs怎样学习:育知同创HTML5开发学习干货分享(36)

    AngularJS模块

    Angular-ui-router

    1. 模块使用时,首先在初始化app的时候添加模块名称

    angularjs怎样学习:育知同创HTML5开发学习干货分享(37)

    2. 编写HTML结构代码

    angularjs怎样学习:育知同创HTML5开发学习干货分享(38)

    3. 编写路由规则

    angularjs怎样学习:育知同创HTML5开发学习干货分享(39)

    4. 路由跳转以及参数的传递

    angularjs怎样学习:育知同创HTML5开发学习干货分享(40)

    angularjs怎样学习:育知同创HTML5开发学习干货分享(41)

    5. 参数的接收

    angularjs怎样学习:育知同创HTML5开发学习干货分享(42)

    6. 内置服务

    • $stateProvider状态提供者,负责各种路由规则的设定

    • $urlRouterProvider设置默认路由

    • $state路由跳转使用

    • $stateParams用于接收路由传递的参数

    AngularCSS

    1. 引入模块

    angularjs怎样学习:育知同创HTML5开发学习干货分享(43)

    2. 在控制器中使用$css使用

    angularjs怎样学习:育知同创HTML5开发学习干货分享(44)

    内置服务

    • $css

    AngularAMD

    1. angular-ui-router配置路由规则的时候,state中需要修改

    angularjs怎样学习:育知同创HTML5开发学习干货分享(45)

    2. 对应的控制器文件home.js,返回的只是数组而已

    angularjs怎样学习:育知同创HTML5开发学习干货分享(46)

    RequireJS

    1. 引入文件,并设置主模块

    angularjs怎样学习:育知同创HTML5开发学习干货分享(47)

    2. 配置操作

    angularjs怎样学习:育知同创HTML5开发学习干货分享(48)

    3. 模块的引入操作

    angularjs怎样学习:育知同创HTML5开发学习干货分享(49)

    4. 定义模块

    angularjs怎样学习:育知同创HTML5开发学习干货分享(50)

    Gulp

    1. 电脑上全局安装

    angularjs怎样学习:育知同创HTML5开发学习干货分享(51)

    2. 初始化package.json文件(进入项目根目录)

    angularjs怎样学习:育知同创HTML5开发学习干货分享(52)

    3. 在项目中安装gulp

    angularjs怎样学习:育知同创HTML5开发学习干货分享(53)

    4. 在项目中安装gulp插件

    angularjs怎样学习:育知同创HTML5开发学习干货分享(54)

    5. 创建gulpefile.js文件,并添加代码

    angularjs怎样学习:育知同创HTML5开发学习干货分享(55)

    6. 执行命令,进行打包压缩

    angularjs怎样学习:育知同创HTML5开发学习干货分享(56)

    JSSDK的开发

    1. 配置安全域名

    angularjs怎样学习:育知同创HTML5开发学习干货分享(57)

    2. 代码中的配置

    angularjs怎样学习:育知同创HTML5开发学习干货分享(58)

    3. ready方法的使用

    angularjs怎样学习:育知同创HTML5开发学习干货分享(59)

    4. 其他方法的使用

    拍照或从手机相册选取照片

    angularjs怎样学习:育知同创HTML5开发学习干货分享(60)

    打开地图,定位到指定的位置

    angularjs怎样学习:育知同创HTML5开发学习干货分享(61)

    猜您喜欢: