angularjs

最新推荐文章于 2023-12-04 11:43:38 发布

Nan155

最新推荐文章于 2023-12-04 11:43:38 发布

阅读量312

点赞数 1

分类专栏： Angular.js 文章标签： angular angularjs 框架前端

本文链接：https://blog.csdn.net/qq_37591077/article/details/78348247

版权

Angular.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

angularjs

angularjs是什么？

一款非常优秀的前端高级JS框架
由谷歌团队负责开发维护

2.为什么学习angularjs？

帮助我们快速构建单页面应用
Angular自身有很多颠覆性的特性改变了前端的编码方式简化了我们的操作
火,就业需要

3.学习angularjs需要的知识储备

html
css
js

4.框架与库

<input type="text" id ="inp">

document.getElementById('inp').value;

$('#inp').val();

<input type="text" id="inp" ng-model="val">

无论是angularjs还是jQUey都是用原生JS封装的
库：
- 对代码进行封装调用封装的方法简化操作
框架：
- 虽然也是调用封装的方法
- 但是更多的框架会提供代码书写的规则
- 我们要按照规则去写代码框架会帮我们实现相应的功能
框架与库的区别
- 库只是调用封装的方法，框架会提供代码书写的规则

5.angularjs核心思想

其核心是通过指令扩展HTML，通过表达式绑定数据到HTML。
angularjs不推崇DOM操作，也就是在NG中几乎找不到任何的DOM操作
一切操作以数据为中心，用数据驱动DOM

6.框架版本说明

现在所学的angularjs框架的版本是1.6.x
angularjs框架09年诞生，专注PCweb，并没有考虑到移动端，在移动端性能较差。
所以angularjs团队决定重新开发一个框架于是乎angular2框架在16年诞生
angular2框架并不是angularjs框架的升级版,而是一个全新的框架,目前最新版本是4,中间没有3版本
16年vue和react在国内已经兴起,形成了angularjs,vue,react三足鼎立的局势
所以angular2占据的市场份额仍然比较小
企业里面用的比较多的仍然是angularjs框架
github中框架星星数量 2017年9月17日
- angularjs 57.1k angular 27.9k

7.获取angularjs的方式

在官网上下载
通过CDN的方式引入到页面中
<script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>

8.angularjs快速入门

原生js与angularjs开发的区别
- 原生js
插值表达式介绍
- {{}} 这种双括号的形式成为插值表达式
- 在表达式中可以写ng中的变量
- 可以显示字符串
- 可以在表达式中进行计算
- 可以在表达式中写三元运算符
- 执行angularjs函数

angularjs 指令

在angularjs中以ng-开头自定义属性
ng-app
- 页面加载完成angularjs会自动在页面中查找这个指令
- 告诉angularjs js在它页面中所要控制的范围
- 如果页面中没有这个指令，angularjs将不会启动
- 告诉angularjs当前页面由哪一个模块来管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body ng-app="myApp">
    <div class="sideBar" ng-controller="sideBarCtrl">
        <input type="text" ng-model="val">
        <div>{{ msg }}</div>
        <button ng-click="clickFn()">点我啊</button>
    </div>
    <div class="main" ng-controller="mainCtrl">{{ msg }}</div>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        /*
           当我们在页面中引入了angular.js文件之后，在全局环境下就有了一个叫angular的对象

           创建模块的语法“
              angular.module("模块的名字",["依赖模块的名字1"，"依赖模块的名字2"])
              如果当前模块没有依赖模块，第二个参数要写一个空数组
            创建控制器的语法：
                模块对象.controller("控制器的名字",function(){})
         */
        //myApp变量是反馈的模块对象，"myApp"字符串是模块名字
        angular.module("myApp",[])
            .controller("sideBarCtrl",["$scope",function($scope){
                //$scope 对象 专门向控制器控制的区域暴露数据
                $scope.val = "我是控制器赋的初始值";
                $scope.msg = "我是msg";
                $scope.clickFn = function(){
                    alert("我要点点点点点")
                }
            }])
            .controller("mainCtrl",["$scope",function($scope){
                $scope.msg = "这是main中的msg"
            }])


    </script>
