菜鸟AngularJS学习之路【第一天】。(排版修正)

最新推荐文章于 2023-12-04 11:43:38 发布

世语繁华掩后伤

最新推荐文章于 2023-12-04 11:43:38 发布

阅读量436

点赞数

分类专栏：学习笔记文章标签： angularjs html 博客菜鸟自学

本文链接：https://blog.csdn.net/u012922916/article/details/70232925

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一次写博客有点紧张，要不要脱啊。。哈哈（毕竟我是段友）

本着“不求闻达于诸侯“ 的精神开始了我的博客之旅，非常感谢我的好友梅哥给我了这个建议，以后把每天的学习成果记录到这里与大家分享。

本人菜鸟一个大家轻喷，渴望得到指点！大笑

所看书籍为：AngularJS权威教程 CSDN上面可以找到

第一天：

1.初识AngularJS

首先我参照书上写了一个简单的数据绑定例子

html 页面结构就不再写出来

<div ng-app> 

        <input ng-model="meige" type="text" placeholder="梅哥" />
        <h1>我的好朋友{{ meige }}</h1>
</div>

1.先说明一下我对ng-app的理解我对它的理解是MVC里面的 view视图在Angular里面也叫模块它是用来渲染页面内容的每一个页面可以有多一个或多个ng-app来标注不同的模块。

2.ng-model 很明显是mvc模式里德 model 用来提供数据模型。

3.{{ }} 这个是用来绑定数据用的操作符，和ASP.NET MVC的”@“操作符 ASP.NET的”<% %>“ 感觉很像。只不过其实{{ }} 里面绑定的都是 $scope (数据模型对象) 的属性和方法。$ scope对象时用来在视图和控制器之间传递数据的枢纽。（Angularjs为双向数据绑定：视图上的数据变化会映射到实体模型。实体模型的数据变化也会反应到视图上。实现这个绑定是通过一系列循环和脏值检查）通过看书知道一些概念，分享给大家！后面再研究，

上面的代码运行结果如下

这里写图片描述

当我在文本框中输入任何值的时候 {{ meige }} 将响应对应的值，用ng-model实现了动态绑定而只需要简单的两个小步骤，还是蛮吸引人得！

接着我通过书上的示例来实现一个时钟效果这里我们要用到第二个AngularJS指令 ng-controller (顾名思义这个是控制器的意思) 先实现效果后面再来探索一下他们的包含关系。控制器命名格式为 nameController
首先写html代码

<div ng-app  ng-controller="oygController">
<h1>现在是深圳时间:{{ time }}</h1>
<div>

//这里接收两个参数个: $scope(实体模型对象) 它的作用前面说过时视图和控制器

之间数据同步的桥梁. $timeout 为计时器

    function oygController($scope, $timeout)
    {
        var updateTime = function () {

            $scope.time = new Date().toLocaleString();

            $timeout(function () {
                updateTime();
            }, 1000);
        }

        updateTime();
    }

运行上面的代码得到如下结果

这里写图片描述

时间会一直刷新，显示当前时间。相当于一个死循环。

如果有人跟我一样是初学者肯定都会对$timeout 没什么好感因为并不认识那我们就来用 setInterval 来实现相同的功能，
编写代码如下

    function oygController($scope, $timeout)
    {
        $scope.time = new Date().toLocaleString();

        setInterval(function () {
            $scope.time = new Date().toLocaleString();
            $scope.$apply();  //这句代码是用setInterval实现的核心代码 因为angularjs并不知道你已经更新了模型的值  你需要手动去触发这个函数 让它知道你更新了 从而实现绑定
        }, 1000)
    }

这样我们用原生的定时器也实现了相同的功能。关于绑定执行原理后面再探索。

下面我们来谈一谈作用域，视图，控制器，模型对象的关系

经过一些学习作用域对于angularjs来说至关重要，但是我现在还没有完全领悟它。视图（ng-app）制定再Html页面的哪个区域是属于angualrjs的哪个模块来处理的。可以包含诺干戈控制器对于控制器而言他们的关系都是平等的每一个控制器都有自己的 $scope对象而他们的ng-app 则拥有顶级的$ rootscope对象。和ECMAscript 中的原型继承一样，子对象可以访问父对象的属性。（因为继承了）不知道我理解的对不对，求指点！

因此我总结出如下的包含关系 ng-app包含controller $scope 连接ng-app和controller

根据此关系查了一些资料做了一个页面包含多个模块的示例也说明了 angularjs模块化的概念（html 层面 js层面正在学习）

下面是示例代码(可以直接运行):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="angular_1.2.13.js"></script>
    <!--<script src="angular-1.6.4/angular-1.6.4/angular.min.js"></script>-->
</head>
<body>
    <div ng-app="myAPP">
        <div ng-controller="oygController">
            <h1>{{ time }}</h1>
        </div>

    </div>

    <div id="oyg" ng-app="meigeAPP">
        <div ng-controller="meigeController">
            <h1>{{ meige }}</h1>
        </div>
    </div>

    <script>
        //APP  module是controller的容器  controller 负责具体元素的逻辑处理   数据模型暂时还没看到

        //AngualrJS 默认只会装载第一个App模块
        var oygAPP = angular.module("myAPP",[]);//这个相当于视图 （页面显示）
        oygAPP.controller("oygController", function ($scope) {      //控制器（业务逻辑处理 ）
            $scope.time = "月落乌啼霜满天";  //$scope 实体模型对象
        });

        //之后的模块需要手动启动
        var meigeAPP = angular.module("meigeAPP", []);
        meigeAPP.controller("meigeController", function ($scope) {
            $scope.meige = "梅哥来到小河边";
        });

        //这句代码用来启用第二模块  这里要
        angular.bootstrap(document.getElementById("oyg"), ['meigeAPP']); 
    </script>
</body>
</html>

各位大侠，明天继续菜鸟轻喷！！

世语繁华掩后伤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜鸟AngularJS学习之路【第一天】。(排版修正)

第一次写博客有点紧张，要不要脱啊。。哈哈（毕竟我是段友）本着“不求闻达于诸侯“ 的精神开始了我的博客之旅，非常感谢我的好友梅哥给我了这个建议，以后把每天的学习成果记录到这里与大家分享。本人菜鸟一个大家轻喷，渴望得到指点！大笑所看书籍为：AngularJS权威教程 CSDN上面可以找到第一天：1.初识AngularJS 首先我参照书上写了一个简单的数据绑定例子 html 页面结构就不再写出来<
复制链接

扫一扫