发表于: 2021-10-20 23:54:24

0 830


angular的核心思想是什么?怎么体现在代码里?

它是谷歌公司动态web应用设计的一个js框架,是为了克服html在构建应用上的不足而设计的

AngularJS的四个核心思想

1)MVC

2)依赖注入

3)模块化

4)双向绑定

 

一.MVC

 

1.M代表model,对应的是数据库

2.V代表view,视图,对应的是html页面

3.C代表controller,控制器,处理用户交互的部分

eg:

<body ng-app="hh">

    <div ng-controller="yy"> <!--这个div就是v-->

        <input type="text" ng-model="msg"> <!--当添加一个input标签时,用ng-model也能获取到msg信息-->

        <h1>{{msg}}</h1>

    </div>

    <script src="../js6/min/angular.js"></script>

    <script>

        angular.module("hh", [])  //首先用module创建了一个angular的模块,那么这个模块里面每一个controller就是一个简单最小化的MVC

        .controller("yy", function ($scope) {   //其中yy就是controller,就是mvc的c;$scope里面就是模型,就是m

            $scope.msg = "lalala";   //通过双向绑定,把model绑定到view上面

        })

    </script>

</body>

通过上面的代码可以看到

首先用module创建了一个angular的模块,那么这个模块里面每一个controller就是一个简单最小化的MVC

其中yy就是controller,就是mvc的c;$scope里面就是模型,就是m

通过双向绑定,把model绑定到view上面

例子中的div就是v

 

 

二.依赖注入

wiki上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分

AngularJS的依赖注入只是简单的获取它所需要的东西,而不需要创建那些他们所依赖的东西

有一些核心组件来作为依赖注入:value,constant,factory,service

eg:

.value(“名字”,”赋予名字的值”) —>value的值是可以改变的

.constant(“名字”,”赋予名字的值”)—>constant的值不可以改变,这个可以用作以后服务器的网址

.factory(“data”,function(){

})

.service("user",function(){

})

eg:

html代码:

<body ng-app="app">

<div ng-controller="ctrl">

<h1 ng-bind="msg"></h1>

<h1 ng-bind="name"></h1>

<h1 ng-bind="http"></h1>

<h1 ng-bind="data.msg"></h1>

<h1 ng-bind="user.getName()"></h1>

</div>

<script src="../js6/min/angular.js"></script>

<script src="./angular5.js"></script>

</body>

JS代码:

angular.module("app",[])

.value("name","hh")

.value("name","yy") //-->value的值是可以改变的

.constant("http","www.xxx.com") //-->constant的值不可以改变,即是有多个也以第一个为准

.factory("data",function(){

    return{

        msg:"are you ok",

        setMsg:function(){

            this.msg="ok"

        }

    }

})

.service("user",function(){

    this.fistname="scofield";

    this.lastname=" he";

    this.getName=function(){

        return this.fistname+this.lastname;

    }

})

.controller("ctrl",function($scope,name,http,data,user){  //—>controller中使用services

    $scope.msg="hello";

    $scope.name=name;

    $scope.http=http;

    $scope.data=data;

    data.setMsg();

    $scope.user=user;

})

三.模块化

高内聚低耦合

官方提供的模块:ng、ngRoute、ngAnimate、ngTouch

自定义的模块:angular.module('模块名',[ ])

 

 

四.双向绑定

AngularJS中只需要将DOM中的元素与js的某个属性绑定,js属性值变化会同步到DOM元素上,同样的,DOM元素值得变化也会映射到js的属性上。

 




返回列表 返回列表
评论

    分享到