</body>
</html>

ng-init=”变量名=变量值;变量名=变量值” 给变量赋初始值

<body ng-app ng-init="val='我是初始值'">
    <input type="text" ng-model="val">
    <div>{{ val }}</div>
    <div>{{ 'angularjs' }}</div>
    <div>{{ 1 + 1 + 'a' }}</div>
    <div>{{ 1 == 1 ? '相等' : '不相等' }}</div>
    <script src="node_modules/angular/angular.min.js"></script>
</body>

ng-click
- 函数调用
- angularjs代码不能写原生js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<!-- ng-app="模块的名字" -->
<body ng-app="myApp">
    <!--
        ng-controller="控制器的名字"
    -->
    <div class="sideBar" ng-controller="sideBarCtrl">
        <input type="text" ng-model="val">
        <div> {{ msg }} </div>
        <button ng-click="clickFn()">点我啊</button>
    </div>
    <div class="main" ng-controller="mainCtrl">{{msg}}</div>
    <script src="node_modules/angular/angular.min.js"></script>
    <script>
        /*
            当我们在页面中引入了angular.js文件之后 在全局环境下就有了一个叫angular的对象

            创建模块的语法:
                angular.module('模块的名字',['依赖模块的名字1','依赖模块的名字2'])

                如果当前模块没有依赖模块 第二个参数要写一个空数组

            创建控制器的语法:
                模块对象.controller('控制器的名字',function(){
                })
         */
         // myApp变量是反馈的模块对象 "myApp"字符串是模块名字
        var myApp = angular.module("myApp",[]);

        myApp.controller('sideBarCtrl',function($scope){
            // $scope 对象 专门向控制器控制的区域暴露数据
            $scope.val = "我是控制器赋的初始值";
            $scope.msg = "我是msg";
            $scope.clickFn = function(){
                alert('讨厌的家伙 不要点了')
            }

        })

        myApp.controller('mainCtrl',function($scope){
            $scope.msg = "我是mainCtrl中的msg"
        })
    </script>
</body>
</html>

ng-model 是实现双向数据绑定的的必要条件获取表单元素的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="demoCtrl">
    <input type="text" ng-model="val">
    <div>{{val}}</div>
    <!-- js=>html -->
    <button ng-click="setValue()">设置值</button>
    <!-- html=>js -->
    <button ng-click="getValue()">获取值</button>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        var myApp = angular.module('myApp',[]);
        myApp.controller('demoCtrl',function($scope){
            $scope.val = "我是初始值";

            $scope.setValue = function(){
                $scope.val = "我是通过按钮点击设置的值";
            }
            $scope.getValue = function(){
                alert($scope.val)
            }
        })
    </script>
</body>
</html>

ng-repeat=”item in arr” 循环数据（数组）生成DOM
- item 变量每次循环的循环项
- in 固定语法
- arr 数据
- $index 当前循环索引
- $first 当前循环是否是第一次循环

<body ng-app='myApp' ng-contrloller='demoCtrl'>
<script>
        angular.module('myApp',[])
        .controller('demoCtrl',['$scope',function($scope){
            $scope.persons = [
                {
                    name:'lily',
                    hobb
                }
            ]
        }])
</script>
</body>

ng-repeat=”item in arr track by $index" 在循环中不允许有重复项，使用track by$ index 解决这个问题
ng-class=”{‘active’:布尔值}” 专门用了添加和删除类名用的，true添加类名，false不添加类名
+angularjs规定当一个类名需要动态添加删除的时候，不要直接使用class属性添加类名
双括号现象
- ng-bind=”数据” 数据绑定解决双括号现象
- ng-bind-template=”{{数据1}}{{数据2}}”
- ng-cloak 当angularjs解析完数据以后会移除ng-cloak指令
原样显示{{}}
- ng-non-bindable 当元素身上有这个指令，那么angularjs就不会解析这个元素内部的代码了
ng-show=”布尔值” 显示和隐藏元素
ng-hide=”布尔值” 显示和隐藏元素
ng-if=”布尔值” 是通过DOM节点增加删除的方式来达到显示和隐藏
ng-switch ng-switch-when 匹配上显示，匹配不上隐藏
ng-options=”item.name for item in balls” 用来循环下拉列表，写在select标签上
- item.name for 是固定语法，angularjs会将name字段对应的值显示在options标签内部
ng-options=”item.value as item.name for item in balls” 用来循环下拉列表，写在select标签上
- item.value as as是固定语法，angularjs会将name字段对应的值显示在options标签的value属性上
事件指令
- 原生js中的事件angularjs中都有
  - onclick => ng-click
  - onmouseenter => ng-mouseenter
  - ng-dblclick 双击事件
