前端
一点也不简单

Angularjs学习小计

简介

参考地址:https://www.angularjs.net.cn/tutorial/1.html

CRUD应用:即指页面中存在数据增删查改的应用

Guice的方式 :用来做依赖注入的,通常有以下三种方式

  • 属性注入
  • 构造器注入
  • set方式注入
参考地址:https://www.cnblogs.com/huzi007/p/5798264.html

Angular模板()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div mg-controller="myCtrl">
        <!-- ng-model是angular里的数据双向绑定的指令,类似vue的v-model -->
        <input type="text" ng-model="foo" value="=bar">
        <!-- ng-click是angular的点击事件,类似vue的v-on:click -->
        <button ng-click="changeFoo()">按钮</button>
    </div>
</body>
<script src="XXXX.js"></script>
</html>

指令

简单点说,指令就是一些附加在HTML元素上的自定义标记(例如:属性,元素,或css类),它告诉AngularJS的HTML编译器($compile) 在元素上附加某些指定的行为,甚至操作DOM、改变DOM元素,以及它的各级子节点。

angular和vue一样都有内置指令,和自定义指令的方法,同vue里的v-on,v-model差不多

内置指令:ng-model,ng-bind,ng-app,ng-init,ng-controller

<body ng-app="myApp" ng-init="foo='双向绑定'"> <!--注意:他是一个指令,这个ng-app的位置不是固定的,取决于你要定义哪一块为angular应用,表示angular在body内运行,-->
    <div ng-controller="myCtrl"> <!--ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。-->
        <!-- 双方数据绑定ng-model,写法两种,如下,同vue一样数据双向绑定应用在表单元素上 -->
        <input type="text" ng-model="foo"><br>
        <input type="text" data-ng:model="foo"><br>
        <p>双向绑定的内容:{{ foo }}</p>
        <!-- 数据绑定ng-bind,如下,写法5种,同vue类似 -->
        <span ng-bind="name"></span><br>
        <span ng:bind="name"></span><br>
        <span ng_bind="name"></span><br>
        <span data-ng-bind="name"></span><br>
        <span x-ng-bind="name"></span><br>
    </div>
</body>
<script>
    let app = angular.module('myApp',[]);
    app.controller('myCtrl',($scope)=>{
        $scope.name = '老王'
    })
</script>

推荐使用-的形式

内置指令:ng-repeat

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令,HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 – 分割, runoob-directive

ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。好像vue的v-for

<body>
        <!-- ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。 -->
        <div ng-app="" ng-init="names=['Jani','Hege','Kai','kai'];objNames=[
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}]">
            <p>使用 ng-repeat 来循环数组</p>
            <ul>
                <li ng-repeat="x in names">
                {{ x }}
                </li>
            </ul>
            <p>使用ng-repeat来循环对象数组</p>
            <ul>
                <li ng-repeat="x in objNames">
                    {{ x.name + ', ' + x.country }}
                </li>
            </ul>
        </div>
</body>

自定义指令

更详细的可以参考:

https://www.jianshu.com/p/b37e16de6126 //解决了angularjs中文网的关于这块的bug问题
<body ng-app="myApp">
    <!-- 自定义指令有两种调用方式,虽然文档说有4种,但是后两种使用发现无效,而且从表现上看一个类名,一个注释,和原有的混淆,不推荐! -->
    <test-directive></test-directive>
    <div test-directive></div>
    <div class="test-directive"></div>
    <!-- directive: test-directive -->
</body>
<script>
    let app = angular.module('myApp',[]);
    app.directive('testDirective',()=>{//自定义指令的创建
        return {
            restrict : "A",//该属性为限制使用的意思,值为A意味着只能通过属性的方式来调用
            template:'<h1>自定义指令</h1>'
        }
    })
    // E 作为元素名使用
    // A 作为属性使用
    // C 作为类名使用
    // M 作为注释使用
</script>

自定义指令的独立作用域

一共有4种详细了解请参考

参考:https://www.cnblogs.com/xing901022/p/4291521.html
<body>
    <!-- 基于方法的绑定& -->
    <div ng-controller="myCtrl">
        <xingoo say="sayHello(name)"></xingoo>
        <xingoo say="sayNo(name)"></xingoo>
        <xingoo say="sayYes(name)"></xingoo>
    </div>
