Angular.JS学习记录（一）

时间 2019-11-08

标签 angular.js angular 学习记录栏目 AngularJS 繁體版

原文原文链接

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

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

下载

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

简单使用

首先它是一个 JavaScript框架，因此使用以前须要使用script标签引入。html

ng-app

这个指令决定了angularjs的做用域范围，你能够以下使用前端

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

若是只想让angularjs渲染整个页面，也可使用java

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

来渲染其中的一部分。node

ng-model

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

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>

结果如图所示：

怎么样。不错吧。经过短短的几行代码就能够实现几倍jquery实现的功能。固然这还只是angular的冰山一角，传闻当时google一个项目在用angular以前有15000+代码。使用angular之后只用了3000+左右。固然具体的状况我不敢肯定哈。可是这足以说明angular的强大了！angularjs

controller

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

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