- ng-href 当数据解析完毕后，生成正确的href属性
- ng-src 当数据解析完毕后，生成正确的src属性
angularjs 中请求数据的方式
- $http({
  url:”./test.json”, 请求方式
  method:”post”, 请求方式
  params:{a:1,b:2}, get传参方式
  data:{c:2,d:4}, post传参方式
  }).then(function(){})
- ng-bind-html
jqLite
- angularjs 给我们提供了一个jquery精简版叫jqLite
- angularjs会将控制器的回调函数当做构造器去new，我们只需要拿到new出来的对象就能得到对象下面的数据了
angularjs补充指令
- $watch 监听的数据的变化只要数据有变化，就会执行回调函数
  - 1.要监听的数据
  - 2.回调函数
- scope. watch(“val”,function(newValue,oldValue){})
  - newValue 输入的最新值
  - oldValue 上一次输入的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="inp">
    <button id="btn">+1</button>
    <script>

        /*
            1.获取文本框和按钮
            2.给按钮添加点击事件
            3.获取文本框的值 并且+1
            4.将计算好的值重新赋值给文本框

         */
         var oInp = document.getElementById('inp');
         var oBtn = document.getElementById('btn');

         oBtn.onclick = function(){
            // "1"
            oInp.value = (oInp.value - 0) + 1;

         }

    </script>
</body>
</html>

angularjs的应用

angularjs在页面加载完成以后会在页面中去找有没有一个ng-app属性，如果没有什么事都不干，如果找到了angularjs会去执行ng-app包裹的代码（ng-app可以添加在body上，相当于入口函数）

9.angularjs模块化开发

模块化开发带来的好处
- 方便管理，复用，后期维护方便
- 解决代码冲突，方便多人写作开发
分析模块和控制器与页面之间的关系
需要做的
- 1.创建模块
  - 当我们在页面中引入了angular.js文件之后，在全局环境下就有了一个叫angular的对象
  - 语法：
    angular.module(‘模块的名字’,[‘依赖模块的名字1’,’依赖模块的名字1’])
    如果当前模块没有依赖模块，第二个参数要写一个空数组
    加第二个参数是创建模块
    不加第二个参数是获取模块
- 2.告诉angularjs用我创建的模块去管理页面
- 3.创建控制器的语法：
  模块对象.conrroller(‘控制器的名字’,function(){})
模块依赖
- 主模块依赖了其他模块，就相当于拥有了其他模块的功能
模块依赖的步骤
- 1.将要依赖的模块引入的页面中
- 2.将要依赖的模块的名字写在主模块的第二个参数中
为什么做模块的依赖？
- 因为要使用其他模块的功能
报错信息分析
- Module ‘myApp’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
- ‘myApp’ 这个模块是不可获取的！你要么拼写错误要么忘了加在他你要确保一个有效的模块做为了第二个参数的依赖

<!-- ng-app="模块的名字" -->
<body ng-app="myApp">
    <!-- ng-controller="控制器的名字" -->
    <div class="sideBar" ng-controller="sideBarCtrl"></div>
    <div class="main" ng-controller="mainCtrl">
    <script>
        var myApp = angular.modul("myApp",[]);


        myApp.controller('sideBarCtrl'，function($scope){
            aler('1')
        });
        myApp.controller('mainCtrl'，function(){
            aler('2')
        })
    </script>
</body>

