Angularjs 学习笔记（一）基础_angualarjs 笔记

作者：代码探险家 | 2024-07-24 11:48:56

踩

angualarjs 笔记

1.简介：
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好。

为什么需要MVC：（模块化和复用）
前台代码规模越来越大，切分代码是大势所趋
为了复用，很多的逻辑是一样的，抽出公共逻辑
为了后期维护方便，修改一块功能而不影响其他功能

2 . AngularJS应用程序的三个组成部分，它们如何映射到模型-视图-控制器设计模式：
模板：是您用HTML和CSS编写的文件，展现应用的视图。您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，通过AngularJS可以在HTML中构建自己的HTML标记！
应用程序逻辑（Logic）和行为（Behavior）：是用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使应用程序逻辑很容易编写、测试、维护和理解。
模型数据（Data）：模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。

3 . 五大特性
（1）双向数据绑定
可以声明绑定的模型到 HTML 元素。当模型发生变化时，视图会自动更新，能够同步DOM和Model。这可以减少大量的传统样板代码，保持模型和视图同步。
（2）模板
AngularJS 使用 HTML 模板，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。允许设计人员和开发人员同时工作。设计人员可以按照通常的方式创建用户界面，而开发人员可以使用声明性绑定语法很容易配合不同的UI组件的数据模型。
HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。
（3）MVC
针对客户端应用开发AngularJS吸收了传统的MVC基本原则。但并不执行传统意义上的MVC，更接近于MVVM（Model-View-ViewModel)。
Model
model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes，使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。

ViewModel：

是一个用来提供特别数据和方法从而维护指定view的对象。
viewmodel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。
1
2

Controller：负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

View：是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。

（4）依赖注入
AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。

（5）Directives（指令）

指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。您可以创建可重用的自定义组件与指令的API。例如，如果你想自定义日期选择器小部件，你可以创建一个组件。如果你想要一个奇特的文件上传与进度指示器可以继续创建一个组件。

4.前端开发工具
sublime：安装及使用见另一篇
webstorm/PHPstorm

5 .第一个angularjs应用
通过文本框和按钮添加任务列表，并实现可相同添加以及删除任务。
通过这个例子可以学到：
(1)引入angular.js文件，使用ng-app指令声明angular管理边界
(2)双向数据绑定的简单使用：双大括号{{}}
(3)常用指令

html文档结构：

<body style="padding: 10px">
    <div id="first" class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default" >提交</button>
        </span>
    </div>
    <h4 >任务列表</h4> 
    <ul class="list-group">
      <li ng-repeat="item in tasks " class="list-group-item" >{{item}}  //item为tasks数组里的循环变量，有一个输出一个
            <a >删除</a>
      </li>
    </ul>
</body>1
2
3
4
5
6
7
8
9
10
11
12
13
14

首先引入angularjs文件：<script src="angularjs/angular.min.js"></script>

在html标签中加入ng-app指令ng-app="todoList"声明angularjs的管理边界<html lang="en" ng-app="todoList">

ng-app指令标记了AngularJS脚本的作用域，在`<html>`中添加ng-app属性即说明整个`<html>`都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如`<div ng-app>`，则AngularJS脚本仅在该`<div>`中运行。
1

js里声明angularjs：

angular.module('todoList',[])
    .controller('TaskCtrl',function($scope){   //为控制器起名，为函数添加自带变量
        $scope.task="";     //设文本框中内容为task变量
        $scope.tasks=[];     //列表中以数组的形式存在
        $scope.add=function(){    //点击按钮的时候，将文本框中内容添加到列表中
            $scope.tasks.push($scope.task);
        };
    });1
2
3
4
5
6
7
8

控制器绑定body体：<body style="padding: 10px" ng-controller="TaskCtrl">
task为文本框中的内容，故input标签需要绑定ng-model<input ng-model="task" type="text" class="form-control">
task数组作为列表显示在li中，故li绑定ng-repeat="item in tasks
提交按钮绑定click事件ng-click：<button class="btn btn-default" ng-click="add()">提交</button>
删除按钮ng-click绑定splice删除按钮ng-click绑定splice（这里是删除）事件：<a ng-click ="tasks.splice($index,1)" >删除</a>

<body style="padding: 10px" ng-controller="TaskCtrl">       //绑定控制器
    <div id="first" class="input-group">
        <input ng-model="task" type="text" class="form-control">       //绑定模型
        <span class="input-group-btn">
            <button class="btn btn-default" ng-click="add()">提交</button>     //按钮绑定click事件
        </span>
    </div>
    <h4 ng-hide="tasks.length==0">任务列表</h4> <!-- 不管表达式是否成立，都生成，与ng-if相反 推荐ng-if、-->
    <!-- <h4 ng-if="tasks.length>0">任务列表</h4> -->
    <ul class="list-group">
      <li ng-repeat="item in tasks track by $index" class="list-group-item" >{{item}}

            <a ng-click ="tasks.splice($index,1)" >删除</a>
      </li>
        <!-- <li class="list-group-item">1</li>
        <li class="list-group-item">2</li>
        <li class="list-group-item">3</li>
        <li class="list-group-item">4</li> -->
    </ul>
</body>
<script src="angularjs/angular.min.js"></script>
<script>
    angular.module('todoList',[])
    .controller('TaskCtrl',function($scope){
        $scope.task="";
        $scope.tasks=[];
        $scope.add=function(){
            $scope.tasks.push($scope.task);
        };
    });
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/874537