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

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

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

1：angular是什么(其实这个我没必要写，你们百度就行，但为了承上启下还是写上吧)

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

2：双向绑定

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

废话不多说先上代码。

<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 的控制器。在控制器里面赋值了一个变量

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的整体和基本的使用方式都有了一定的理解 了。时间有限第一篇的教程就写到这里就结束了。有不足之处欢迎指正。

angular 入门教程1的更多相关文章

  1. 中文代码示例之Angular入门教程尝试

    原址: https://zhuanlan.zhihu.com/p/30853705 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入 ...

  2. 2017-11-07 中文代码示例之Angular入门教程尝试

    "中文编程"知乎专栏原址 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. ...

  3. Angular入门教程四

    4.8依赖注入DI 通过依赖注入,ng想要推崇一种声明式的开发方式,即当我们需要使用某一模块或服务时,不需要关心此模块内部如何实现,只需声明一下就可以使用了.在多处使用只需进行多次声明,大大提高可复用 ...

  4. Angular入门教程三

    4.6指令(directive) 通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的. 模板中可以使用的东西 ...

  5. Angular入门教程二

    4 功能介绍 4.1数据绑定 AngularJS的双向数据绑定,意味着你可以在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然.即:一方面可以做到model变化驱动了DOM ...

  6. avalonjs1.5 入门教程

    迷你MVVM框架 avalonjs1.5 入门教程 avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让 ...

  7. AngularJS入门教程：日期格式化

    AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...

  8. .NET Core快速入门教程 2、我的第一个.NET Core App（Windows篇）

    一.前言 本篇开发环境?1.操作系统: Windows 10 X642.SDK: .NET Core 2.0 Preview 二.安装 .NET Core SDK 1.下载 .NET Core下载地址 ...

  9. .NET Core快速入门教程 3、我的第一个.NET Core App （CentOS篇）

    一.前言 本篇开发环境?1.操作系统:CentOS7(因为ken比较偏爱CentOS7)2.SDK版本:.NET Core 2.0 Preview 你可能需要的前置知识1.了解如何通过Hyper-V安 ...

随机推荐

  1. FSG压缩壳和ImportREC的使用 - 脱壳篇05

    FSG压缩壳和ImportREC的使用 - 脱壳篇05 让编程改变世界 Change the world by program FSG这个壳可以说是有点儿不守妇道,尼玛你说你一个压缩壳就实现压缩功能得 ...

  2. ［XMPP］简易的聊天室实现［二］（使用CocoaAsyncSocket）

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  3. select操作

    // 1.判断select选项中 是否存在Value="paraValue"的Item         function jsSelectIsExitItem(objSelect, ...

  4. 关于SQL SERVER 2008 R2发布订阅功能

    实现功能:主服务器维护数据的变更,从服务器需要时同步主服务器的数据. 配置:主从服务器均为SQL SERVER 2008 R2. 实现方法: 预备: 1.主从服务器需建立同一账户名及密码的账户(当时我 ...

  5. Asp.net web服务处理程序(第六篇)

    四.Web服务处理程序 对于Web服务来说,标准的方式是使用SOAP协议,在SOAP中,请求和回应的数据通过XML格式进行描述.在Asp.net 4.0下,对于Web服务来说,还可以选择支持Ajax访 ...

  6. 【转】linux环境变量设置

    1. 显示环境变量HOME $ echo $HOME /home/terry 2. 设置一个新的环境变量WELCOME $ export WELCOME="Hello!" $ ec ...

  7. #include<math.h>

    1.sin(a)类:a是弧度值: 2.abs(b):结果是b的绝对值: 3.exp(c):exp()用来计算以e为底的x次方值,即ex值,然后将结果返回.返回值: 返回e的x次方计算结果. 4.log ...

  8. 手机端Zepto框架，利用swipejs插件做banner轮播图

    一,HTML部分<div class="banner"> <div id="slider" class="swipe"&g ...

  9. 【技术文档】《算法设计与分析导论》R.C.T.Lee等·第5章 树搜索策略

    计算机中许多问题的解空间可以用一棵树来表示,最优解就在树中的一个分支上,因此,我们在解这类问题时可以采用树搜索策略,最经典的问题包括0/1背包问题.旅行商问题.哈密顿回路问题,还有8数码问题(就是我们 ...

  10. Photoshop 批量处理图片

    不论什么你想反复进行的操作都能够通过创建 Photoshop 批处理程序来完毕.比如.你想批量改变图片的大小,就能够通过下面操作来实现. 1.打开随意一张图片,在动作面板中,点击新建button 2. ...