<!-- ng-app="模块的名字" -->
<body ng-app="myApp">
    <!-- ng-controller="控制器的名字" -->
    <div class="sideBar" ng-controller="sideBarCtrl">
        <input type="text" ng-model="val">
        <div> {{ msg }} </div>
        <button ng-click="clickFn()">点我啊</button>
    </div>
    <div class="main" ng-controller="mainCtrl">{{msg}}</div>
    <script src="node_modules/angular/angular.min.js"></script>
    </div>
    <div class="main" ng-controller="mainCtrl"></div>
    <script>
        var myApp = angular.modul("myApp",[]);

        //myApp变量是反馈的模块对象 "myApp"字符串是模块名字
        //console.log(angular.module('myApp')==myApp);
        //angularjs会监听文本框的值改变事件，当时间发生的时候angularjs会获取文本框中最新的值，将最新的值赋值给右侧的变量，当右侧的变量发生变化的时候angularjs会去页面中找哪些地方使用了这个变量，将这个变量更新成最新的值；
        /*这个形象就叫做双向数据绑定
        双向：两个方向 html js
            html => js
            js => html
        */
        /*
        ng-model是实现双向数据绑定的必要条件
        ng-model获取表单元素的值
        */

        myApp.controller('sideBarCtrl'，function($scope){
            //$scope 对象 专门想控制器控制的区域暴露数据
            $scope.val = "我是控制器赋的初始值";
            $scope.msg = "我是msg";
            $scope.clickFn = function(){
                alert('点你了，怎么地吧')
            }
        });
        myApp.controller('mainCtrl'，function($scope){
            $scope.msg = "我是mainCtrl中的msg"
        })
    </script>
</body>

10.路由

路由主要用来判断用户访问的是什么页面
路由主要用来配置锚点值与页面的对应关系
配置路由的语法：
- 模块对象.config(function($routeProvider){
})
- $routeProvider 配置路由的对象；
  - $routeProvider.when(‘锚点值’，{
    templaterURL：”锚点地址”
    })
    *angularjs要求我们，锚点值必须以/开头
    +如果没有找到匹配的路由跳转到首页
  - otherwise
路由传参的步骤
- 1.在被传参的路由中配置参数占位符；
- 2.在链接中配置真正的实参
- 3.在被传递参数页面获取传递过来的参数；
单页面传参方式
- 传统
- 现在
  - 1.在详情页面的路由中
  - 2.在列表页面的文章

11.angularjs 作用域

局部作用域
+angularjs中控制器控制的区域就是一个局部作用域
全局作用域
- $rootScope 全局作用域

自定义指令

作用：
- 增强html标签的功能
- 自定义html标签
  - 在原生js中可以将将公共的代码封装成函数
  - 在angularjs中可以将公共的html结构封装成自定义标签
- 操作DOM
  - 在angularjs中，页面中的DOM与数据是有对应关系的
  - 对数据做增删操作，页面中的DOM会自动增加删除
  - DOM的增删是由angularjs通过指令完成的，比如ng-repeat，ng-if，ng-switch
  - 如果开发人员要对页面中的DOM做额外的操作需要等待angularjs的操作完成以后进行
  - 但开发人员不知道angularjs的操作什么时候完成的
  - 不过angularjs自己是知道的
  - 所以angularjs推荐开发人员也通过指令进行DOM操作
  - 当内部提供的指令执行完成以后，它会去调用开发人员定义的指令
  - 这样就达到了在angularjs操作完DOM以后开发人员再去操作DOM的目的
预览时在源代码中如何只显示模板中的自定义属性，删除html中的自定义标签：replace：true
自定义标签（在angularjs中也叫指令）
- 模块对象.directive(“指令的名字”,[function(){
  return {
  template:”” //为自定义模块添加html模板
  }
  }])
