AngularJS初体验-01

Posted 2020-09-23 admin-NaN

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS初体验-01相关的知识，希望对你有一定的参考价值。

一、介绍

1、是前端MVC框架，由Google公司维护的。

2、特点：模块化、双向数据绑定、语义化标签、依赖注入等。

3、其实jQuery只是一个类库，并不是一个框架。类库只是一堆函数的集合体。

4、Angular是一个框架，是一堆类库的集合体。

5、jquery是以DOM为驱动的，二Angular是以数据和逻辑来驱动的（核心）。

6、与Angular类似的框架还有很多：BackBone、KnockoutJS、Vue、React等。

7、本质上也是js文件。

二、下载

1、官网

2、npm下载

3、bower下载

三、体验

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

</body>

</html>

四、MVC概念

1、分工明确：提高效率。将工作内容对员工进行分工。目的是可以使工作效率得到提升。（后端处理数据（Model模型），前端展示数据（View视图），前端与后端之间个协调者，叫做（Controller控制器））。

2、唯一的目的是为了提升开发效率。

3、MVVM（model view viewmodel）这个是前端的MVC，他的核心思想是一样的。MVW、MVP、MV*都是MVC的衍生版

五、模块化

1、模块化是一种思想。

2、Angularjs也是模块的方式来组织代码的。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

// 通过js逻辑来完成应用的具体功能

// js代码使按着模块的形式组织的

// 所以开始逻辑前需要创建模块

// Angularjs有自己的一套创建模块的方法

// 当引入Angular以后，就会提供一个全局的对象叫App。并且在此对象下提供若干方法，其中一个方法叫module，通过此方法可以创建一个模块

// 需要两个参数

// 第一个是模块名称（一般对应应用名称）,第二个参数依赖

var App=angular.module(\'App\',[]);

// 模块是以MVC的形式来组织代码的，模块具备三个角色，分别是MVC

// 模块想要工作，需要三个角色配合起来，对三个角色进行创建

// 先创建控制器

// 模块实例下有若干方法，其中controller方法用来创建一个控制器

// 需要两个参数，第一个参数是控制器的名称（一般有含义的名词），第二个参数也是依赖

App.controller(\'DemoCtrl\',[\'$scope\',function($scope){

// $scope就认为是模型 M

// $scope可以认为是一个空对象

$scope.name=\'香茗\';

$scope.age=12;

}]);

</script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

var App=angular.module(\'App\',[]);

App.controller(\'DemoCtrl\',[\'$scope\',function($scope){

$scope.name=\'xiaoyagn\';

$scope.age=\'123\';

}]);

</script>

</body>

</html>

两个模块：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</div>

var App=angular.module(\'App\',[]);

App.controller(\'DemoCtrl\',[\'$scope\',function($scope){

$scope.name=\'xiaoyagn\';

$scope.age=\'123\';

}]);

// 创建第二个控制器

App.controller(\'DemoCtrl2\',[\'$scope\',function($scope){

$scope.name=\'舒见佳\';

$scope.age=\'(✪ω✪)(ಥ_ಥ) ┗( ▔, ▔ )┛\';

}]);

</script>

</body>

</html>

遍历模块：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<table>

<tr>

</tr>

<td>{{val.gender}}</td>

</tr>

</table>

</div>

