angularjs1.x基础认识

最新推荐文章于 2023-03-08 17:48:23 发布

饮冰十年

最新推荐文章于 2023-03-08 17:48:23 发布

阅读量358

点赞数

分类专栏： angularJs

本文链接：https://blog.csdn.net/weixin_39654784/article/details/78295110

版权

angularJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前段的框架很多，闲暇之余总结点angularjs，希望能大家学习有点帮助。

对于大家的疑惑何时用angularjs？，她的可爱之处在何处？，以及她的缺点？

相信大家了解清楚了以上三点，对于angularjs已经有了初步的认识，好了，下面就进入正题：

第一点：什么是angularjs

angularjs为了克服HTML在构建应用上的不足而设计的。

其核心：mvvm,模块化、自动化双向数据绑定，语义化的标签、依赖注入；

其对html是不友好的。对java友好，其底层代码是有java编写的；

angularjs通过使用了directive（指令|模块|组件）的结构，让浏览器能够识别新的语法，其优点：

1.使用插值表达式进行数据绑定；

2.使用DOM控制结构来实现迭代或隐藏DOM片段；

3.支持表单及表单交互；

4.能将html代码分组重复可用的组件

简单点将：业务模块复用；维护性能；高测试型；

实用在：后台管理系统的软件开发

这就是一个angualrjs1.x（自动启动）

<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-controller="oneCtrl">
{{msg}}
</body>
</html>
<script src="angular.js"></script>
<script>
    (function () {
      angular.module("demo",[])
          .controller("oneCtrl",function ($scope) {
              $scope.msg="hell angularjs"
          })
    })()
</script>

手动启动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box" ng-controller="oneCtrl">{{msg}}</div>
</body>
</html>
<script src="angular.js"></script>
<script>
    (function () {
      angular.module("demo",[])
          .controller("oneCtrl",function ($scope) {
              $scope.msg="hello angularjs"
          });
        angular.bootstrap(document.querySelector(".box"),["demo"])
    })()
</script>

建议使用下一种写法使用控制器：

 .controller("twoCtrl",["$scope",function (参数p) {
              p.msg="hello angularjs"
        }])

第二点：什么是ng-app

ng-app 定义了一个angular模块，每一模块只有一个$rootScope,只有一个$injector,但可以有多个$scope;

第三点：什么是$scope

1.$scope是view与controller之间的传值的桥梁；

2.$scope是实现mvc,mvvm的关键类；

扩展：

什么是mvc:

m:模型（model）数据保存；

v:视图(view):用户界面；

c:控制器（controller）:业务逻辑

什么是mvvm:

m:模型（model）数据保存；

v:视图(view):用户界面；

vm:视图模型(viewModel)

什么是mvp:

m:模型（model）数据保存；

v:视图(view):用户界面；

p:Presenter

3.$scope中爆款包括ditychecking(脏值检查)机制（$scope.$apply,$scope.$digest,$scope.$watch）；

拓展：如何触发脏值检查：

  setInterval(function () {
          $scope.$apply(function () {
              $scope.time=new Date().toLocaleTimeString()
          })
      },1000)

4.$scope是一个相对于当前控制器的viewmodel,所以view的属性和方法，只能放在$scope下面；

5.$scope是由$rootScope派生出得；

6.$scope的作用范围仅限于当前控制器内部；

7.$scope具备继承性，ng-controller出现包含的关系

第四点：什么是依赖注入(DI)

dependenny injection:作用：解耦

两个类之间的互相调用时；A类中需要引用B类的方法的时候，B这个类的实例不要在A中实例化，在A的构造方法中申明需要引用的类名，由$injector来自动把B类的实例注入到A中；

第五点：angularjs的四大块和两小件

四大件：路由（router）

指令(directive)

控制器(controller)

服务(service)

两小件：$scope;

$http;

第六点：服务层的创建三种方式：provider factory service

1.provider创建服务，provider中的方法需要通过对象的方式对外暴露接this.$get

2.factory创建服务：factory不再需要this.$get；

3.service创建服务 service 对外的接口，直接用this

栗子:

angular.module("demo",[])
            .provider("oneProvider",function () {//
                this.$get = function () {
                    var getmore = function () {
                        return "hello more"
                    }
                    return {
                        getWord:getmore
                    }
                }

            })
            .factory("oneFactory",function () {
                var getmore = function () {
                    return "hello more"
                }
                return {
                    getWord:getmore
                }
            })
            .service("oneService",function () {
                this.getmore = function () {
                    return "hello more"
                }
            })

第七点：ng-repeat(循环)

栗子一

angular代码：

(function () {
        angular.module("demo",[])
            .controller("two",function ($scope) {
                $scope.list=[
                    {"ttlie":"html5"},
                    {"ttlie":"vue"},
                    {"ttlie":"angular"},
                    {"ttlie":"reat"},
                ]
            } )
    })()

html代码

<ul>
    <li ng-repeat="n in list">{{$index}}-{{n.title}}</li>
</ul>

栗子二：

<div ng-repeat="n in [42, 42, 43, 43] track by $index"> //运行重复的数据出现
    {{n}}
</div>

第七点：filter过滤

<pre>{{jsons | json}}</pre>
<h1>{{msg | test}}</h1>
<script src="libs/angular.js">
</script>
<script>
    (function () {
        angular.module("demo",[])
            .controller("one",function ($scope) {
                $scope.jsons = [
                    {"title":"html5"},
                    {"title":"angular"},
                    {"title":"react"},
                    {"title":"vue"}
                ];
                $scope.msg = "hello"
            })
            .filter("test",function () {
                return function (val) {
                    return val.toUpperCase()
                }
            })
    })()
</script>

第八点： directive

创建自定义指令是非常容易的。指令可以测试、维护并且在多个项目中复用。

<hello title="这是一个标题"></hello>
<script src="libs/angular.js">
</script>
<script>
    (function () {
        angular.module("demo",[])
            .directive("hello",function () {
                return {
                   template:"<div><h1>Hello directive</h1></div>"
                    templateUrl:"assets/hello.html",
                    replace:true,
                    //transclude:true,template中的内容不会替换标签内的内容
                    // ng-transclude
                    transclude:true,
                    link:function (scope,element,attr,ctrls) {
				       console.log(element.length);  //1
               console.log(element);         //2
               console.log(element[0]);      //3
               console.log(element[0].firstChild);  //4
               console.log(element.children("div"));  //5
               console.log(element.children("div")[0]);   //6
               console.log(element[0].getElementsByClassName("a"));  //7
               element[0].getElementsByClassName("a")[0].style.backgroundColor="black";
               element[0].firstChild.style.backgroundColor="red"; }, compile:function () { return { pre:function (scope,element,attr,ctrls) { //scope: vm template->link scope.msg = " hello link msg"; scope.show = function () { alert(1); } //element: jqLite[""] element[0].style.backgroundColor='red'; //attr用来获取自定义组件上自定义属性的值:
 props scope.title = attr.title }, //post-link post:function (scope,element,attr,ctrls) { //scope: vm template->link scope.msg = " hello link msg"; scope.show = function () { alert(1); } //element: jqLite[""] element[0].style.backgroundColor='green'; //attr用来获取自定义组件上自定义属性的值:
 props scope.title = attr.title + "---post" } } } } }) })()



第九点：$http(其相当于原生的ajax请求)


(function () {
        angular.module("demo",[])
            .controller("one",function ($scope,$http) {

                //$http类不能在controller内部用
                $http({
                    method:"GET",//get post jsonp
                    url:"assets/data.json"
                }).then(function (data) {
                    console.log(data.data);
                })
                
            })
    })()