Angular入门基础

前端

Angular

大约 8 分钟

Angular各版本介绍

版本1

Angularjs是一款由Google维护的开源JavaScript库，用来协助单一页面应用程序运行。它的目标是透过MVC模式（MVC）功能增强基于浏览器的应用，使开发和测试变得更加容易。

版本2

Angular2用于在html和JavaScript中构建Web应用程序，并被认为是移动第一种方法。 Angular2 是 Angular 1.x 的升级版本，性能上得到显著的提高，能很好的支持 Web 开发组件。最终版本于2016年9月14日发布。

版本4

2016年12月13日宣布Angular 4，跳过3以避免由于路由器软件包版本的错位导致混淆，该版本已经作为v3.3.0发布。最终版本于2017年3月23日发布。Angular 4向后兼容Angular2。

Angular版本4.3是次要版本，意味着它不包含任何重大更改，并且它是4.xx的替代品

●　介绍HttpClient，一个更小，更易用，更强大的库，用于发出HTTP请求。

●　防护和解析器的新路由器生命周期事件。四个新事件：GuardsCheckStart，GuardsCheckEnd，ResolveStart，ResolveEnd加入现有的生命周期事件集如NavigationStart。

●　有条件地禁用动画。

版本5

Angular 5于2017年11月1日发布。Angular 5的主要改进包括支持渐进式Web应用程序，构建优化器以及与Material Design相关的改进。

版本6

Angular 6于2018年5月4日发布。这是一个主要版本，更少关注底层框架，更多关于工具链，以及将来更容易使用Angular快速移动，例如：ng update，ng add，Angular Elements，Angular Material + CDK Components，Angular Material入门组件，CLI工作区，库支持，树可变提供程序，动画性能改进和RxJS v6。

版本7

Angular 7于2018年10月18日发布。有关应用程序性能，Angular材料和CDK，虚拟滚动，改进的Selects Accessibility的更新，现在支持使用Web标准进行自定义元素的Content Projection，以及有关Typescript 3.1，RxJS 6.3，Node的依赖关系更新10（仍然支持节点8）。

版本8

Angular 8于2019年5月28日发布。具有所有应用程序代码的差异加载，懒惰路由的动态导入，Web worker，TypeScript 3.4支持和Angular Ivy作为选择预览。Angular Ivy选择预览包括：

●　生成的代码，在运行时更易于阅读和调试。

●　更快的重建时间。

●　有效载荷大小改进

●　改进了模板类型检查。

●　向后兼容性。

版本1

版本1主要在页面中单独引用Angular文件使用
<script src="../js/angular.min.js" type="text/javascript"></script>

1.基本使用

以下演示的版本是 angular-1.2.29,仅在该版及以下生效

ng-app
- ng-app指令默认会创建一个根作用域对象($rootScope)。它的属性和方法与页面中的指令或表达式是关联的
ng-init
- 用来初始化当前作用域变量
ng-model
- 双向数据绑定
ng-bind
- 把数据绑定到html标签中
ng-controller
- 每个ng-controller相互隔开，即数据不共享。
- 用来控制AngularJS应用数据的实例对象。指定控制器构造函数, Angular会自动new此函数创建控制器对象
- 同时Angular还有创建一个新的域对象$scope, 它是$rootScope的子对象。在控制器函数中声明$scope形参, Angular会自动将$scope传入
  - 参数名称必须为$scope

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app>
<div ng-controller="ct1" ng-init="tip='请输入用户名和密码'">
    <p ng-bind="tip"></p>
    用户名：<input type="text" ng-model="username">
    密码：<input type="password" ng-model="password">
    <p>输入的用户名：{{username}}</p>
    <p>输入的密码：{{password}}</p>
    <p>用户名和密码：{{getNameAndPwd()}}</p>
    <div>
        <span>绑定的用户名:</span>
        <span ng-bind="username"></span>
    </div>
