Angular.JS学习记录（一）

2019年9月15日 135次阅读 来源: Hockor

要说现在前端最火热的东西，node.js以及谷歌推出的Angular绝对是不二之选，本人也是最近才开始学习这个东西，写下这篇文章，就当做是自己的一个学习见证吧！

Angular。一听名字就很高大上啊。那么它是做什么的呢，简单的说就在MVC模式上升级——>MVVM模式。AngularJS通过新的属性和表达式扩展了HTML。他可以构建单页面应用程序，即SPA（SPAs：Single Page Applications）。

下载

官方网址：https://angularjs.org/（国内的墙，你懂的，一般都很高！）
CDN地址：http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.js

简单使用

首先它是一个 JavaScript框架，所以使用之前需要使用script标签引入。

ng-app

这个指令决定了angularjs的作用域范围，你可以如下使用

html<html ng-app> 
…  
</html>

如果只想让angularjs渲染整个页面，也可以使用

html<div ng-app='myapp'>
……
</div>

来渲染其中的一部分。

ng-model

ng-model,当你的数据模型被改变的时候，譬如ng-model=’test’,其中这个test的数值被改变的时候，绑定的{{test}}的数值也将跟随改变，也就是连接到ng-model中的test也跟随改变,如下

html<!doctype html>
<html>
    <head>
        <script src="angular.min.js" type="text/javascript"></script>
        <title>learing argularjs--widuu</title>
    </head>
    <body ng-app>
    <input ng-model='test' >
    <p> hello {{test}} </p>
    </body>
</html>

结果如图所示：
《Angular.JS学习记录（一）》
怎么样。不错吧。通过短短的几行代码就可以实现几倍jquery实现的功能。当然这还只是angular的冰山一角，传闻当时google一个项目在用angular之前有15000+代码。使用angular以后只用了3000+左右。当然具体的情况我不敢确定哈。但是这足以说明angular的强大了！

controller

controller是angular.Module中的方法。
使用方法为controller(name,constructor);
其中name是controller的名字，constructor是控制器构造函数，我们利用代码来看看：

html<!doctype html>
<html>
    <head>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        var app = angular.module('myapp',[]);
        app.controller('hockor',function($scope){
            $scope.test="hello word";
        });
        </script>
        <title>learing argularjs--widuu</title>
    </head>
    <body ng-app='myapp' ng-controller='hockor' >
    <input ng-model='test'>
    <p> hello {{test}} </p>
    </body>
</html>

执行代码以后大家可以看到和上一个效果是一样的，这就是controller的作用。即控制器。代码中的$scope和module可能很陌生。没关系，接下来我就会解释了。

$scope

顾名思义，这是指作用域。谈到JS的作用域，相信很多从事多年JS开发的人都还是有一点晕，JS的预解析是招聘中的一个重要考察点。好了废话不多说，咱们还是通过代码来看问题。（以后的代码我指贴出重要部分了哈，ng-app指令默认放在HTML标签上面）

html<p ng-controller="hockor">{{name}}</p>

Javascriptfunction hockor($scope){
        $scope.name = "hello hockor";
    }

代码中的控制器指向了hockor这个函数，hockor这个函数中我定义了1个形参是$scope，这是angular内置的,我现在是把name这个变量挂载到$scope上的，这样name这个属性才能被找到，如果单纯的写var name = “XXX”,这样是无效的，它就是一个普通的变量，而不是我们想要的数据。

接下来我们再来看个例子。

html<div ng-controller="hockor">
<p>{{name}}</p>
</div>
<p> {{age}}</p>

javascriptfunction hockor($scope,$rootScope){
        $scope.name = "hello hockor";
        $rootScope.name = "Just test";
    }

这一次大家可以看到除了$scope以外我们还有一个参数$rootScope。通过其名字我们也可以猜出，它就是一个顶级作用域，也就是全局作用域。本来上面代码中的{{age}}是没有挂载到hockor这个控制器下的，但是执行代码我们可以发现他还是被解析成了Just test这句话，这就是Angular中的作用域！

注意：以上我们所写的形参$scope.$rootScope是不能修改为其他值的哦！

为什么呢？

大家可以观察上面的ng-controller，我们写的是一个函数名。并且不带括号，这和我们普通的调用JS函数不一样，普通的调用JS函数是需要加括号的，并且可以传参在里面，而且形参的名字是不受限制的。而在这里就不需要写括号了，只需要写一个函数名，angular自动帮我们依赖注入了参数，所以形参$scope.$rootScope是不能修改为其他值的，必须按照angular的格式来写。

OK，第一篇到此结束！

原创文章：转载请注明！-hockor

    原文作者：Hockor
    原文地址: https://segmentfault.com/a/1190000002545830
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