angular 入门教程1

时间 2019-12-06

原文原文链接

使用angularjs也有一年之久了。从初识angularjs时的激动和兴奋到如今淡定的使用，这其中也是有很多的心酸（刚用的时候和各类js插件的配合使用快把我弄疯了）。html

细想起来。用MVVM的这种js框架也有3年之久了。从最初的knockout到如今的angularjs，对于前端框架的使用确实可以提交开发效率，更能提高用户体系。全部的交互都经过异步来交互。对于如今的移动互联网，尤为须要这些。有了这些框架咱们能够更轻松的开发webapp和H5的各种应用。而angular 更是其中的佼佼者。前端

下面来简单介绍一下基本的概念和基本的使用场景和方法程序员

1：angular是什么(其实这个我不必写，大家百度就行，但为了承上启下仍是写上吧)angularjs

用一句话总结介绍：angular是一个由google研发的。MVVM的前端js框架。支持双向绑定和依赖注入，后台程序员是否是很熟悉，没有错它就是专门为后端程序员而生的前端框架。因此若是你是后端程序员那么大家对于思路上的大家很容易就能切入进去。前端的程序员也别慌。就是一堆js并且。很容易就能看懂。下面开始正式开说。web

2：双向绑定后端

这个应该是最实用的效果了（以前knockout教程里面也有写到过）简单来讲就是咱们能够经过双向绑定来动态的更新页面上的数据。能够实现局部刷新（可能以前你是拼的html来实现的）这样你就能够很简单得实现整个页面都是异步的进行加载。对于双向绑定原来性的东西。你们能够去官网查看源码来了解。我这里呢主要是在使用方面进行讲解。前端框架

废话很少说先上代码。app

<ANY
  ng-bind="">
...
</ANY>

这个就是进行双向绑定的语法。ng-bind 是angular 内置的 directive 后面我会讲到什么是directive 如今大家只要知道我经过这个语法能够对数据进行绑定。框架

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
</div>

上面的代码是angular js部分的。大概意思建立一个叫作bindexample 的模块在建立一个叫作exampleController 的控制器。在控制器里面赋值了一个变量webapp

html的部分的结构从上到的意思是。经过ng-controller来肯定控制器的做用域。在这里做用域以内呢。咱们可使用angular对于的控制器里的变量和方法。

看到这，后端的程序员是否是以为怎么像是MVC框架的控制器。那有model吗？答案呢是确定的。固然有啦。在上面的html代码中就有一个angular 命令（对应directive后文中以命令来代替）ng-model用来绑定数据模型。你就能够把他理解为MVC 的model。由于在这里他们的做用和语义上确实是大同小异的。至于view固然就是对应的页面了。对于angular 的语法你能够参考官网。最简单的controller定义就是如上面的那种形式了。这也是最标准的写法。除此以外你还能够这样写

<script>
var app=angular.module('bindExample', [])
app.controller('ExampleController',function($scope) {
      $scope.name = 'Whirled';
    });
</script>

这样看起来是是否是容易理解点。可是要注意。这种写法是不支持js压缩的也就是说若是你的项目比较大最好仍是按照标准的写法来写。

在实际的项目使用当中来讲。每每不会直接把控制器的定义和app模块的定义都放到一个js里面。通常来讲是这种结构。

templates/
    _login.html
    _feed.html
app/
    app.js
    controllers/
        LoginController.js
        FeedController.js
    directives/
        FeedEntryDirective.js
    services/
        LoginService.js
        FeedService.js
    filters/
        CapatalizeFilter.js

在前端也进行业务和逻辑分层。方便管理和维护。在上面呢我经过双向绑定来引出了angular具体的使用方式和一些基本的语法。可能有些你还不太理解。先不要着急

先这么用。至于为何这么用我会在后面进行讲解。固然在使用的过程当中可能大家本身也就顿悟了哈哈。

3：控制器

接着上面的说在上面的例子中屡次使用了controller 关于控制器是什么我先给出比较官方的解释:"控制器是一个Javascript函数（类型/类），用来加强除了根做用域意外的做用域实例的。当你或者AngularJS自己经过scope.$new俩建立一个新的子做用域对象时，有一个选项能让你将它当作参数传递给控制器。这能使AngularjS将控制器和这个做用域联系起来，加强做用域的行为。" 是否是看完仍是云里雾里的。那我用大白话来给你们解释下什么是控制器。

