AngularJS 入门基础 (1)

1.什么是AngularJS

基于MVC模式发展的MVVM模式 js 框架,

M----------------> Model(数据):存储请求服务器下来的数据

V----------------->View  (视图):HTML 展示

C---------------->Controller (控制器):通过控制器控制数据展示在视图中,

一旦M,V,C发生变化,相对应的两个部分 也要 变化,C作为控制器,代码量巨大,当项目较大时,臃肿。MVC的所有通信都是单向的。即VC CM

从MVC发展出MVP

M----------------> Model

V----------------->View

P---------------->Presenter (主持)

各部分之间的通信,都是双向的。 View 与 Model 不发生联系,都通过 Presenter 传递

即:VP PV, MP PM

从MVP发展出MVVM

M----------------> Model

V----------------->View

VM---------------->ViewModel

基本与MVP 相同,唯一的区别在于采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。一部分数据展示直接交给View来出来。

2.AngularJS 指令

ng-app、ng-controller、ng-model、ng-bind、ng-repeat、ng-init、ng-click/mouseover

什么是指令,指令是扩展的 HTML 属性,带有前缀 ng-。

ng-app:表示这是一个angularJS应用 

ng-controller:表示受到controller控制

ng-model:用于绑定应用程序数据到 HTML 控制器的值

ng-bind:用于展示应用程序数据到 HTML 控制器的值

ng-init:初始化一个值

ng-reapet: 循环集合中元素,可以用 trace by,order 等修饰

ng-click/mouseover:事件表示,形同html事件。

{{a}}:angularJS 表达式,可以直接把angularJS的变量输出。

3.Controller的使用

<div ng-app="test">

    <div ng-controller="main">

    </div>

</div>

<script>

let mod = angular.module("test",[]);

mod.controller("main",function($scope,$http,$interval){

// angularJS code;

});    

获取test app中的main Controller  再使用 $scope 对象来调用控制器。

$scope:当前这个controller的angular所有变量集。

$rootscope:获取所有controller中的angular所有变量集。

</script>

ps:自学angularjs,这是我的理解。如果有理解错误的地方,请指出。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容