注意点：
html => app-hello（）
js => appHello
```
html => hello
js => hello
```
transcludetrue
angularjs会将标签内部的内容保存在一个指令当中
ng-transclude：true

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body ng-app="myApp">
    <app-hello></app-hello>
    <div app-hello="blue"></div>
    <div class="app-hello"></div>
    <div class="app-hello"></div>
    <!-- directive:app-hello -->
    <script src="../node_modules/angular/angular.js"></script>
    <script>
    /*
        在angularjs中指令是有类型的默认支持标签指令和属性指令
        E element       标签指令 （封装一些公用的html结构时使用）
        A attributes    属性指令 (操作dom)
        C class         类名指令
        M comment       注释指令
     */
        var app = angular.module("myApp",[]);
        app.directive("appHello",[function(){
            return {
                restrict:"AECM", //规定指令能够使用的方法
                templateUrl:"helloTpl",
                replace:true

            }
        }])
    </script>
    <script type="text/ng-template" id="helloTpl">
        <button type="">按钮</button>
    </script>
</body>
</html>

指令的配置参数介绍
- restrict规定自定义指令能够使用的方式
  - 属性指令 A attribute
  - 元素指令 E element
  - 样式指令 C class
  - 注释指令 M comment
  - 默认值是：’AE’
- template和templateUrl使用方法
  - template 模板字符串
  - templateUrl 定义angular模板
- link函数的作用及参数说明
  - 作用：angularjs提供给我们写DOM操作的
  - 有三个参数 scope element attributes
  - scope:类似于$scope 作用范围不同只针对当前指令生效
  - element：当前指令所在的元素
  - attribute：当前指令所在元素的属性结合对象类型
- replace的作用
  - 将当前指令所在的标签删除掉
  - 布尔值型的值默认是false
- transclude的作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="demoCtrl">
    <app-hello>自定义标签</app-hello>
    <div my-dir="blue" title="123" efg="456">DIV</div>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.directive("appHello",[function(){
            return {
                transclude:true,
                templateUrl:"helloTpl",
                replace:true,
                link:function(scope,element,attributes){
                    //element:指令所在的元素
                    //console.log(element);//jquery-link对象

                    //console.log(attributes);//attributes指令所在元素身上的属性的集合

                    element.css("background",attributes.myDir)


                }
            }
        }])
    </script>
    <script type="text/ng-template" id="helloTpl">
        <span><b></b></span>
    </script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body ng-app="myApp">
    <app-hello></app-hello>
    <div app-hello="blue"></div>
    <div class="app-hello"></div>
    <div class="app-hello"></div>
    <!-- directive:app-hello -->
    <script src="../node_modules/angular/angular.js"></script>
    <script>
    /*
        在angularjs中指令是有类型的默认支持标签指令和属性指令
        E element       标签指令 （封装一些公用的html结构时使用）
        A attributes    属性指令 (操作dom)
        C class         类名指令
        M comment       注释指令
     */
        var app = angular.module("myApp",[]);
        app.directive("appHello",[function(){
            return {
                restrict:"AECM", //规定指令能够使用的方法
                templateUrl:"helloTpl",
                replace:true

            }
        }])
    </script>
    <script type="text/ng-template" id="helloTpl">
        <button type="">按钮</button>
    </script>
</body>
</html>

自定义两个相同的按钮
- 取值：attributes.自定义属性
- angularjs中控制器可以产生作用域
  - $rootScope全局作用域
  - $scope 局部作用域
- angularjs中指令可以产生作用域，默认情况下，指令没有单独作用域
  - scope:false 指令没有单独作用域，并且会继承父级作用域
    - 此时的scope是父级的scope
  - scope：true 指令有单独作用域，并且会继承父级作用域
  - scope：{}（对象），指令有单独作用域，不会继承父级作用域
  - @ 去指令所在的元素身上找有没有一个叫msg的同名属性，如果有，将同名属性的值赋值给当前指令内部的msg
    - 把数组当成字符串来循环，因其有重复字符，所以报错
      -通过 @ 取到的数据，无论你看到它像什么类型都是字符串（angularjs取到的值都是字符串？）
  - = 去指令所在的元素身上找有没有一个叫person的同名属性，如果有，将同名属性的值赋值给当前指令内部的person
    - 通过 = 取到的数据该是什么类型就是什么类型