</div>
<div ng-controller="ct2">
    用户名：<input type="text" ng-model="username1">
    密码：<input type="password" ng-model="password1">
    <p>输入的用户名：{{username1}}</p>
    <p>输入的密码：{{password_2}}</p>
    <p>用户名和密码：{{getNameAndPwd1()}}</p>
    <div>
        <span>绑定的用户名:</span>
        <span ng-bind="username1"></span>
    </div>
</div>
<script src="../js/angular1_2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function ct1($scope) {
        console.log($scope.username);
        console.log($scope.password);
        $scope.getNameAndPwd = function () {
            return $scope.username+"-"+$scope.password
        };
    }
    function ct2($scope) {
        console.log($scope.username1);
        console.log($scope.password1);
        $scope.getNameAndPwd1 = function () {
            return $scope.username1+"-"+$scope.password1
        };
    }
</script>
</body>
</html>

2.模块对象基本使用

以下演示的版本是 angular-1.5.5,仅在该版及以下生效

angular.module('',[])
- param1：ng-app名称，param2: 引用的模块
隐私声明：controller('',function($scope){})
- 形参必须为$scope
显示声明:controller('',['$scope',function(param){}])
- $scope必须，形参为任意

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="myApp">
<div ng-controller="ct1">
    用户名：<input type="text" ng-model="username">
    密码：<input type="password" ng-model="password">
    <p>输入的用户名：{{username}}</p>
    <p>输入的密码：{{password}}</p>
    <p>用户名和密码：{{getNameAndPwd()}}</p>
</div>
<div ng-controller="ct2">
    用户名：<input type="text" ng-model="username1">
    密码：<input type="password" ng-model="password1">
    <p>输入的用户名：{{username1}}</p>
    <p>输入的密码：{{password2}}</p>
    <p>用户名和密码：{{getNameAndPwd1()}}</p>
</div>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
    angular.module('myApp', [])
        .controller('ct1', function ($scope) {
            $scope.getNameAndPwd = function () {
                return $scope.username+"-"+$scope.password
            };
        })
        .controller('ct2', function ($scope) {
            $scope.getNameAndPwd1 = function () {
                return $scope.username1+"-"+$scope.password1
            };
        });
</script>
</body>
</html>

3.El表达式

基本类型数据: number/string/boolean
undefined, Infinity, NaN, null解析为空串: "", 不显示任何效果
对象的属性或方法
数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="myApp" ng-controller="ct1">
<p>{{1+3}}</p>
<p>{{"hello"+"world"}}</p>
<p>{{true}}</p>
<p>{{username}}</p>
<p>{{username.split("")}}</p>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
    angular.module('myApp', [])
        .controller('ct1', function ($scope) {
            $scope.username='James'
        })
</script>
</body>
</html>

4.常用指令

ng-app: 指定模块名，angular管理的区域
- ng-model：双向绑定，输入相关标签
- ng-init：初始化数据
- ng-click：调用作用域对象的方法（点击时）
- ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
- ng-bind：解决使用显示数据闪屏（在很短时间内显示）
- ng-repeat：遍历数组显示数据，数组有几个元素就会产生几个新的作用域
  - $index 索引从0开始
  - $first 是否为第一个
  - $last 是否为最后一个
  - $middle 是否为非第一和最后一个
  - $odd 是否是奇数(索引)
  - $even是否为偶数(索引)
- ng-show: 布尔类型，如果为true才显示
- ng-hide: 布尔类型，如果为true就隐藏
- ng-class: 动态引用定义的样式
  - {cl1:true,cl2:true} cl1和cl2代表class样式名称，true为使用该样式，false不使用该样式
