angular学习笔记

1.ng的四大特征：
①采用MVC的设计模式
符合当前互联网的发展趋势：职责的细分
模块化开发：提高代码复用率降低测试难度维护方便

②双向数据绑定
是angularJS区别于其他框架的一个重要特性

③依赖注入
通过注入某些服务或者对象直接调用

④模块化设计
ng框架本身就是符合模块化设计，使用框架结合模块、控制器、服务等来实现模块化开发

2.基础语法：{{expression}} 可执行括号中的表达式将结果输出到innerHtml中

3.表达式：算术运算（除++，--），比较运算，逻辑运算，三目运算，特殊运算（获取对象属性方法）

4.使用AngularJS的步骤：

(1)引入angular.js文件

(2)某个父级元素声明ng-app属性

(3)子元素中可以使用angular相关内容了

(1)ng-app标示一个angular模块的范围，只有此范围内的angular内容才会被处理

(2)一个页面中只能声明一次ng-app，若有多块表达式需要处理，把ng-app声明在包含它们的父元素中

(3)为了让网页通过HTML校验程序，可以对所有的angular指令前添加data-

(4)ng-app属性要么不声明值；若声明了值，则script中必须声明此名称所对应的module：

angular.module( 'moduleName', [ ] );

5.Angular中的Model

Model：模型，就是应用中的数据，如：数字、字符串、数组、对象....

声明Model数据有两种方式：

(1)<xx ng-init="变量名=变量值;"> —— 不推荐使用！把model混合在html/view中

(2)使用Controller初始化Model数据 —— 推荐使用！

angular.module(...).controller("ctrlName", function($scope){

$scope.变量名 = 值; //为当前控制器声明model数据

$scope.变量名 = 值;//....

$scope.变量名 = function(){.....}; //....

})

注意： //model数据的任何修改都会被angurlar同步更新到view

6.ng的MVC具体用法
Model View Controller

①声明模块
var app = angular.module("myApp",['ng']);
②注册模块
ngApp指令： ng-app="myApp"
③声明控制器
app.controller（"myCtrl",function(){}）
④使用控制器
ngController指令：ng-controller='myCtrl'
⑤在控制器的回调函数中，注入$scope对象，指定模型数据：
$scope.name = 'Michael' ;
$scope.age = 20;
⑥显示
{{}} 或者ng指令：ng-bind=‘';此指令可以防止闪动问题
$scope 作用域控制对象，将模型数据和视图建立联系的桥梁
初始化数据：
ngInit
$scope对象

7.ngRepeat用法有两种
<ANY ng-repeat="tmp in set(model)"/>
<ANY ng-repeat="(key,value) in set(model)"/>ng-repeat让该元素重复生成

ngIf 让HTML支持选择（判断）
<ANY ng-if='表达式'/>

angular学习笔记相关推荐

Angular学习笔记第一节基本概念
1.Let do it! ####1.ng的基础概念在学习ng之前,我们只需要掌握HTML.CSS.JS即可. 简称ng.名字不错,吊! 重要的特性有了ng,我们就可以轻松的构建SPA应用,而且n ...
Angular 学习笔记 Material
以后都不会写 0 到 1 的学习记入了,因为官网已经写得很好了. 这里只写一些遇到的坑或则概念和需要注意的事情. Material Table 1. ng-content 无法传递 CdkColumn ...
angular学习笔记(十三)
本篇主要介绍控制器的$scope中的数据是如何被改变的: 以下三种方法,都可以改变$scope中的number值: 1. 表达式: <span ng-click="number=num ...
angular学习笔记(四)- input元素的ng-model属性
input元素的ng-model属性: 用于将input的值和变量的值进行双向绑定 <!DOCTYPE html> <html ng-app> <head>< ...
angular学习笔记(三十)-指令(4)-transclude
from: http://www.cnblogs.com/liulangmao/p/3951865.html 本篇主要介绍指令的transclude属性: transclude的值有三个: 1.tra ...
angular学习笔记(二十五)-$http(3)-转换请求和响应格式
本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({transfor ...
Angular 学习笔记——service constant
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
angular学习笔记(十九)-自定义指令修改dom
使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directiv ...
Angular 学习笔记——拖拽
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
angular学习笔记(九)-css类和样式2
在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error ...

angular学习笔记

angular学习笔记相关推荐

最新文章

热门文章