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的主要内容,如果未能解决你的问题,请参考以下文章

初入AngularJS基础门

AngularJS ——ngResourceRESTful APIs 使用

浅谈AngularJS中的$parse和$eval

AngularJS

AngularJS入门学习笔记一

AngularJS的学习笔记