文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Angular 1.x个人使用的示例分析

2024-04-02 19:55

关注

这篇文章主要为大家展示了“Angular 1.x个人使用的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angular 1.x个人使用的示例分析”这篇文章吧。

基本概念

 1、依赖注入

依赖注入,在angular中到处可见,这里不会照本宣科,只以很直白的方式的简单描述基本使用方式,以$scope注入为例。

创建一个controller,注入$scope,有三种写法:

1)隐式注入

function HomeController($scope){};

2)内联注入

app.controller('HomeController',['$scope',function($scope){ }])

3)显式注入

app.controller(‘HomeController',HomeController);

HomeController.$inject=[‘$scope'];

function HomeController($scope){

}

注意:由于第一种注入方式,是通过对函数做toString操作,然后使用正则匹配出参数名称,来实现注入,所以这种方式不能对代码进行压缩混淆处理。

 2、directive

指令系统,我认为是angular1.x版本中最强大也是最复杂的部分,angular作者本身做后端出身,所以在整个指令周期也符合语言处理过程:经过编译(compile函数,会返回link函数)、链接处理(link函数)。

1)指令最基本配置

app.directive(‘dire',function(){

return function(){

  return {

    template/templateUrl:'', //模版

    scope:{} //为true或为对象表示隔离作用域

    restrict 'ACEM'//使用方式

    link:function(scope,ele,attrs,controllers){}

    compile:function(ele,attr){return function(){}}//如果此函数存在,link函数会被忽略,因为compile函数会返回link函数

    }

  }

});

2)关于绑定策略

独立作用域父子作用域之间交换数据的方式,主要有三种(或说四种)

  @绑定,指令属性的值可以使用表达式,但是得出来的值一定是字符串;

  &绑定,表示引用绑定,主要绑定父作用域中函数,实现关注点的注入

  =绑定,表示双向数据绑定

  <绑定,表示单向绑定

注意:对于&绑定的使用,主要是为了实现子作用域到父作用域的传递,个人比较喜欢vue中父子交互的方式:props in,event out。所以这里我一般使用 scope.$emit(‘xxx',data),来实现子传父。

3、component

component是1.5+新增的方法,主要为了往angular2+的过度更自然一些,相当于指令restrict:'E'的简化,类似于vue中的component,不建议操作dom,一般只用于渲染,建议构建pure component。

4、controller

controller可以认为是一个封装程序逻辑的地方,这里和后端mvc中controller的作用类似,拿到modal,渲染模版,在angular中$scope是连接controller和view的桥梁,$scope是实现数据绑定的基础,详见文档,这里不再赘述。

controller创建方式,主要分为静态工厂方法注册和动态注册:

1)静态注册:

app.controller(‘HomeController',function(){})

2)动态注册:

$controllerProvider.register(“HomeController”,function(){})

注意:动态注册是实现按需加载的基础,在项目结构实战模块会基于requirejs 来演示怎么实现动态按需加载controller(当然也可以使用oclazyload模块实现按需加载)。

5、service

service一般是封装通用代码,所谓通用代码一般是跨controller/directive等使用的代码,所以经常用来封装ajax接口访问、工具接口等。

service创建方式有三种:

  1)、provider最原始的创建方式,可以注入到config中,加上provider后缀,有固定格式,必须返回$get函数

  2)、factory是对provider的封装,直接返回对象即可

  3)、service是最简单的创建方式,通过传递构造函数来创建服务。

6、filter

过滤器主要实现对象的格式化

7、router

内置路由模块ngRoute,用的较少,主要因为无法实现复杂路由比如嵌套,多层等,当然也可以结合ng-include实现类似效果,推荐使用第三方路由模块ui-router,ui-router是基于state的一种路由框架,是使用最多的一种路由模式。

以上是“Angular 1.x个人使用的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