swiper （轮播图的插件）
- 作用：制作轮播图
- 用法
  - get start ——> 下载
    - 引用css、js
    - 添加html结构（html layouz）
    - 插件调用时间点
      - 判断最后一次循环
        
        scope.$last(判断条件)
        *
      - ng-repeat-after=”swiper()”当ng-repeat执行完成以后调用swiper()函数
        
        ng-repeat是个很特殊的指令，每次循环都有自己独立的作用域

angularjs过滤器

我们从后台请求的数据有时候不是我们想要的格式
- 比如货币数字从后台获取过来就是一堆纯数字
- 但是货币数字通常是按照规则用逗号分开并且数字前面有标识当前是哪种货币
过滤器的概念
- angularjs为我们提供的处理数据格式的方式
过滤器的作用
- 将数据格式化我们想要的格式
过滤器的分类
- 内置过滤器
- 自定义过滤器
过滤器的语法
- {{ 数据 | 过滤器的名字：参数1：参数2}}
- 多个过滤器用冒号隔开
内置过滤器的介绍
- currency 货币过滤器
- date 日期过滤器
- filter 过滤数据
  - 模糊匹配：angularjs会去每一条数据中的每一个字段中去查找有没有包含过滤条件的数据
  - 精确匹配：angularjs会去每一条数据中的指定字段中去查找有没有包含过滤条件的数据
- limitTo 限制过滤器
- orderBy 排序默认是升序
  - orderBy:”字段” 默认升序
  - orderBy:”-字段” 降序
- number：2 对数字进行格式分隔，且保留2位小数
- uppercase 大写 lowercase小写
- json
  *
  作用：源代码怎么写在页面中就怎么写
自定义过滤器：
- angularjs自身只是提供了一些常用的过滤器，在实际项目中，我们往往会遇到一些比较具体的需求，比如电话号码中间加*、单词首写字母大写等等比较个性化的数据格式需求
- 模块对象.filter(“过滤器的名字”,[function(){
  return function(value，arg1，arg2){
  //value就是要处理的数据
  //处理完的数据一定要return出去，否则页面什么也不显示，return什么页面显示什么
  //arg1，arg2从匿名函数第二个参数起依次传递过来的参数
  return 处理后的数据
  }
  }])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularjs demo</title>
</head>
<body ng-app="myApp" ng-controller="demoCtrl">

    <!--
        {{ 数据 | 过滤器的名字:参数1:参数2 }}

        currency 货币过滤器

        date 日期过滤器

        filter 过滤数据

            模糊匹配：angularjs会去每一条数据中的每一个字段中去查找 有没有包含过滤条件的数据

            精确匹配：angularjs会去每一条数据中的指定字段中去查找 有没有包含过滤条件的数据

        limitTo  限制过滤器

        orderBy 排序 默认是升序

            orderBy:'age'  按照年龄升序
            orderBy:'-age' 按照年龄降序

    -->

    <p>{{ money | currency:'¥' }}</p>

    <p>{{ time | date:'yyyy年MM月dd日 HH时mm分ss秒' }}</p>

    <ul>
        <li ng-repeat="item in persons | filter:'孙悟空' ">
            {{ item.name }} {{ item.age }}
        </li>
    </ul>

    <ul>
        <li ng-repeat="item in persons | filter:{ name : '猪八戒' } ">
            {{ item.name }} {{ item.age }}
        </li>
    </ul>

    <p> {{ word | limitTo:2:2 }} </p>
    <p> {{ word | limitTo:-2 }} </p>

    <ul>
        <li ng-repeat="item in persons | limitTo:-2">
            {{ item.name }} {{ item.age }}
        </li>
    </ul>

    <ul>
        <li ng-repeat="item in persons | orderBy:'-age' ">
            {{ item.name }} {{ item.age }}
        </li>
    </ul>
    <p>{{num | number:2}}</p>

    <p>{{str | uppercase}} </p> <!-- lowercase -->

    <p>
        <pre>{{persons | json}}</pre>
    </p>

    <pre>
        sdfdsfdsf
        sdfsd          fsdf

        sdfdsfdsf
        sdfs
        sdf
        sdf
        sdf
        sdf
        sfd
    </pre>

    <script src="node_modules/angular/angular.js"></script>
    <script>
        angular.module('myApp',[])

            .controller('demoCtrl',['$scope',function($scope){

                $scope.money = 998;

                $scope.time = new Date();

                $scope.persons = [
                    {
                        name:'1孙悟空2',
                        age : 500
                    },
                    {
                        name:'1猪八戒2',
                        age:250
                    },
                    {
                        name:'沙僧',
                        age:300
                    },
                    {
                        name:'唐僧',
                        age:100
                    }
                ];

                $scope.word = "我是好人";

                $scope.num = 1234567890987654;

                $scope.str = "angular";


            }])
    </script>
