Angular框架入门

时间 2019-12-18 标签 angular 框架入门

今天简单学习了AngularJS框架,在这里我想简单的总结一下我所了解的AngularJS和一些入门案例!javascript

首先,咱们要知道什么是AngularJS?html

AngularJS 诞生于2009年，由Misko Hevery 等人建立，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。前端

而后,AngularJS怎么用?为何咱们要使用AngularJS?java

AngularJS 是一个 JavaScript 框架。它可经过 <script> 标签添加到 HTML 页面,经过指令拓展了HTMLajax

AngularJS 是以一个 JavaScript 文件形式发布的，可经过 script 标签添加到网页中spring

我认为AngularJS 的优点在于减轻前端js代码量，增长js的复用也能够经过学习AngularJS学习到更多的前端页面框架并且最重要的是AngularJS具备四大特性分别是:设计模式

1.采用MVC设计模式app

提及MVC设计模式就不得不提一下设计模式这个关键词了，常见的设计模式有23+1种，这个+1就是指MVC了，其余的能够自行百度了解，学过软件工程的可能会了解的多一点，虽然很繁琐，但确实是颇有用的东西。框架

在angularJS中MVC分别表明模型（model）,视图（view）,控制器（controller）jsp

Model：模型，就是业务数据，前端项目中就是JS变量；

View：业务数据向用户展现的地方，前端项目中就是HTML；

Controller：负责业务数据的增删改查，前端项目中至关于函数。

2.双向数据绑定

数据绑定有两个方向，意识从Model到View，二是从View到Model。

1.从Model到View，只要Model中数据发生改变，View中的数据会自动同步更新。许多方法均可以实现此种方向的绑定，例如：{{ }}、ngBind、ngIf、ngRepeat、ngShow、ngChecked，其余的指令没有手动尝试，若是你们有兴趣能够本身敲一敲尝试一下。

2.从View到Model，这种方向的绑定实现方法只有一种，就是ngModel

单行文本输入域，ngMode能够把value属性值绑定到Model变量

复选框，ngModel能够把true/false值绑定到Model变量

单选框，ngModel能够把当前选中的单选框的value值绑定到Model变量

下拉框，ngModel能够把当前选中的option的value值绑定到Model变量

3.依赖注入

学过spring的同窗可能知道这个概念，对于angular JS来讲若是须要那些对象能够在参数中直接写出来，而后就能够在函数的使用了，这些对象不须要你本身建立，它自己已经被angular建立好了，你就能够直接使用了。

module.controller('控制器', function($scope, $interval){})

Angular中的ngController指令在实例化控制器对象时，会根据指定的形参名，建立出控制器所依赖的对象，并注入给控制器对象——依赖注入（Dependency Injection，DI）现象。

注意：

(1)Angular在建立控制器对象时，会根据形参列表中的每一个形参的名称来建立依赖的对象，故控制器声明函数不能声明Angular没法识别的形参名——Angular只提供了这一种依赖注入方式——根据形参名来注入依赖的对象！

(2)若项目JS文件使用了相似yuicompressor等压缩程序，默认会把函数的形参名精简为一个字母的形式，会致使Angular的依赖注入失败！解决办法：

4.模块化开发

顾名思义就是经过定义模块把各个部分分开采用了高内聚低耦合的原则从而使代码的依赖下降

咱们应该如何使用AngularJS呢

首先咱们须要导入所要用到的script 标签使用方法和Jquery同样

<script type="text/javascript" src="js/angular.min.js" ></script>

接下来要认识几个比较经常使用的指令

ng-model 能够将输入域的值与 AngularJS 建立的变量绑定。与jsp中的name属性相似

ng-app=myApp 用于告诉 AngularJS 应用当前这个元素是根元素。通常写在<body>标签中一个HTML只有一个ng-app

ng-controller 用于为你的应用添加控制器。通常写在<body>标签中

ng-repeat 用于遍历循环哪里须要用到就添加在对应的标签上

ng-init 初始化

$scoper 做用域是当前页面

表达式页面若是须要展现数据须要用{{表达式或者变量}} 好比:

        <script>
            var app=angular.module('myApp',[])//  定义了一个模块   叫myApp
            // 定义控制器
            app.controller('mycontroller',function($scope){
                $scope.add=function(){
                    return parseInt($scope.x)+parseInt($scope.y);
                }
            });
        </script>
    </head>
    <body ng-app=myApp ng-controller="mycontroller">
        x：<input type="text" ng-model="x" />
        y：<input type="text" ng-model="y" />
        
        <br />
        运算结果：{{add()}}
    </body>

结果:

循环遍历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script>
            var app = angular.module("myApp",[])
            app.controller("mycontroller",function($scope){
                $scope.list = [
                {name:"zhangsan",age:18,sex:"man"},
                {name:"lisi",age:17,sex:"woman"},
                {name:"wangwu",age:16,sex:"boy"}
                ];
            })
        </script>
    </head>
    <body ng-app="myApp" ng-controller="mycontroller">
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
            <tr ng-repeat="p in list">
                <td>{{p.name}}</td>
                <td>{{p.age}}</td>
                <td>{{p.sex}}</td>
            </tr>
        </table>
    </body>
</html>

结果:

一些其余的补充

$scope是angular.js内置对象

$scope有请求数据也有响应数据

ng-init angular.js 中只要页面一执行页面加载首先执行的ng-init 中操做

var app=angular.module('app',[]) // 定义了一个模块叫app 定义之后必定要在body 标签上声明使用的模块名称

ng-click 鼠标点击事件

$http 也是angular.js的内置对象主要做用发送http 请求而且是发送ajax

$http.get 发送get请求

$event 能够获取当前操做的事件是什么复选框 ----》复选框哪一个被勾选