var App = angular.module(\'App\' , []);

App.controller(\'DemoCtrl\',[\'$scope\' , function($scope){

$scope.lst=[

{name:\'123\',age:50,gender:\'man\'},

{name:\'345\',age:40,gender:\'female\'},

{name:\'567\',age:30,gender:\'male\'}

];

}]);

</script>

</body>

</html>

六、内置指令（就是属性）

ng-app 指定应用根元素，至少有一个元素指定了此属性。

ng-controller 指定控制器

ng-show控制元素是否显示，true显示、false不显示

ng-hide控制元素是否隐藏，true隐藏、false不隐藏

ng-if控制元素是否“存在”，true存在、false不存在

ng-src增强图片路径

ng-href增强地址

ng-class控制类名

ng-include引入模板

ng-disabled表单禁用

ng-readonly表单只读

ng-checked单/复选框表单选中

ng-selected下拉框表单选中

注意：嵌套是不可以的。

prop（）和attr（）区别

- 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

- 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

js是不能主动读取本地文件的。

具体用法

<!DOCTYPE html>

<title>Document</title>

</head>

<body >

<ul>

<li ng-show=\'1\'>ng-show控制元素是否显示，true显示、false不显示</li>

<li ng-hide="false">ng-hide控制元素是否隐藏，true隐藏、false不隐藏</li>

<li ng-if=\'true\'>ng-if控制元素是否“存在”，true存在、false不存在</li>

<li>

ng-src增强图片路径

</li>

<li ng-class="{red:true, blue:true}">ng-class控制类名,属性值为true，相对应的属性名会被当成真实类名添加</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</select>

</li>

</ul>

</div>

var App = angular.module(\'App\', []);

App.controller(\'DemoCtrl\', [\'$scope\', function ($scope) {

$scope.path = \'9919.png\';

$scope.href = \'01.css\';

}]);

</script>

</body>

</html>

ng-include指令：

必须在服务器下运行

ng-include 指令用于包含外部的 HTML 文件。

包含的内容将作为指定元素的子节点。

ng-include 属性的值可以是一个表达式，返回一个文件名。

默认情况下，包含的文件需要包含在同一个域名下。

属性：

filename

文件名，可以使用表达式来返回文件名。

onload

可选，文件载入后执行的表达式。

autoscroll

可选，包含的部分是否在指定视图上可滚动。

七、自定义指令：核心知识点

（Vue是重点，Angular过于复杂，所有学的是弱化的）

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<ul>

</ul>

</div>

var App=angular.module(\'App\',[]);

App.controller("DemoCtrl",[\'$scope\',function($scope){

}]);

// directive用来定义一个指令

// 需要两个参数，第一个为指令的名称，第二个为指令的逻辑

App.directive(\'demo\',function(){

// 这里写一个逻辑

// console.log(1);

// 必须返回一个值，可以是对象或者函数

// 对象有一定的要求

return {

// A attritube表示此指令可以通过指令来使用

// E element表示此指令可以通过标签来使用、M是注释（ 使用）、C是类名

// restrict: \'A\',

restrict: \'ECMA\',

template: \'<h1>Hello Angularjs</h1>\',

replace: true,//li只是一个占位符

// 引入一个外部文件

templateUrl:\'07.html\'

}

});

// 上述代码定义了一个非常基本的指令，只满足了语法，其使用方法与内置指令一样

</script>

</body>

</html>

8、数据绑定：

所谓的数据绑定其实就是指的将特定的模型数据与视图位置建立一种关联关系，这种关系就是数据绑定。

单向绑定：

双向绑定：

第一种写法

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<h1>

</h1>

<ul>

</ul>

</div>

var App=angular.module(\'App\',[]);

App.controller(\'DemoCtrl\',[\'$scope\', function ($scope){

$scope.name=\'小明\';

$scope.courses=[\'html\',\'js\',\'css\'];

}])

</script>

</body>

</html>

第二种写法

</h1>

<ul>

</ul>

ng-model用来将视图数据绑定到模型上

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

</div>

var App=angular.module(\'App\',[]);

App.controller(\'DemoCtrl\',[\'$scope\',function($scope){

$scope.show=function(){

alert($scope.msg)

}

}]);

</script>

</body>

</html>

ng-bind单向 ng-model（表单元素）双向

闪烁现象：利用ng-bind能够避免闪烁。但是不能使用两次，而{{}}可以使用多次在一个标签之中，ng-bind不建议使用。闪烁现象可以解决（只要把Angularjs拿到前面去，在闪烁标签加入ng-cloak）

通过ng-init指令也可以定义模型数据

区别：简单的可以这么写

9、处理事件

placeholder占位符

ng-click="click()"

避免全局函数

ng-mouseover="over()"

ng-blur="blur()"

重复：ng-repeat

<div ng-repeat="val in list">{{$index}}{{val}}</div>

找到遍历结果是否是奇数项

<div ng-repeat="val in list">{{$odd}}{{$index}}{{val}}</div>

偶数项

<div ng-repeat="val in list">{{$even}}{{$index}}{{val}}</div>

第一个

<div ng-repeat="val in list">{{$first}}{{$index}}{{val}}</div>

最后一个

<div ng-repeat="val in list">{{$last}}{{$index}}{{val}}</div>

ng-switch on="val"

ng-switch-when="html"`

以上是关于AngularJS初体验-01的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS初体验-02

angularJs初体验，实现双向数据绑定！使用体会：比较爽

基于 Webpack & Vue & Vue-Router 的 SPA 初体验

体验jQuery和AngularJS的不同点已经AngularJS的迷人之处

开发人员必备的10个实用的AngularJS小窍门

YY游戏云的AngularJS实践