发表于： 2021-10-20 23:54:24
0 829
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的属性上。
返回列表
评论