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

发布时间:2019-06-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ANGULAR的核心思想是什么?怎么体现在代码里?脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

这里是修真院前端小课堂,每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能,本篇分享的是:

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

大家好,我是 IT 修真院上海分院第八期的学员何岳,一枚正直纯洁善良的web程序员

今天给大家分享一下,修真院官网 JS任务七,深度思考中的知识点——ANGULAR的核心思想是什么?怎么体现在代码里?

1. 背景介绍

 

AngularJS是什么?

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

2. 知识剖析

 

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的属性上。

 

3. 常见的问题

AngularJS的优点

 

4. 解决方案

 

可以通过核心思想中的依赖注入和双向绑定,不需要写大量的代码实现复杂的功能

可以不需要像jQuery一样操作复杂的dom代码,只需要改变模型就行了

 

5. 编码实战

6. 扩展思考

MVC与MVVM区别?

7. 参考文献

https://www.cnblogs.com/smyhv...        

8.讨论问题:

问: 1.MVC与MVVM区别?

答:MVVM是Model-View-ViewModel的简写。微软的WPF带来了新的技体验,如Silverlight、音频、视频、3D、动画……,这导致了软件UI层更加细节化、可定制化。同时,在技术层面,WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-PResenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去,以应对客户日益复杂的需求变化。

问:2.controller与factory,service是什么关系?

 

答:controller 专注于业务场景,即为特定的场景服务,所以不要重用controller,推荐通过小范围划分controller,使用父子作用域来满足业务场景。factory  提供一些公共的方法函数,推荐抽象,重用factory。service  类似factory,会被实例化,可以保存数据,作为controller之间的通讯工具,推荐重用。

问:3.angular和jQuery的区别?

 

答:在jquery中,你首先设计了一个page,然后再去动态修改它的内容,这是因为jQuery被设计用来进行扩展并在这个前提下大幅度地增加和修改内容,但是在angularjs中,你必须在心中先设计好你的架构,从一开始,你就要摒弃“我拥有一个DOM元素并且想让它去做某件事”,代之为“我需要完成什么任务,然后接着设计你的应用,最后再去设计你的视图view层”。

 

感谢观看, 如有出错, 恳请指正

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

脚本宝典总结

以上是脚本宝典为你收集整理的ANGULAR的核心思想是什么?怎么体现在代码里?全部内容,希望文章能够帮你解决ANGULAR的核心思想是什么?怎么体现在代码里?所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。