</body>
<script>
    let app = angular.module('myApp',[]);
    app.controller('myCtrl',($scope)=>{
        $scope.sayHello = function(name){
             console.log("hello !"+ name);
        };
        $scope.sayNo = function(name){
             console.log("no !"+ name);
        };
        $scope.sayYes = function(name){
            console.log("yes !"+ name);
        };
    })
    app.directive('xingoo',()=>{
        return {
            restrict:'AE',
            scope:{
                say:'&'//属性名:绑定类型
            },
            template:'<input type="text" ng-model="username"/><br>'+
                    '<button ng-click="say({name:username})">click</button><br>',
            repalce:true
        }
    })
</script>

创建一个操作dom的指令

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        Date format : <input ng-model="format"><hr>
        Current time is : <span my-current-time="format"></span>
    </div>
</body>
<script>
    let app = angular.module('myApp',[]);
    app.controller('myCtrl',($scope)=>{
        $scope.format = 'M/d/yy h:mm:ss a';//格式化时间
    })
    app.directive('myCurrentTime',['$interval', 'dateFilter', function($interval, dateFilter){
        function link(scope, element, attrs) {
            let format,
                timeoutId;

            function updateTime() {
                element.text(dateFilter(new Date(), format));
            }

            scope.$watch(attrs.myCurrentTime, function(value) {
                format = value;
                updateTime();
            });

            element.on('$destroy', function() {//销毁函数
                $interval.cancel(timeoutId);
            });

            // start the UI update process; save the timeoutId for canceling
            timeoutId = $interval(function() {
                updateTime(); // update DOM
            }, 1000);
        }
        return {
            link: link
        };
    }])
</script>

作用域(scope)

  • 是一个存储应用数据模型的对象
  • 为 表达式 提供了一个执行上下文
  • 作用域的层级结构对应于 DOM 树结构
  • 作用域可以监听 表达式 的变化并传播事件

作用域有什么?

作用域提供了 ($watch) 方法监听数据模型的变化

作用域提供了 ($apply) 方法把不是由Angular触发的数据模型的改变引入Angular的控制范围内(如控制器,服务,及Angular事件处理器等)

作用域提供了基于原型链继承其父作用域属性的机制,就算是嵌套于独立的应用组件中的作用域也可以访问共享的数据模型(这个涉及到指令间嵌套时作用域的几种模式)

作用域提供了 表达式 的执行环境,比如像 {{username}} 这个表达式,必须得是在一个拥有属性这个属性的作用域中执行才会有意义,也就是说,作用域中可能会像这样 scope.username 或是 $scope.username,至于有没有 $ 符号,看你是在哪里访问作用域了

一个基本的作用域

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        Your Name: <br>
        <input type="text" ng-model="username"><br>
        <button ng-click="sayHello()">greet</button>
        <p>{{ greeting }}</p>
    </div>
</body>
<script>
let app = angular.module("myApp",[]);
app.controller('myCtrl',($scope)=>{
    $scope.username='Word';
    $scope.sayHello=()=>{
        $scope.greeting = 'Hello ' + $scope.username + '!';
    }
})
</script>

上述例子说明了作用域的工作原理:

 1. 在MyController控制器中定义了username属性, 并在输入文本控件中绑定了该属性。username被初始化为’World’,这样作用域会通知文本框中并在文本框预填入初始值。

2. 同样控制器在作用域中定义了sayHello行为,并通过ng-click注册到按钮的点击事件。当用户在input中输入其他值时,会通过作用域更新username属性,从而改变sayHello的结果。

 {{greeting}}表达式的工作原理如下:

先找到{{greeting}}表达式所在DOM相关的作用域。在此例中为myCtrl中的$scope.

在作用域中找到greeting属性并替换{{greeting}}, 既而更新了视图。 scope及其属性提供了用来展现视图的数据。(原文: The scope is the single source-of-truth for all things view related.) 从测试的角度考虑, 视图与控制器分离是必要的, 这样我们就可以单独测试视图后面的行为而不用考虑视图的细节。

赞(0) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Angularjs学习小计

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