其实说白了就是一个普通js函数对象。它是有做用域的，它的做用域呢是经过声明的方法来指定的。它有面向对象的特性支持控制器之间的继承。继承的子控制器能够取到父控制器的方法和对象。

先看看普通的控制器是什么样的

<body ng-controller="SpicyCtrl">
 <button ng-click="chiliSpicy()">Chili</button>
 <button ng-click="jalapenoSpicy()">Jalapeño</button>
 <p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
 $scope.spice = 'very';
 $scope.chiliSpicy = function() {
   $scope.spice = 'chili';
 }
 $scope.jalapenoSpicy = function() {
  $scope.spice = 'jalapeño';
 }
}

上面的代码呢我先用大白话解释一下就是定义了一个叫SpicyCtrl（命名规范是控制器名称+Ctrl）的控制器。里面定义了两个方法。而后经过ng-click内置指令来调用，点击按钮进行双向绑定，“{{}}”这种语法也是绑定写法的一种可是我不推荐这么写。缘由呢留给大家去思考。很容易就会得出结论。

对于上面代码需求注意的几点是。

ngController指令是用来（隐式地）为模板建立做用域的。而且使用命令中指定的spicyCtrl控制器来加强这个做用域。
spicyCtrl只是一个纯Javascript函数。使用了驼峰式命名法（可选）命名并以Ctrl或者Controller结尾。
对做用域对象赋予一个新的属性会建立或者更新模型。
控制器方法可以直接经过赋格做用域对象这个方式建立（如例子中的chiliSpicy方法）。
控制器中的所用方法都能在模板中调用（在body元素或者子元素中）

接来下继续讲解关于控制器方法传参的问题。

<body ng-controller="SpicyCtrl">
 <input ng-model="customSpice" value="wasabi">
 <button ng-click="spicy('chili')">Chili</button>
 <button ng-click="spicy(customSpice)">Custom spice</button>
 <p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
 $scope.spice = 'very';
 $scope.spicy = function(spice) {
   $scope.spice = spice;
 }
}

SpicyCtrl控制器只定义了一个叫spicy的方法，它接受一个叫作spice的参数。和这个控制器相关的模板在第一个按钮事件中传递了一个chili常量给控制器方法，在第二个按钮中传递一个模型属性。（能够理解为model的一个字段）

最后呢是关于控制器继承的例子.

<body ng-controller="MainCtrl">
 <p>Good {{timeOfDay}}, {{name}}!</p>
 <div ng-controller="ChildCtrl">
   <p>Good {{timeOfDay}}, {{name}}!</p>
   <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
</body>

function MainCtrl($scope) {
 $scope.timeOfDay = 'morning';
 $scope.name = 'Nikki';
}

function ChildCtrl($scope) {
 $scope.name = 'Mattie';
}

function BabyCtrl($scope) {
 $scope.timeOfDay = 'evening';
 $scope.name = 'Gingerbreak Baby';
}

注意咱们是如何在模板中嵌套咱们的ngController指令的。这个模板结构会使得AngularJS为视图建立四个做用域：

根做用域
MainCtrl做用域，它包含了模型timeOfDay和模型name。
ChildCtrl做用域，它继承了上层做用域的timeOfDay，复写了name。
BabyCtrl做用域，复写了MainCtrl中定义的timeOfDay和ChildCtrl中的name。

控制器的继承和模型继承是同一个原理。因此在咱们前面的例子中，全部的模型都用返回相应字符串的控制器方法代替。

注意：常规的原型继承对控制器来讲不起做用。由于正如咱们以前提到的，控制器不是直接实例化的，而是对做用域对象调用的。

以上呢就是控制器的几种用法了。固然这里说的都是最基础的用法了。后面我会继续讲到一些实际项目中的一些用法包括路由和注入。服务调用等等。

看到这相信你对于angular的总体和基本的使用方式都有了必定的理解了。时间有限第一篇的教程就写到这里就结束了。有不足之处欢迎指正。