</body>
</html>

angularjs中自定义服务的基本使用

作用
- 抽象公共代码
- 在多个控制器之间共享数据
语法
- ”angular.module(‘myService’,[]).service(‘serviceName’,[function(){}]”
- 服务也是模块下的方法，要创建服务，先创建模块
- 在模块对象下面有一个service方法
- 第一个参数是服务名称
- 第二个参数以数组的形式存在，和控制器的使用方法一样
使用
- 将服务对应的js文件在页面中用script标签引入
- 将服务模块作为主模块的依赖模块
- 在需要使用的控制器中将服务作为控制器回调函数的形参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularjs demo</title>
</head>
<body ng-app="myApp" ng-controller="demoCtrl">
    {{ tel | telstar }}

    {{ word | firstLetter:'a':'b' }}
    <script src="node_modules/angular/angular.js"></script>
    <script>

        /*
            模块对象.filter('过滤器的名字',[function(){
                return function(value,arg1,arg2){
                    // value就是要处理的数据

                    // 处理完的数据一定要return出去

                    // 从匿名函数的第二个参数起 就是依次传递进来的参数
                }
            }])

         */

        angular.module('myApp',[])

            .filter('telstar',[function(){

                return function(value){

                    return value.substr(0,3) + "****" + value.substr(7);

                }

            }])

            .filter('firstLetter',[function(){

                return function(value,arg1,arg2){

                    console.log(arg1)
                    console.log(arg2)

                    return value.substr(0,1).toUpperCase() + value.substr(1);

                }

            }])

            .controller('demoCtrl',['$scope',function($scope){

                $scope.tel = "18578573657";

                $scope.word = "angular";

            }])
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularjs demo</title>
</head>
<body ng-app="myApp" ng-controller="demoCtrl">
    <div my-dir></div>
    <script src="node_modules/angular/angular.js"></script>
    <script>
        /*
            当你只想要一个写DOM操作的地方,其他参数我只要默认值
        */
        angular.module('myApp',[])

            .directive('myDir',[function(){

                return function(scope,element,attributes){
                    alert(1)
                }

            }])

            .controller('demoCtrl',['$scope',function($scope){

            }])
    </script>
</body>
</html>

angular.module("myService",[])
    /* angular会帮我们new这个函数 */
    .service("serviceName",[function(){
        this.name = "服务里面的数据"
    }])

ui.router 的基本使用

MVC思想

核心：代码分类
是后端的一种思想
M model 模型操作数据库的相关代码 —-》对应前端ajax
V view 视图用户界面
C controller 控制器业务逻辑
在angularjs中，一般将服务作为MVC中M层
逻辑
- 界面逻辑
  - 跟用户界面相关的逻辑都叫界面逻辑
- 业务逻辑
  - 跟数据相关的逻辑叫业务逻辑
请求过多，降低加载速度

Nan155

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
angularjs

angularjsangularjs是什么？一款非常优秀的前端高级JS框架由谷歌团队负责开发维护2.为什么学习angularjs？帮助我们快速构建单页面应用Angular自身有很多颠覆性的特性改变了前端的编码方式简化了我们的操作火,就业需要3.学习angularjs需要的知识储备htmlcssjs4.框架与库<input type="text" id ="inp">docu
复制链接

扫一扫