- ng-style: 动态引用通过js指定的样式对象
- ng-click: 点击监听, 值为函数调用, 可以传$event
- ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
- ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
- ng-disabled: 是否禁用该标签，true禁用，false启用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .cl1{
            background-color: grey;
        }
        .cl2{
            background-color: green;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="ct1">
<div>
    值1：<input type="number" ng-model="v1">
    值2：<input type="number" ng-model="v2">
    结果：<span ng-bind="result"></span>
    <button ng-click="cacaulate()">计算</button>
</div>
<div>
    <ul>
        <li ng-repeat="emp in employee" ng-class='{cl1:$even,cl2:$odd}'>
            姓名：{{emp.name}}
            年龄：{{emp.age}}
            城市：{{emp.city}}
            偶数行：{{$even}},奇数行{{$odd}},中间的：{{$middle}},最后一个：{{$last}},第一个：{{$first}},第{{$index}}个
        </li>
    </ul>
</div>
<div>
    <p ng-show="isShow">你好，世界！</p>
    <p ng-hide="isShow">hello world！</p>
    <button ng-click="switchEC()">中英切换</button>
</div>
<div style="width: 200px;height: 200px;background-color: aqua" ng-mouseenter="enter()" ng-mouseleave="leave()" ng-style="st1">
</div>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
    angular.module('myApp', [])
        .controller('ct1', function ($scope) {
            $scope.result=0
            $scope.cacaulate=function () {
                $scope.result = $scope.v1 + $scope.v2;
            };

            $scope.employee=[
                {'name':'张三1','age':20,'city':'南京'},
                {'name':'张三2','age':21,'city':'南京1'},
                {'name':'张三3','age':22,'city':'南京1'},
                {'name':'张三4','age':23,'city':'南京1'},
                {'name':'张三5','age':24,'city':'南京1'}
            ]

            $scope.isShow=true
            $scope.switchEC = function () {
                $scope.isShow = !$scope.isShow
            };

            $scope.enter = function () {
                $scope.st1={
                    'background-color':'red'
                }
            };
            $scope.leave = function () {
                $scope.st1={
                    'background-color':'yellow'
                }
            };
        })
</script>
</body>
</html>

5.简单应用

笔记从localstorage保存，清除，读取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body  ng-app="myApp" ng-controller="ct1">
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/t5.js" type="text/javascript"></script>
<div>
    <h2>我的笔记</h2>
    <textarea cols="30" rows="10" ng-model="message"></textarea>
    <div>
        <button ng-click="save()">保存</button>
        <button ng-click="read()">读取</button>
        <button ng-click="delete()">删除</button>
    </div>
    <p>剩余字数：{{resultWord()}}</p>
</div>
</body>
</html>

angular.module('myApp', [])
    .controller('ct1', function ($scope) {
        $scope.message = ''
        $scope.save = function () {
            localStorage.setItem('note', JSON.stringify($scope.message));
        };
        $scope.read = function () {
            let item = localStorage.getItem('note');
            console.log(item)
            if (!item) {
                item='[]'
            }
            $scope.message = JSON.parse(item);
        };
        $scope.delete = function () {
            localStorage.removeItem('note');
            $scope.message = ''
        };
        $scope.resultWord = function () {
            if ($scope.message.length>100) {
                $scope.message = $scope.message.slice(0, 100);
            }
            return 100-$scope.message.length
        };
    });

多选框的删除与添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body  ng-app="myApp" ng-controller="ct1">
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/t6.js" type="text/javascript"></script>
<div>
    <h2>我的备忘录</h2>
    <div>
        <input type="text" ng-model="newTodo">
        <button ng-click="add()">新增</button>
    </div>
    <div ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.isChecked">
        <span>{{todo.name}}</span>
    </div>
    <button ng-click="delete()">删除选中的记录</button>
</div>
</body>
</html>

angular.module('myApp', [])
    .controller('ct1', function ($scope) {
        $scope.todos=[
            {'name':'学习1','isChecked':false},
            {'name':'学习2','isChecked':false},
            {'name':'学习3','isChecked':false}
        ]
        $scope.add = function () {
            let obj={
                'name':$scope.newTodo,'isChecked':false
            }
            $scope.todos.push(obj)
            $scope.newTodo=''
        };
        $scope.delete = function () {
            $scope.todos = $scope.todos.filter(item => {
                if (!item.isChecked) {
                    return item;
                }
            });
        };
    });

Angular入门基础

# Angular各版本介绍

# 版本1

# 1.基本使用

# 2.模块对象基本使用

# 3.El表达式

# 4.常用指令

# 5.简单应用