使用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. python运维开发(二十四)----crm权限管理系统

    内容目录: 数据库设计 easyUI的使用 数据库设计 权限表Perssion 角色表Role 权限和角色关系表RoleToPermission 用户表UserInfo 用户和角色关系表UserInf ...

  2. grep;egrep;fgrep

    -1 使用场景:搜索定位内容并输出(所在行) -2 三者区别: --1 grep  默认支持普通正则 --2 egrep 默认支持扩展正则 等同于 grep -E --3 fgrep 速度最快,不支持 ...

  3. iOS GCD使用整理

    自己进行一个复习整理 1.最简单的用法 全局并行 dispatch_async(dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_ ...

  4. CSS基础-引入方法，选择器，继承

    一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...

  5. 【MVC4 之 ViewData ViewBag TempData】

    ViewData (一个字典集合类型):传入的key必须是string类型,可以保存任意对象信息,特点:它只会存在这次的HTTP的要求中而已,并不像session可以将数据带到下一个Http要求. V ...

  6. 【转】Linux里如何查找文件内容

    原文网址:http://blog.chinaunix.net/uid-25266990-id-199887.html Linux查找文件内容的常用命令方法. 从文件内容查找匹配指定字符串的行: $ g ...

  7. 用VS2013+VELT-0.1.4进行海思平台 Linux内核 的开发

    快乐虾 http://blog.csdn.net/lights_joy/(QQ群:Visual EmbedLinux Tools 375515651) 欢迎转载,但请保留作者信息 本文仅适用于vs20 ...

  8. archlinux相关资料整理

    Arch linux Arch Linux Wiki Arch linux Wiki Markdown Arch Wiki python continuing ...

  9. POJ1270 Following Orders （拓扑排序）

    Following Orders Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4254   Accepted: 1709 ...

  10. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示