使用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. sleep函数——Gevent源码分析

    gevent是一个异步I/O框架,当遇到I/O操作的时候,会自动切换任务,从而能异步地完成I/O操作 但是在测试的情况下,可以使用sleep函数来让gevent进行任务切换.示例如下: import ...

  2. .net项目IIS、VS 附加进程调试

    IIS调试 1.首先要把项目发布至IIS上,确保项目能正常运行. 2.从IIS上右键站点>管理网站>浏览 或者打开“内容视图“ 选择一个文件右键>浏览. 3.用vs打开该项目,选择 ...

  3. Ext4 MVC CRUD操作

    项目目录结构如下: (1)index.html <!DOCTYPE html> <html> <head> <title>用户管理</title& ...

  4. SQL Server索引 - 聚集索引、非聚集索引、非聚集唯一索引 <第八篇>

    聚集索引.非聚集索引.非聚集唯一索引 我们都知道建立适当的索引能够提高查询速度,优化查询.先说明一下,无论是聚集索引还是非聚集索引都是B树结构. 聚集索引默认与主键相匹配,在设置主键时,SQL Ser ...

  5. Calendar中add函数和roll函数的用法及区别

    Calendar中add()和roll()函数的用法一.取某个时间点后的整点时刻.例如1984年7月7日15:23:05后的整点时刻即为1984-07-07 16:00:00.实现如下:Calenda ...

  6. (?m) 标记

    <pre name="code" class="html">在和 codec/multiline 搭配使用的时候,需要注意一个问题,grok 正则和 ...

  7. bzoj1664 [Usaco2006 Open]County Fair Events 参加节日庆祝

    Description Farmer John has returned to the County Fair so he can attend the special events (concert ...

  8. 剑指offter-面试题7.用两个栈实现队列

    题目.用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail和deleteHead 分别完成在对尾插入节点和在队头删除节点. 该队列类模板如下: template <typ ...

  9. 剑指offer-面试题1:赋值运算符函数

    题目:如下为类型CMyString的声明,请为该类型添加赋值运算符函数 class CMyString { public: CMyString(char *pData=NULL); CMyString ...

  10. 【LeetCode练习题】Pow(x, n)

    Pow(x, n) Implement pow(x, n). 计算x的n次方. 解题思路: 考虑到n的值会很大,而且可为正可为负可为0,所以掉渣天的方法就是用递归了. 对了,这题也在<剑指off ...