AngularJS之一基础学习

来源：互联网发布：2016天猫双11数据编辑：程序博客网时间：2024/05/19 03:27

前言：
angularJS以node为主的js页面的mvvm框架

四大特性：
1，mvc(很简单，model–view–controller)
2，模块化（将所有的执行函数，为了防止污染全局变量，把它加在angular对象下）
**3，指令系统（ng-controller等）
4，双向数据绑定(类似vue，观察者模式)**

往往在学习某种语言或者框架时，如果之前已经学习过类似的，便不需要再从文档一页一页开始看。先从小的demo来看看，结合官方文档（现在一般官方文档的质量都超高），angular到底是怎么用的。先知道怎么用，再学习为什么，这样效率更高一些，也会在学习原理的时候不会不知所云。
以下代码均可执行成功

directive自定义标签

<!doctype html><!--必须与后面的angular.module对应。若是后面没有，则不写值--><html ng-app="Directive"><!--necessary！！！！ng-app表示angular进入的入口，告诉angular，从这里开始掌管页面-->    <head><meta charset="utf-8"></head>    <body>        <hello>--这里的内容也不会显示，整个被替换--</hello>    </body>    <script src="js/angular.js"></script>    <script>        //这里为了方便读，将js与html合并。实际不要这样，影响效率    // 防止全局变量的污染，因此把方法挂在angular对象上。定义一个模块        var myModule = angular.module("Directive", []);//这里MyModule即是与ng-app的对应，表示获取这个页面        myModule.directive("hello", function() {//使用directive方法，自定义标签            return {//定义自定义标签的参数                restrict: 'E',                template: '<div><p>这里演示的是如何定义自己的标签，可以抽象出公共的部分，作为标签用在页面上</p><hr>即，directive方法，自定义标签</div>',                replace: true            }        });    </script></html>

数据绑定

<!doctype html><html ng-app="Module">    <head><meta charset="utf-8"></head>    <body>        <div ng-controller="greetingText">            <p>"{{}}"表示取值，在这里显示不出来，必须转义\{{}}}：--{{greeting.text}},Angular</p>        </div>    </body>    <script src="js/angular.js"></script>    <script>    //module层        var myModule = angular.module("Module", []);        //angular核心对象---"$scope"---controller层        myModule.controller("greetingText", ['$scope',//注入$scope对象。依赖注入            function HelloAngular($scope) {            //视图层view                $scope.greeting = {                    text: 'Hello'//手动设置greeting.text的值                };            }        ]);    </script></html>

demo总结

以上两个案例很清晰展示了，四种特性。
1，ng-app(表示angular的入口),ng-controller(控制器注册),ng-bind(当页面加载完成后再显示，防止当angular.js未加载完成时显示源代码)等指令系统。
2，模块化。每个var myModule = angular.module(“Module”, []);将ng-app的值的module挂在angular对象下，避免污染全局空间
3，mvc。{{}}view层，取出controller中设置的值（这个值就是module,数据模型）。即，所有的数据值都是属于module层，相当于一个数据结构。所有的逻辑处理都放在controller层。所有的样式，数据展示都放在view层。三层分离，类似于spring的面向切面编程，低耦合。
4，双向数据绑定。大多数mvc,mvvm框架均实现了双向数据绑定。利用观察者订阅模式。在第二个例子里，{{greeting.text}}与$scope.greeting中的text值形成绑定。前者为订阅者。

1 0