angularjs 学习笔记 简单基础

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs 学习笔记 简单基础相关的知识,希望对你有一定的参考价值。

angularjs是谷歌公司的一个项目,弥补了hml在构建方面的不足,通过指令(directive)来扩展html标签,可以使开发者使用html来声明动态内容。

angularjs主要用来开发单页应用(SPA)为主的项目。

angularjs四个主要特点:1.mvc模式 2.双向数据绑定 3.模块化 4.指令系统

为了使用Angular,所有应用都必须首先做两件事情
1. 下载加载 angular.js 库 
2. 使用ng-app 指令告诉 angular 应该管理DOM中的哪一些部分
angular 中一些常用指令:
ng-app:网页中的根元素,
ng-init:初始化数据;
ng-bind:绑定数据;
ng-show:显示;
ng-hide:隐藏数据;
ng-class:控制class
ng-click:绑定点击事件;
ng-disabled:禁用事件;
ng-model:绑定html中的数据;
ng-repeat:循环数据;

1. Angularjs  MVC

 

Model:数据模型层

View:视图层,负责展示

Controller:业务逻辑和控制逻辑

优点: 代码模块化 代码逻辑比较清晰、可移值性高,后期维护方便、代码复用,代码规模越来越大的时候,切分职责是大势所趋

缺点:运行效率稍微低一些

  

$scope 控制作用域;$rootscope:根作用域,全局作用域;

 

1. Angularjs $scope里面的$apply方法
 
$apply方法作用:
Scope提供$apply方法传播Model的变化
 
$apply方法使用情景:
AngularJS外部的控制器(DOM事件、外部的回调函数如jQuery UI空间等)调用了AngularJS函数之后,必须调用$apply。在这种情况下,你需要命令AngularJS刷新自已(模型、视图等),$apply就是用来做这件事情的。
 
$apply方法注意事项:
只要可以,请把要执行的代码和函数传递给$apply去执行,而不要自已执行那些函数然后再调用$apply。例如,你应该像下面这样来执行你的代码:
 
$scope.$apply(function() {
 $scope.variable1 = ‘some value‘;
executeSomeAction();
});
 
 
2. Angularjs $scope里面的$watch方法
 
$watch方法作用:
 
$watch方法监视Model的变化。
 
 

 

以上是关于angularjs 学习笔记 简单基础的主要内容,如果未能解决你的问题,请参考以下文章

[Angularjs-学习笔记]工具篇

AngularJS学习笔记01 序

JavaScript及AngularJS 1.x版本学习笔记

angularjs2 学习笔记 路由

angularjs2 学习笔记 服务

AngularJs 学习笔记依赖注入