AngularJS之Scope及Controller（一）

时间 2019-11-15

标签 angularjs scope controller 栏目 AngularJS 繁體版

原文原文链接

前言

以前有接触过基本的AngularJS，未过多涉及，因而乎本系列咱们来着重讲讲AngularJS，对AngularJS中重要的几大内容进行梳理并进行一些小的例子的书写。在以前项目过程当中用到过avalon，可是avalon并未被普遍使用也就放弃了，至于孰最轻量，性能更好做为非专业的我就不妄下结论，lz只明白一点，业界最流行什么前端框架，招聘大部分要求会哪些框架，lz才会去学习，固然其中的乐趣也是油然而生，每一次敲代码的过程好似在浩瀚大海中探幽一番，别有一番滋味。javascript

简短介绍

AngularJS也是一种MVVM前端框架，其中的路由、指令、服务、工厂等。它帮助了咱们开发前端UI并简化了一些繁琐的过程，同时它也恰如其分的支持客户端的单元测试。它涉及到Model、View、Controller。当AngularJS应用程序被启动时，其Model、Controller、View以及HTML文档都会被加载到用户的设备上，最终运行在用户设备的硬件中。至于Model、View、Controller这三者之间的联系，咱们看以下图便知。html

HelloWorld

貌似每学一门新的语言或者框架首先都会想到的是和这个世界打个招呼，下面咱们利用AngularJS和这个世界来打个招呼。前端

（1）页面定义模块而后获取模块java

var app = angular.module('myApp', []);

（2）定义控制并获取该控制器进行对应的赋值设计模式

app.controller('ctrl', ['$scope', function($scope){
    $scope.greeting = {text:"Hello"};
}])

（3）UI页面前端框架

<html ng-app="myApp">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="HelloWorld.js"></script>
</head>
<body ng-controller="ctrl">
    {{greeting.text}},World
</body>
</html>

最终结果以下：app

（1）模块：AngularJS中的module做为Angular应用程序的入口点。那模块从何而来呢？这里不作过多探讨，涉及到依赖逐入的概念。依赖逐入是AngularJS中主要的优势之一，在DI做为一种设计模式被定义在应用程序中做为配置的一部分，如此一来，无需咱们手动去建立，当应用程序首次启动时，DI会自动加载模块依赖。框架

（2）模型类：拿MVC类比，咱们经过模型来获取数据，此时咱们必须定义模型类，同理在大多数JavaScript客户端框架中也会要求咱们建立模型类，可是在AngularJS中这种状况不会发生，在AngularJS中有一个$scope对象，此对象用来存储模型类，Scopes被附加到DOM元素上，咱们能够经过使用数据属性到$scope的对象。$rootScope是AngularJS程序中的父Scope。性能

（3）控制器：在AngularJS中控制器做为视图和model的桥梁，在这个控制器这个区域中咱们能够放置一个视图的全部业务逻辑。当应用程序中的业务逻辑被多个控制器所使用时，此时咱们应该将业务逻辑放置在AngularJS中的Service（服务）中，当咱们须要用到这些业务逻辑时，咱们须要在DI的帮助下来获取这些服务。单元测试

下面一张图简短的归纳了视图（View）、$scope、控制器（Controller）之间的关系。

$scope与Controller

咱们经过一个例子来看这两者之间的关系：

UI

<html ng-app="myApp">  
<head>  
    <title></title>  
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="scopeController.js"></script>
</head>  
<body>  
    <div ng-controller="ctrlName">  
        <input type="text" width="200px" ng-model="name" />  
        <h2>Your Name : {{name}}</h2>  
    </div>  
</body>  
</html>

JS

app.controller('ctrlName', function ($scope) {  
    $scope.name = '';  
});

咱们看看演示效果：

Controller as语法

对于上述咱们能够经过另一种方式实现，在AngularJS 1.1.5版本后开始支持控制器as语法。咱们给出代码看看。

UI

<html ng-app="myApp">
<head>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="myCtrl.js"></script>
    <title></title>
</head>
<body ng-controller="myCtrl as u">
    <h2>{{u.username}}</h2>
    <h1>请输入你的名字 :</h1>  
    <input type="text" width="200px" ng-model="u.name" />  
    <h2>你的名字是 : {{u.name}}</h2>  
</body>
</html>

JS

app.controller('myCtrl',function(){
    var self = this;
    self.name = "";
    self.username = "xpy0928";
})

结果演示：

总结

本节咱们简短的介绍了AngularJS以及一些基本概念。下节再见。