Angular JS入门

☀️将流式结构--->模块化

一、事件监听

1.事件监听

前言

NG框架中通过对元素标签添加[ng-事件名] 指令，来对元素添加事件监听
而事件监听的回调函数需要在controller中通过$scope来实现说明:整个过程类似html事件

- 语法:
<E ng-事件名称='回调函数名(NG变量)'></E>
$scope.回调函数名 = function (形参){
- 在函数中形参就是传入的NG变量的值

ng-click、ng-model

<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" ng-app="app" ng-controller="mainController">

<head>
    <meta charset="utf-8" />
    <title ng-bind="title"></title>
</head>
<body>
    <p ng-show="showFlag">{{content}}</p>
    <button ng-click="eventHandler()">Click Here!!!</button>
    <ul>
        <li ng-repeat="movie in movies track by $index" ng-click="clickInLi($index)">{{movie}}</li>
    </ul>
    <!--angularjs-->
    <script src="js/angular-1.5.5/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('mainController', ['$scope', function ($scope) {
            $scope.title = "event listen";
            $scope.content = "TEST";
            $scope.showFlag = true;
            $scope.eventHandler = function () {
                console.log('this is a test in click...');
                $scope.showFlag = !$scope.showFlag;
            };

            $scope.movies = ['fight club(1999)', 'Seven(1995)', 'Inglourious Basterds(2009)'];
            $scope.clickInLi = function (index) {
                console.log('you cick item ' + index + ' ,the movie is ' + $scope.movies[index]);
            }
        }]);

        /*
        1.事件监听
        描述：
            NG框架中通过对元素标签添加【ng-事件名】指令，来对元素添加事件监听
            而事件监听的函数需要在controller中，通过$scope来实现
        说明：
            整个过程类似于html事件
        语法：
            <E ng-事件名称='回调函数名(NG变量)'></E>
             ...
             $scope.回调函数名=function(形参){
                 //在函数中形参就是传入的NG变量的值
             }
        */
    </script>
</body>
</html>

💁‍♀️ tips:

ng-repeat='product in products track by $index'
 //这样做之后，angular就知道有dom有哪些变动， DOM只重绘了修改和增加的项。 
 //在使用AngularJS的时候，如果用ng-repeat指令遍历一个数组，当数组中有重复元素的时候,angularjs会报错：

2.评论案例

<!DOCTYPE html>
<html ng-app="app" ng-controller="mainCtrl">
<head>
    <title ng-bind="title"></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="libs/bootstrap4/css/bootstrap.min.css">
    <script src="libs/jquery/css/jquery-1.11.1.js"></script>
    <script src="libs/angular-1.5.5/angular.js"></script>

</head>
<body>

    <div class="container">
        <br />
        <!--评论模块-->
        <div class="input-group">
            <input type="text" class="form-control" ng-model="comt" />
            <span class="input-group-btn">
                <button class="btn btn-primary" ng-click="submitComment(comt)">评论</button>
            </span>
        </div>
        <!--评论内容-->
        <h3 ng-show="commentArr.length>0">评论</h3>
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="comment in commentArr track by $index">
                <span>{{comment}}</span>
                <a href="javascript:;" class="btn btn-link" ng-click="deleteComment($index)">删除此评论</a>
            </li>
        </ul>

    </div>


    <script>
        var app = angular.module('app', []);
        app.controller('mainCtrl', ['$scope', function ($scope) {
            $scope.title = "Bootstrap 实例";
            $scope.commentArr = [];//声明评论集合数组
            //提交评论
            $scope.submitComment = function (comt) {
                $scope.commentArr.push(comt);
                $scope.comt = '';
            };
            //删除评论
            $scope.deleteComment = function (index) {
                $scope.commentArr.splice(index, 1);

            };
        }]);
    </script>
</body>
</html>

_.without($scope.commentArr,$scope.commentArr[index]);//弊端：会删除数组中的重复元素
$scope.commentArr.splice(index,1);//删除指定元素

二、AnqularJS 多控制器思想与模块化编程架构

1.背景

ng-controller与多控制器思想能够看到angular的操作，实际上脚本代码都是写在controller之中的描述;
而刚刚我们将所有的脚本都堆积到一个控制器中的操作虽然理解上变得容易，但是实际开发过程中则会造成灾难所以为了便于团队开发，
为了便于维护NG提出了[多控制器思想]

2.说明

多控制器思想:
类似于div中的布局思想，是将控制器按照页面的不同模块功能进行切分一个控制器
只用来控制一个功能模块，多个控制器之间互不影响，独立工作。
优势:
分工明确，代码清晰，便于维护当系统出现问题，能够立即定位到问题坐标
弊端:
对于初学者而言，前期代码的架构会变得很繁琐，对初学者不是很友好

3.强调

每一个控制器只要被声明，就必须通过.controller实现即便控制器中没有代码，也必须写出；
每一个控制器作用域可以认为是嵌套的，即外层controller可以直接访问到内层controller内的NG变量而同级controller之间互不影响；
对于程序，习惯上mainController作为用户默认加载页面的根控制器；

4.多控制器-代码优化

Angular JS入门（一）事件监听（二）多控制器思想与模块化编程（三）路由router

5.模块化编程

-- 创建js文件
-- js下创建 apps(自写)，libs（系统外写）；
-- apps下创建 controllers文件夹：用于置放控制器js

Angular JS入门（一）事件监听（二）多控制器思想与模块化编程（三）路由router

三、AnqularJS 路由router

1.理论知识

1.router 路由

描述：

router路由是由angularjs中提出的，用于构建单页面应用的模块。
其本质从a标签点击跳转功能延展而来的。

说明：
(1)router功能的实现需要依赖于angularjs的扩展文件 angular-route.min.js
(2)router功能的实现需要依赖于ng-view;
【ng-view】作用，提供标注怕【显示不同页面的容器】的作用;
(3)router 功能的实现需要依赖于a标签的href属性;
href='#要加载的页面代号'
此属性设置的作用是在a标签点击的额时候能够通知路由，要加载哪一个页面;
(4)router路由的具体语法是通过app页面数据模型创建的
通过config方法来构建一个路由
在路由中，通过.when() 来判定加载哪一个页面;
在路由中，通过.otherwise 来决定路由默认加载哪一个页面;

语法：

 app模型.config(['$routeProvider',function($routeProvider){
      $routeProvider
           .when('/页面代号',{
               templateUrl:'要加载页面的url地址(以路由所在的地址为起点)',
               controller:'对应页面的控制器名称'
           })
           ...
           .otherwise({
               redirectTo:'/默认加载页面的代号'
           });
  }]);

注意：
(1)如果需要使用路由功能，那么在创建页面数据模型app的时候，
必须要注入一条名为【ngRoute】的信息，此注入信息相当于对当前页面声明：我要使用路由功能
语法：var app=angular.module('app',['ngRoute']);
(2)在承载不同页面的容器上不要忘记添加 ng-view,否则路由选中的页面无法加载。