angularjs
Posted liu玙
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs相关的知识,希望对你有一定的参考价值。
1.angularjs的下载地址为:https://angularjs.org
2.什么是angularsjs????angularjs是对html的扩展,吸收了传统的MVC基本原则,将管理数据的模型(model),应用逻辑代码(controller),以及向用户展示数据的代码(view)清晰的分开,从而解决静态网页技术构建动态应用的不足,同时省去了一些繁琐的DOM操作及事件监听操作。
3.angularjs的主要特征:
1)数据绑定:简单来说就是UI的某个部分与javascript某些属性之间的互相映射。在传统情况下,我们需要手动的去修改dom,进而将这些变化展示出来,而当实现数据绑定后,界面的操作能实时的反应到数据,数据的变更能实时的反应到界面展现上。
2)依赖注入:在上例中,SomeController可以获取它所需要的$scope的对象,而不需要创建它。当然,我们也可以自定义一些服务,注入到需要使用的控制器中。总之,我们的类只需要简单的获取它所需要的东西,而不需要创建它所依赖的东西。这里需要强调的是,依赖注入需按照上面的形式规则,避免代码压缩产生错误。
3)指令:是angularjs最强大的功能之一,是对html扩展的核心部分,上例中的{{}},ngController都属于指令,{{}}实现的是数据绑定,ngController实现的是控制器对视图的控制。angularjs内置了很多指令,帮我们定义视图,同时我们也可以自定义指令,实现所需的功能。
<!DOCTYPE html> <html ng-app="myTest"> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-controller="SomeController"> <hello></hello> //<hello>为我们创建的指令 </div> <script> var myTest = angular.module("myTest", []); myTest.directive("hello", function() { return { restrict: "E", template: "<h1>Hello world!</h1>", replace: true }; }); </script> </body> </html>
4)过滤器(filter):通过某种规则处理接收到的值,最后返回处理后的结果。内置的过滤器有:currency(货币),date(日期),json(格式化json对象),lowercase(小写),uppercase(大写),limitTo(限制个数),number(格式化数字),orderBy(排序),filter(匹配子串)。同时,我们也可以根据需要自定义过滤器。
5)路由(route):将控制器、视图模板及浏览器当前地址栏信息进行深层链接。在应用中,可以通过调用$routeProvider服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可。也正因为路由的存在,我们不会将所有的东西都放在一个主视图中,而是创建一个布局模块,然后再用这个模块容纳其他东西,同时ng-view指令告诉angular将视图显示在哪。在实际的开发中,很少用到angular的内置路由ngRoute,而是使用基于ngRoute开发的第三方路由模块ui.router,在这里分享一篇文章http://www.html-js.com/article/Front-end-source-code-analysis-original-uirouter-source-code-analysis
以上是关于angularjs的主要内容,如果未能解决你的问题,请参考以下文章